JavaScript Password Protection

Home/JavaScript/Basics/Password 1

Browser Compatibility: NS2.02+, IE4+

OK, I finally got around to writing the javascript password protection tutorial. You will see the example script here is pretty straightforward, but it is also pretty easy to get around. I'll tell you why and give you links to more secure scripts later in this tutorial.

Warning: These scripts are not totally secure and your page can be seen if someone gets through. Do NOT protect anything important with a script like this. Try looking for a CGI Script or ask your web host to set up an .htpassword file if you need to protect something important.

Below is a link that will show you an example of what we are about to create. Click the link. When you are prompted for a password, enter:

cool

Example Password Protected Page

OK, if you typed "cool" into the prompt, you were allowed to continue loading the example page. If you typed anything else or nothing at all, you were taken right back to this page. That is pretty cool. Now let's see the script that makes this work. You would place this script in the HEAD section of the page you want to protect. In this case, it was "jex8.htm". Here is the script:

<HEAD>
<SCRIPT language="JavaScript">
<!--hide

var password;

var pass1="cool";

password=prompt('Please enter your password to view this page!',' ');

if (password==pass1)
  alert('Password Correct! Click OK to enter!');
else
   {
    window.location="http://www.pageresource.com/jscript/jpass.htm";
    }

//-->
</SCRIPT>
</HEAD>

If you have been through the previous tutorials, most of the code will make sense to you. Let's get to the details of what is going on with this thing:

var password;
This creates a variable named "password".

var pass1="cool";
This creates a password that will be accepted by the script. We name it pass1 in case we would like to have more than one acceptable password. ( ie pass2, pass3 etc. ).

password=prompt('Please enter your password to view this page!',' ');
This is what creates the prompt for the user to enter a password. Whatever the user enters in the prompt will be the value of the variable "password". If you have not seen prompts before, go to the prompts tutorial for more info.

if (password==pass1)
alert('Password Correct! Click OK to enter!');
This is where we verify the password. The variable "password" is what the user just typed into the prompt. The variable "pass1" is the only password we will accept. If they are the same, we send them an alert that the password was OK and they can continue. If you haven't seen if/else statements yet, go to the if/else page. For more on alerts, see the alerts page.

else
{
window.location="http://www.pageresource.com/jscript/jpass.htm";
}
This is what happens when they type in an incorrect password. We send them to a page of our choice. In IE4, it looks like nothing happened, it just reloads this page. In NS3 and 4 you will probably see the protected page for a quarter of a second. I said it wasn't the most secure script out there, so I would recommend the links at the end of the tutorial so you can get a more secure script. I chose to send it back to this page (jpass.htm), but you can type any url here you want. Maybe you could use something like:
window.location="http://www.barbie.com";
Make them cringe a little.......

All that's left after that is to link to the protected page from another page, like my link above to the example. No problem.

Now, if you want more than one acceptable password, you can make a couple of modifications and you will have it.

First, add more variables for the accepted passwords. If you want three good passwords, declare three variables. Since I had one named "pass1" already, I will just use "pass2" and "pass3":

var pass1="cool";
var pass2="awesome";
var pass3="geekazoid";

Next, you will need to change your "if" statement to include the other two passwords. This is done with the || (or) operator:

if (password==pass1 || password==pass2 || password==pass3)
  alert('Password Correct! Click OK to enter!');

This means that if the user typed in the correct value for "pass1" OR "pass2" OR "pass3", the password is correct and they can view the page.

Here is how the full code would look for this:

var password;

var pass1="cool";
var pass2="awesome";
var pass3="geekazoid";

password=prompt('Please enter your password to view this page!',' ');

if (password==pass1 || password==pass2 || password==pass3)
  alert('Password Correct! Click OK to enter!');
else
   {
    window.location="http://www.pageresource.com/jscript/jpass.htm";
    }

If you want to see this in action, click the link for this example below. Enter one of the three correct passwords (cool, awesome, or geekazoid) and you will see the next page!

Multiple Password Example

So, why is it easy to hack the script? One way is for the viewer to disable javascript. Not only will they get to the page this way, they can also view the source code to see the passwords and use them later. Thus, if you are protecting something important, you should use something more secure. You can find some more secure password javascripts at The JavaScript Source. You can also look for a CGI password script at The CGI Resource Index.

Well, that was OK, but if you go to the next section you will see a slightly better version of this same script. So, go on to Password Protection 2!

Partners

CoolHomepages | Web Design Library | Website Content