Tutorials - JavaScript Password Protection
Problem Analysis
There are different ways to handle password protection on Web pages. Here are a few options:
-
The most secure way is to use server-side scripting. The basic method is to use a database containing one password that is used by all members (no username needed). A second method is to use a database containing usernames and user specific passwords. Unfortunately, neither of these are options because Sacramento State does not allow server-side scripts to be run against the Sacramento State Web server and our Web application servers are only available to University programs, departments, and colleges and not to organizations or individuals.
-
Another option is to use client-side scripting. The basic method is to use a JavaScript password alert. The problem here is that anyone can simply look at the page's source code to obtain the password.
-
A different method is to find a JavaScript that doesn't validate a password, but rather, it takes the password entry (for example, hornets) and looks for a hornets.htm page in a given directory. Then the hornets.htm page automatically redirects the browser to the restricted site menu. Entering a password for a .htm file that doesn't exist results in a file not found error. Since visitors cannot view the file directory structure, there is no way for them to know what your files are named, so they would not be able to determine what to use as a password.
You can use this third method on Sacramento State Web accounts. In addition, you can add new passwords for access by creating new .htm files in the users directory from our example below. The password is the portion of the file name preceding the .htm extension. Example: hornets.htm >> password = hornets. You can also assign usernames. However, they would be esoteric names since our JavaScript does not use them.
Process Schematic
Confused? This image may help clarify the meaning of option 3 above.
Step 1: index page
Add the JavaScript below to the <head> section
of your Web page. On the Web page you can have
a password input field that executes the script
and redirects the visitor to the member's only
menu page.
<script language="JavaScript" type="text/javascript">
<!--
function login() {
if (validLogin()) {
passwd = document.form1.psword.value;
location.href="users/"+passwd+".htm";
}
}
function validLogin() {
if (isBlank(document.form1.psword.value)){
alert("Enter Password");
document.form1.psword.focus();
return false;
}
return true;
}
function isBlank(s) {
return (s == "");
}
//-->
</script>
Notice these parts of the JavaScript code above:
-
Path of your file — The location.href statement dictates the path to find the password file. The browser looks for a file with the name of the password entered by the visitor, with an extension of .htm inside a folder called users. For example, if the password is hornets the script looks for a file named users/hornets.htm Customize this statement to match your folder name by replacing users with your folder name.
-
Name of your form — Several lines of the JavaScript code require the name of the form that is being used to contain the password entry field. For example, the name of the form in the above script is form1. When you add the form (see next step) make sure the name matches the name used in place of form1 above. Or keep it simple and name the form as form1.
Step 2: add the form with the password prompt
Add the JavaScript below to the <body> section
of your Web page where you want to display the
password prompt. This creates a form with an
input field so that the password can be entered
by the visitor.
<form name="form1" onSubmit="return false">
Password:
<input name="psword" type="password" length="20" maxlength="20" />
<input name="button" type="button" id="button" onClick="login()" value="Login" />
</form>
Step 3: user redirect page
Now the password file (in our example, hornets.htm) needs
to have a redirect to your restricted menu. Here
is the JavaScript to place in the <head> section
of your password file.
<script language="javascript" type="text/javascript">
location = "../restricted/menu.htm"
</script>
- So, if the password was hornets, the browser looks for the file users/hornets.htm. The hornets.htm file has the above redirect and automatically takes the visitor one level up out of the users/ directory to a file restricted/menu.htm. The menu.htm file is displayed and contains the restricted access menu.
Step 4: prevent search indexing of hidden pages
Although this method is not fully secure, it is extremely (nearly) impossible for a visitor to gain access to the restricted menu unless he/she knows the URL to get to it. To ensure that the restricted access menu page (menu.htm) isn't indexed by search engines you should place the following statement after the statements from Step 3 above.
<meta name="robots" content="NOINDEX, NOFOLLOW" />
You should also place this code in the <head> section
of all pages that are accessible by restricted
access to ensure that they do not come up as
a search result.
last reviewed: January 25, 2008
