Part 1 | Part 2 | Part 3 | Part 4 (GateKeeper-II) | Version 2.2 Installation Overview | HTTP Authentication | The Vault

Welcome to to version 3.2 of the GateKeeper script!

The GateKeeper is a little bit of JavaScript code that you can use to restrict access to some or all of your web pages without the need for CGI scripting or server based authentication methods. Access is via password like so...

Here is what's improved since version 2...

• Password box to hide the input. [*********]
• Notifies if password has been denied or approved. (No more "File not found" messages)
• Optional redirect to another page if password is denied.
• Message for those with javascript disabled.
• Editable status bar message when mouse is over the link.
• Ability to save passwords.
• A second version (GateKeeper-II) that accepts a username and a password.
• Has a user help file.
• Several points of configurability.
• Much more potential for customization.

While this GateKeeper has many improvements over the previous version, it's a little more complicated to set up. In this tutorial I'll explain how to do both. If you want to skip right to that easier version, it's right here.

(Changes since v3.1... Placed the ultimate target doc in a directory. This increases security in a couple of ways. Fixed IE5 bug (I hope). Changes that hopefully prevent some free hosts from inserting their code in the middle of GateKeeper code.)

(Changes since v3.0... Minor changes to increase speed & efficiency. Removed NoteTab Clip. Added link to HTTP authorization example & tutorial.)

How does the GateKeeper work?

In a nutshell, you enter a password such as frumpy. The script then adds .html to your password and looks for frumpy.html. When frumpy.html loads, it in turn loads the secret document - simple, ain't it?

Is it easy to set up?

Fairly. I'll talk you through it step by step. Shouldn't be any problem.

Is it secure?

Fairly. It's a lot more secure than many javascript password schemes but a little less secure than traditional server side password protection. All in all, it's reasonably secure for casual use. You are welcome to try your hand at cracking the GateKeeper in The Vault.

(More about traditional server side password protection here)

What if someone looks at the source of my page. Can they get the password that way?

No. The password is nowhere in the document. It is entered by the user.

It uses javascript, so what happens if someone comes along with javascript disabled?

In short, they're SOL (Outta Luck). They will however, see a message like the one below. What they do from there depends on how bad they want your stuff.

Will people with javascript disabled be able to slide past the GateKeeper and get to the secret document?

No.

Will search engines be able to find the secret documents?

Search engines follow links. Unless you have links to your secret pages the answer is no. If one of your members is a weenie and submits your secret page to a search engine then it will be indexed, but... it is a simple matter to occasionally do an ordinary Search & Replace across a few documents and the weenie boy's efforts are thwarted.

Does the GateKeeper work with all browsers?

All? I haven't checked it with all browsers. Would you settle for all the major ones that most people use?

Does this work with WebTV?

I have no idea.

Does this work with [insert user-agent here]?

I don't know. It's been tested with Netscape 3, Netscape 4.5, IE3 and IE4 on Windows95 and worked quite well. (IE3 showed a glitch though. Then again, IE3 showed a lot of glitches where javascript was concerned.)

Will it work on my free web page at [Tripod, XOOM, Geocities, etc.]?

Yes. I checked the script on each of those and it works fine. I suspect that it would probably work fine on most other hosts as well.

All right. Show me how to do it.

Here we go...

I don't want to get bogged down with details of the script's operation, but I do feel the need to at least run through it quickly so, bear with me. If you don't follow me... don't worry about it.

The GateKeeper window is made up of four frames. The top frame contains a form. A password is entered (frumpy) and the script attempts to load frumpy.html into the fourth and invisible frame. The script allows 10 seconds to load frumpy.html. In frumpy.html there is an onLoad script. As soon as frumpy.html loads, the password is approved and the secret page is loaded in the main browser and the GateKeeper closes. (The url of the secret page is specified in frumpy.html) If 10 seconds pass and frumpy.html still has not loaded, the user gets an Password Denied message and the script stops. That 10 second delay can be permantly increased by the user if necessary, and the password can be saved using cookies.

You need a total of 8 documents to make a complete working example like this (password is frumpy). Download sample1.zip and save the contents to a folder somewhere. (Note sample1.zip is part of the GateKeeper tutorial package. If you downloaded this tutorial and are viewing it offline, you can still "download" sample1.zip. You'll just be copying it from one place to another on your computer.)

This is what you should have. (You don't necessarily need to pay close attention to the descriptions. You don't have to completely understand what's going on in order to install the GateKeeper on your page. Although, all things being equal, it's better to understand than not understand.)

These are your pages...
1. index.html - The page with the link. The script on this page creates the little GateKeeper window.
2. sluggo/hideout.html - The ultimate target page in sub-directory sluggo.
3. sluggo/index.html - Just to prevent a directory listing of sluggo.
4. alternate.html - An optional page where users get sent if they enter an invalid password.
    
   And these are gatekeeper pages...
5. frumpy.html - The intermediate password page. The password is the name of this document (frumpy). As soon as frumpy.html loads, it in turn loads the ultimate target page.
6. gatemain.html - The frameset doc for the gatekeeper window. The GateKeeper window is actually made up of four frames. Three are visible and one is (usually) invisible.
7. gateblank.html - This gets loaded into each of the four frames at first. They are subsequently overwritten by javascript commands.
8. gatehelp.html - The user help file. This is where they can save passwords among other things.

Those eight documents are your skeleton password structure.

Yeah but how do I put it on my page?

You gotta start somewhere right? Gotta walk before you run right? Well, this is how we're starting. Get this stripped down version uploaded onto your web site somewhere and get it operational. After we get to that point, we'll learn how to modify it and how to insert it into any web page. The link is on index.html, the password should be frumpy and it should take you to the secret page (hideout.html).

Again, this is what you should have.

Get this working then move on to part 2.

Part 2...