|
|
|
|||||
| Example. |
Sometimes you publish a page you don't want to show to the whole world and everyone in it, and you'll want to protect it with a password. The problem is that you don't have access to the security systen of your Internet Service Provider (ISP). Therefore we must use a different approach, and make clever use of some simple JavaScript. There are different ways known to use JavaScript for password protection, but what we don't want however, is putting the password in the JavaScript coding, because all scripts that work this way are as leak as the watergate building in the U.S.A. If you put the password in the script, you are really making it very simple to "crack" your password, just by looking at the source of the page in the browser. The mechanism we use in this piece of JavaScript does not have this disadvantage. Let's look into this a bit further. All versions of GateKeeper that are on these pages are developed by Joe Barta of Professional Web Design The general idea behind GateKeeper is as simple as it is efficient. You have an accesspage with a form to ask for the password and a button to enter it. This button starts a javaScript function, that takes the password from the form, appends ".htm" to it, and then sends the browser to this URL. A link to an example is here on the left. |
||||
| Example. |
The password you need in the example is "secret". Let's take a closer look at this example. The first thing you need is tha page you want to protect with a password. The name of the file must be the same as the password you want to use. In our example the password is "secret" so the filename of the page must be secret.htm. Below is the content of the page we use in our example.
<html>
<head>
<title>Here it is</title>
</head>
<body bgcolor="#FFFFFF">
<table width="350" cellspacing="0"cellpadding="0"
border="0">
<tr>
<td>
<h2 align="center">Here it is.</h2><hr>
<p>This is the top secret information
that is was all about.</p>
<hr>
</td>
</tr>
</table>
</body>
</html>
The next thing we have to do is create the access page. This is the page that contains the form where the visitor can enter the password. The code for this page is below, and here you can pick up the picture for this page.
<html>
<head>
<title>GateKeeper</title>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function gateKeeper() {
var location;
var password;
password=this.document.pass.input.value
self.location.href=password + ".htm"
}
// End -->
</SCRIPT>
</head>
<body bgcolor="#FFFFFF">
<table width="590" cellspacing="0" cellpadding="0"
border="0">
<tr>
<td align="center">
<h2>GateKeeper Identification</h2>
<hr>
</td>
</tr>
</table>
<table border="1" cellpadding="0" cellspacing="0"
width="590">
<tr>
<td rowspan="2" width="170"><img src="keeper.gif"
width="163" height="180"></td>
<td width="420" align="center" valign="middle">
<b>Please enter the password<br>
to enter the secured part of this site.</b>
</td>
</tr>
<tr>
<td align="center" valign="middle">
<form name="pass">
<p><input type="password" name="input" size="20">
<input type="button" name="button" Value="Password OK"
onClick="gateKeeper()">
</p>
</form>
</td>
</tr>
</table>
</body>
</html>
The blue part above is the form called "pass" with the input field "input" and the button called "button". When the button is clicked, the JavaScript function gateKeeper() is called. This function is the red part above. This function appends ".htm" to whatever was entered in the "input" field of the form and changes the location.href property of the document in the browser to the URL it just created, so this document will be displayed in the browser.
GateKeeper v1.2 - Using an intermediate page.Something that a clever visitor of your site is going to notice sooner or later is the fact that the page we jump to has the same name as the password. In order to prevent this, we can use an intermediate page. The name of this intermediate page is the password with .htm appended to it, but the body of this page is empty. There is just a little piece of JavaScript between the HEAD tags that bring us to the target page. A link to an example is here on the left. |
||||
|
The password, again, in the example is "secret". <html> <head> <title>Secured document</title> <script language="JavaScript"> self.location.href="thisisit.htm" </script> </head> <body bgcolor="#FFFFFF"> </body> </html> When this page is loaded in the browser, the visitor is immediately rerouted to thisisit.htm. A side effect is that if someone clicks the "Back" button of the browser while thisisit.htm is loaded he is immediately rerouted back to thisisit.htm. To make it even more difficult for someone to figure how it works, you can put the page containing the information (thisisit.htm) in a different directory. This must also be changed in the intermediate page (secret.htm).
|
 |
|
| Last change on May 2nd 2000. |
|
|
