Gate Keeper by Professional Web Design

by Joe Barta
PROFESSIONAL WEB DESIGN

Welcome to the "new and improved" Gate Keeper! The script is a lot shorter, a lot simpler, and easily workable between frames. (The old Gate Keeper tutorial is here for anyone who needs it.)
The Gate Keeper 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 any CGI scripting. Access is via password like so...
Click here for some real cool stuff!!
Unless you know the password, you can't access the document. Actually the password is the name of the document. If you make your password red_rose, then just name the target document red_rose.html. Easy!
Once more because I have gotten a surprising number of letters asking how to change the password... The password is the name of the document. If you make your password red_rose, then just name the target document red_rose.html
By the way, the password for the previous example is serpico. Now that you see what it does, I'll show you how to easily add it to your pages. But, before I do, let me make something absolutely clear... this is a very low level security device. If you are a NSA employee, do not use this for hiding national secrets. If you are the President of MasterCard, do not put everyone's credit card numbers behind this thing. However, if you're a regular guy that has a page or two that you don't want every Tom, Dick and BlowHard visiting, then this should safely do the trick.

Here is how to add it to your pages:
What I'll do is have you build a small set of pages from scratch. You can then incorporate the appropriate elements into your pages.

(Note: Since this uses documents with the file extension .html, users of Windows3.x might have a little trouble. You might have to make a few alterations to the script.)

There are 2 documents that we must concern ourselves with...
   1. The starting page. (the one with the link)
   3. The target document.
First we'll make the starting page. Copy the following and save it in a new folder somewhere as index.html
<HTML> <HEAD> <TITLE>My Page</TITLE> </HEAD>
<BODY BGCOLOR="#FFFFFF"> </BODY>
</HTML>
Then add the following to the HEAD tag...
<HTML> <HEAD> <TITLE>My Page</TITLE>
<SCRIPT language="JavaScript">  </SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF"> </BODY>
</HTML>
The credit...
/************************************************ Gate Keeper v2.0 by Joe Barta Get your very own Gatekeeper from Professional Web Design http://junior.apk.net/~jbarta/weblinks/gate_keeper/ ************************************************/ ...can be removed if necessary. It doesn't affect the script.

Now add the link:
<HTML> <HEAD> <TITLE>My Page</TITLE>
<SCRIPT language="JavaScript">  </SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF"> <A HREF="javascript:gateKeeper()">Click here</A> for some cool stuff! </BODY>
</HTML>
That's it for the starting page. Now we'll make the target document.

Copy and save this as redrum.html.
<HTML> <HEAD> <TITLE>Da Target</TITLE> </HEAD>
<BODY BGCOLOR="#FFFFFF"> <H2 ALIGN=center>This is it!</H2> </BODY>
</HTML>
Now load index.html in your browser. Remember, the password is the name of the document so the password here will be redrum.
TRY IT
I've included these 2 docs in a self-contained zipfile if you need it.
Let me take this time to explain something that is very important to the success of the Gate Keeper. Wherever you have the target document(s) (redrum.html, serpico.html, etc.) you must also have a file named index.html. If not, all the documents in that directory can easily be listed and accessed. If need be, index.html can just be a blank HTML document...
<HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> </BODY> </HTML>
Once again, very important... Wherever you have the target document(s) you must also have a file named index.html.

Well, that's it for the basic Gate Keeper. You can stop here, or read on to learn a few minor modifications or how to use it with frames.
Let's suppose that for whatever reason, you wanted to have the target doc in another directory (such as targets/). In other words, instead of looking for redrum.html you want it to look for targets/redrum.html (but you dont want your visitor to have to type in targets/).
Just edit the following line in the script from this...
   var location=password + ".html";
To this...
   var location="targets/" + password + ".html";
TRY IT (password is redrum)

When the Gate Keeper prompt box appears, it says Password required:. You can change this by editing the following line in the script...
   var password = prompt("Password required:", "")
TRY IT (password is redrum)

You can make Gate Keeper work within frames like so.
Just edit the following line in the script from this...
   this.location.href = location;
to this...
   parent.frame_right.location.href = location;
Where frame_right is the NAME of the target frame. The scripting goes on the page with the link. If you need to brush up on frames, wander on over to Frames Tutor for a refresher.

...That's all folks! Have fun!

One more little thing... I've been told by a few that the Gate Keeper is easy to crack. But... when asked to put their money where their mouth is, they fizzled. If you fancy yourself a bit of a hacker, then feel free to take the test yourself.

PROFESSIONAL WEB DESIGN