Javascript : Password Protecting Pages

Tutorial

This article will teach you how to password-protect any webpage using Javascript.

Authors

If you have HTML pages that have highly sensitive material on them, then I would suggest, instead of using this article, you see my article on Integrating local content with your browser which is as secure as the lock on your house and the password on your own computer.

Sometimes however, you have pages which you'd like to make "pretty" secure, but still available on the Internet if the reader knows the correct password to view the page.  This article will show you two sets of Javascript code that do just that.

You will need your own webserver, or a webhost who allows you to put Javascript onto your pages.  Typically free websites do not allow this, however there is one PBWiki which is both free and which does allow Javascript.  Knol does not as far as I know.  And apparently neither does sites.google.com.  However if you are paying for your website, I would expect that you could use Javascript.  You might have to ask the company who is providing the site.  And of course if you are running your own Web Server like Apache, then you can always use Javascript.  So let's see what we have here.

Below I show two sets of code.  They both prompt the user for a password, and both of them, if the uses fails to enter the correct password, will send the user to a page called "http://somewebpage.com/passfailure.html".  However if the user enters the correct password, then the first set of code, will display an alert box, and then leave the reader right on the same page.  The second set of code, if the user enters the correct password, will send them to a page called window.location="http://somewebpage.com/passed.html".  It is really up to you, the web designer to decide which solution you like best.

Since the vast majority of persons do not understand enough about computers to be able to thwart this sort of security, you can feel confident using it for any of your minimally secure data.  You're always going to get a few hackers who can get at the data for free with this sort of code.  But it's good for 98% of readers.  Just make sure that, whatever it is you're hiding, is boring as heck to teen-aged boys.


If reader knows the password, then display this page

<html><head><title>Password Test and Stay Here</title>
<script type="text/javascript">
<!-- Begin
var password;
var pass1="password"; // place your password here
password=prompt("Enter Password:","");
if (password==pass1) {
            alert('Correct Password! Click OK to Enter!');
} else {
            window.location="http://somewebpage.com/passfailure.html";
} // End -->
</script></head>
<body>
Hello World
</body>
</html>


If reader knows the password, then go to a different page

<html><head><title>Password Test and Forward</title>
<script type="text/javascript">
<!-- Begin
var password;
var pass1 = "password"; // place your password here
password=prompt("Enter Password:","");
if (password==pass1) {
  window.location="http://somewebpage.com/passed.html";; // page to open if password is correct
} else {
  window.location="http://somewebpage.com/passfailure.html"; // page to open if password is incorrect
}
// End -->
</script>
</head>
<body></body>
</html>