Two ways to password protect a HTML page

Admin Tue Apr 08, 2008 3:50 pm

Use JavaScript to protect a page (I)
Combine the userids and passwords to form a HTML page name
The idea for this technique came from Jonathan Brazil.

Before anyone enters the protected page you show a page with a form where the user enters his name and password. When this form is submitted the browser takes you to a page with a name derived from these fields. This page contains a META element that sends the browser to the protected page.

The advantage for this solution over the second one is that the valid userid's and passwords aren't stored inside the script itself. The disadvantage is that you must create an in-between page for every valid userid/password combination.

This is the page where the user enters his/her userid and password:

<HTML>
<HEAD>
<SCRIPT language="JavaScript">
function sendThrough() {
var xForm = document.forms['check']
location = 'check' + xForm.userid.value + xForm.password.value + '.html'
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="check">
User-id</TD><TD><INPUT name="userid" type="text"><BR>
Password</TD><TD><INPUT name="password" type="password"><BR>
<INPUT type="button" value="Submit" onclick="sendThrough()">
</FORM>
</BODY></HTML>

User-id
Password

When the button is used you are sent to a page called:
check + [userid] + [password] + .html

For example, entering "rob" and "secret" will try to load the page called checkrobsecret.html (try it now and see it work).

This page must exist on the server and must redirect the user to the protected page. If the user enters a non-valid combination the browser tries to load a page that doesn't exist and the server will return an error message (404 Not Found).

<HTML>
<HEAD>
<META http-equiv="refresh" content="0; url=protected.html">
</HEAD>
<BODY>
</BODY></HTML>

You don't have to set up a separate page for everyone you want to allow access, you could create a fixed number of pages and give one combination to someone you allow access.

By using a prefix for all the pages that are used as a protection, like check you can keep a better overview of the valid combinations

Use JavaScript to protect a page (II)
Store the passwords in a script
This technique shows you how to create a page with a text-field to enter the password and a button to use. If the password is valid the protected page is loaded. If the user enters a non-valid password a message will be shown.

First, you must create a separate file that contains the script, including the valid passwords. I call this page password.js.

function CheckIt() {
var cPassword = document.forms[0].password.value;
var cNextPage = "secret.html";

if (cPassword == "secret" ||
cPassword == "whisper") {
document.location.href = cNextPage;
} else {
alert('Wrong password, please try again');
}
}

Change the value of cNextPage to the address of the page you want to load. At the moment there are two valid passwords, "secret" and "whisper". If you need more just you can just add them to the condition. For instance, to add "something" as a valid password change the condition to this :

if (cPassword == "secret" ||
cPassword == "whisper") ||
cPassword == "something") {
etc...

Then you need a HTML page that contains the fields to enter. This page contains a script tag that loads the previously defined file password.js.

<HTML>
<HEAD>
<SCRIPT language="JavaScript" src="password.js"></SCRIPT>
</HEAD>
<BODY>
<FORM>
Enter the password and push the button to enter the secret zone
<INPUT type="password" name="password">
<INPUT type="submit" value="Ok" onClick="CheckIt(); return false;">
</FORM>
</BODY></HTML>

The option to store the passwords in a separate file and load this through the SCRIPT tag doesn't work in Internet Explorer 3.0, because this browser doesn't support the SRC attribute. If you want to support this browser than you must put the contents of password.js in the HTML page. Of course this makes the passwords visible to someone looking at the source of the page!