Share this Page URL

Chapter 18. More JavaScript Fun > Creating a Password-Protected Page - Pg. 209

More JavaScript Fun 209 Creating a Password-Protected Page Many readers have written to me over the years and asked how they can set up a page that can be accessed only if the user enters the appropriate password. "That depends," I always respond, "on how bulletproof you need your password to be." Here are a couple of things to consider when de- ciding how much password-protection you need for your page: · If you have sensitive information that must be protected at all costs, ask your web hosting pro- vider if it can establish a password-protected portion of your site. If that's not possible, you might need to hire a CGI programmer to create a password-protection script. There are also some password scripts available on the web. (See Chapter 12, "Need Feedback? Create a Form!" for some resources.) · If your needs aren't so grandiose, then you can set up a reasonably strong password system using just a few dollops of JavaScript. Hold on just a sec, mister! JavaScript stuff sits right inside the page. Won't someone be able to see the password if he looks at the page source code? That's very perceptive of you. However, in the system that I show you, the password never appears in the JavaScript code! Why? Because the password is just the name of the protected page (minus the .htm or .html extension). Because it's just as hard to guess the name of a web page as it is to guess a password, you get basically the same level of protection. Page Pitfalls For this password scheme to work, it's absolutely crucial to have a default page in the same directory as the password-protected page. Why? Well, recall that a default page is the one the server sends out if the user doesn't specify a page. For example, suppose the user enters the following address: finances. Most servers use index.html as the default page, so the above is equivalent to the following address: If you don't include the default page in the directory, most web serv- ers simply return a list of all the files in the directory! This would obviously defeat our password protection scheme. The system I'm going to show you requires three parts: · A page that has a link to the password-protected part of your site. I use a page titled jspwtest.htm (it's on the CD in this book) for this example. · A page that asks the user for the proper password (this is jspass.htm on the CD). · The password-protected page (this is idiot.htm on the CD). When you name this file, you must use lowercase letters only. The next couple of sections show you how to set everything up. Creating a Link to the Password-Protected Part of Your Site You can send people to the password-protected page by including a link in one or more pages on your site. Other than the password-protected page itself, this is the only thing you need to create yourself. Here's the <A> tag to use: <A HREF="javascript:GetPassword()"> As you can see, this link calls a JavaScript function named GetPassword(). Here's the code for that function (place this in the header section of the page that includes the link):