Using JavaScript for Password File Protection

Suppose you have some documents on your Web site that are not meant to be viewed by the general public. One solution is to have your Web server provide some sort of password access to the page, or perhaps even password protect an entire directory. This is the ideal method if security is vital. Only a password authentication program running on a server can provide the kind of secure access you need for sensitive information.

On the other hand, most of us don't work with truly sensitive stuff. We merely want to provide a barrier to restrict casual access by the general public. One low-tech approach is to merely remove any external links to your sensitive page. That way, users must explicitly type the path and name of the document. This method works best if the document is in a directory that contains an "index" or main home page. That way, if a user specifies just the path, they get the index document, and not the directory of files in that path.

The problem with this method is that once you give out the filename people can continue to access it. You may wish to limit the accesses to your restricted pages in some way -- for example, allow access on one day, but not on another. For this application JavaScript can help. With JavaScript, you can create a basic, no-frills enciphering program that converts a plain-text filename to an enciphered filename.

A numeric key can be used to increase the variability of the enciphering. The key has 63 possible values. Each of the keys results in a different enciphered filename from the same "plain-text" filename. You might use values 1 through 31, for example, as keys for each day of the month. This allows you to restrict access to your pages on specific days.

The encoding system used in the examples on this page is extremely simple, and can be broken in a matter of minutes by a trained cryptographer. However, to the average user the encoding scheme is not immediately obvious; there are no "secret words" or numbers stored in the script that a user can view.

Note
For the inquisitive, the script uses a simple cipher technique known as XORing, where the numeric value of each character of the plain-text password is mixed with a numeric key value. The result is similar to the old-fashioned "decoder ring" they used to give away in cereal boxes, where each letter is substituted for another. The benefit is that it's easy to change the key against which the letter values are matched.

A reverse process can be used to decode the cipher back to its plain-text filename. In fact, the exact same JavaScript program is used as both the encoder and as the decoder. Use the cipher text as the password, and provide the same key value used for encoding (remember: the encrypted text alone isn't enough -- you need the key value!).

Enciphering the Filename

Cipher.html can be used to determine the enciphered filename using whatever plain-text word or filename you wish. It's also a good demonstrator for the whole process. Use View, Document Source to look at the file, and you'll see that the code is actually quite simple. If you know a little about encryption systems feel free to enhance and modify this basic script.

To use, enter a word to encrypt. The script is set up to use only lower-case values, underscores, and periods (like Web filenames). Avoid using upper-case letters, and do not use any characters not allowed in Web filenames. You must also enter a key value, from 1 to 63. Leaving this entry blank or using a 0 will result in the same cipher text as the plain text. Click the Encode button to view the enciphered result. For example, suppose you specify the_beatles as the plain-text, and 4 as the key. The resulting cipher text is plaxfaephao. Therefore, the filename you will use with this combination is plaxfaephao. It's up to you if you wish to add an htm or html extension (some servers are a bit picky when it comes to files without extensions).

If your server limits filenames to eight characters, the plain-text filename should likewise be limited to eight characters. Example: If you specify beatles as the plain-text, and 12 as the key, you get 726hp2g.

Asking Users for a Password to Access a Page

Use cipher.html to determine the ciphered filename, based on the password you want to use and a key value from 1 to 63. Once you've obtained the ciphered filename you can create and store the restricted access page on your server using that name.

The password.html file demonstrates a JavaScript program showing the basic principle of allowing access to the restricted page. The program allows the user to enter a password. Clicking the Submit button decodes the password, and links to that page. Note that if the user selects the wrong password, an incorrect decipher string is generated, and Netscape attempts to link to a file that does not exist. An error message results.

The key value gives you many more password combinations. The password.html file uses the current day of the month as the key value. This allows the user to access the page for one day only. The next day the key value changes, and therefore the same password yields a different enciphered result. This system is particularly useful if you cannot update the restricted files on a regular basis. The files "self-expire" according to the current date.

From The JavaScript Sourcebook, by Gordon McComb. Published by Wiley Computer Publishing.

Back to the JavaScript Projects Page
Back to Gordon's Home Page

Send mail to me at: gmccomb@gmccomb.com