Passworded Website
Part of How Do They Do That With HTML? by Carl Tashian

This is one of the most frequent questions I get: "Can I protect part of my web site with a password?" Yes you can, and there are a number of ways to do it, depending on what kind of protection you need.

How to do it:

Here's a simple and very effective method: create a web page whose name is the password. If your password is "lazysnake", create a file called lazysnake.html on your web site. As long as you don't link to lazysnake.html from any of your public documents, no one will be able to find it (not even the search engines)! There is generally no index of documents available for a whole web site. If you don't tell someone where you keep your protected file, they won't be able to access it.

Using this concept, I wrote a simple JavaScript function to ask for a password at the entrance of the site. The function reads a password from the user, and takes them to the page with that name. If they type the correct password, they'll end up at your protected page. Otherwise, they'll get a "File Not Found" error. Here's the code:

<HTML>
<SCRIPT language="JavaScript"><!--
function check() {
    // Prompt user for the password ...
    pwd = prompt('Enter password before continuing','');
    // ... then set the browser location. (change the line below this one!)
    location.href = 'http://www.changethis.com/~you/' + escape(pwd) + '.html';
}
// -->
</SCRIPT>
<HEAD>
<TITLE>Site Entrance</TITLE>
</HEAD>
<BODY>
<DIV align="center">You must have a password to enter this site!<P>
    <FORM>
        <INPUT type="Button" onClick="check()" value="Enter Site">
    </FORM>
</DIV>
</BODY>
</HTML>

This method is nice because the password isn't stored in any form on the entry page. An intruder can look at the page source, but they won't be able to find the password. Want to try it out? Here's an example--the password is "lazysnake".

By the way, if you were to copy the above code exactly, and if you typed "lazysnake" as the password, you'd be sent directly to "http://www.changethis.com/~you/lazysnake.html". To avoid this, you'll need to change the first part of this URL (in the code) to match your own web site address. Then, once the correct password is typed in, the location.href will contain the complete URL of your protected document, and the user will be sent to the protected page.

Alternatives:

Lets say you want to do something a little crazier-- perhaps you want to have a list of multiple users and passwords, and you want each user to get a different protected document when they enter their password. This is all possible with JavaScript, but the more complicated solutions are often easier to break into, if someone knows a bit of JavaScript. Bearing that in mind, you can check out The JavaScript Source for a few other password protection scripts.

Beyond JavaScript, I should mention another method. Some ISPs provide "HTTP Authentication," which is a very flexible form of password protection. If you can use it, you should--it's much better than JavaScript methods. Your ISP will explain how to set it up.


[ return to front page ]

Reproduction of material from this page without written permission is strictly prohibited
Copyright © 1995-2001 Carl Tashian