PageTutor.com

     
  The GateKeeper v2.2  
Part 1 | Part 2 | Part 3 | Version 2.3 | HTTP Authentication | The Vault
MEMBER'S AREA FREE AREA

Welcome to GateKeeper v2.3! This tutorial will explain how to place a simple Javascript protection script on your page. It's very easy to install. A few simple bits of code and you're off.

If you are a member of PageTutor.com, you are welcome to go to the latest version of GateKeeper for a much nicer and more powerful script. The full GateKeeper tutorial is also available for download from the member's area. Go through the material offline and at your leisure. If you are not yet a member, I encourage you to join.

Here is an example of the free version...

Click here to get to my secret page!!

Unless you know the password, you can't access the document. (The password, by the way is redrum)

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 emails asking how to change the password... The password is the name of the document. If you make your password bedazzled, then just name the target document bedazzled.html

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. (If you're interested in server based http authentication you may want to look here.)


Here is how to add the GateKeeper 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.

There are only 2 documents that we must concern ourselves with...

  1. The starting page. (the one with the link)
  2. 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>
</BODY>
</HTML>

Then add the following to the HEAD tag...

<HTML>
<HEAD>
<TITLE>My Page</TITLE>

<SCRIPT language="JavaScript"><!--
/*********************************************************
             GateKeeper v2.3 - by Joe Barta
            http://www.pagetutor.com/keeper/
     Permission is granted to freely use this script.
**********************************************************/

function GateKeeper() {
   var password = prompt("Password required:", "");
   if (password) { this.location.href = password + ".html"; }}

//--></SCRIPT>

</HEAD>
<BODY>
</BODY>
</HTML>

Now add the link:

<HTML>
<HTML>
<HEAD>
<TITLE>My Page</TITLE>

<SCRIPT language="JavaScript"><!--
/*********************************************************
             GateKeeper v2.3 - by Joe Barta
            http://www.pagetutor.com/keeper/
     Permission is granted to freely use this script.
**********************************************************/

function GateKeeper() {
   var password = prompt("Password required:", "");
   if (password) { this.location.href = password + ".html"; }}

//--></SCRIPT>

</HEAD>
<BODY>

<A HREF="javascript:{;}" onClick="GateKeeper(); return false">Click here</A> for my secret page!  

</BODY>
</HTML>

Then add a bit for those with Javascript disabled:

<HTML>
<HTML>
<HEAD>
<TITLE>My Page</TITLE>

<SCRIPT language="JavaScript"><!--
/*********************************************************
             GateKeeper v2.3 - by Joe Barta
            http://www.pagetutor.com/keeper/
     Permission is granted to freely use this script.
**********************************************************/

function GateKeeper() {
   var password = prompt("Password required:", "");
   if (password) { this.location.href = password + ".html"; }}

//--></SCRIPT>

</HEAD>
<BODY>

<A HREF="javascript:{;}" onClick="GateKeeper(); return false">Click here</A> for my secret page!  
<NOSCRIPT><FONT COLOR="#FF0000"><BR>Javascript is required to access this area. Yours seems to be disabled.</FONT></NOSCRIPT>  

</BODY>
</HTML>

That's it for the starting page. Next we'll make the target document.

Copy the following and save it as whatever you want the password to be. If you want our password to be wiggleworm then save it as wiggleworm.html. I think I want my password to be peehead so I'll save it as peehead.html.

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<H1 ALIGN="center">My secret page!</H1>
</BODY>
</HTML>

Now load index.html in your browser. Remember, the password is the name of the document so the password here will be peehead.

TRY IT

I've included these 2 docs by themselves in a self-contained zip file if you need it.

Let me take this time to explain something that is very important to the success of the Gate Keeper. On most servers, in order to prevent a listing of the directory's contents, you must have in that directory a document named index.html. This is the default document.

Let me explain further. If you want to access a particular document on a server you would type in (or link to) something like this...

http://yada.yada.com/mystuff/mypage.html

You would get mypage.html.

Let's suppose instead you chopped off the filename and just typed in the address of the directory...

http://yada.yada.com/mystuff/

On most servers, you would get a listing of every single file in that directory... unless there was a default document in that directory. Normally you want to name your default document index.html. (On a few servers the default document may need to be named default.htm or index.htm or even something else.)

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 don't want your visitor to have to type in targets/).

Just edit the following line in the script from this...

   if (password) { this.location.href = password + ".html"; }}

To this...

   if (password) { this.location.href = "targets/" + password + ".html"; }}

TRY IT (password is redrum) Also notice in this example there is a blank html doc named index.html in the targets directory.


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 again is redrum)


You can make Gate Keeper work within frames like so. (password is redrum)

Just edit the following line in the script from this...

   if (password) { this.location.href = password + ".html"; }}

To this...

   if (password) { top.rightframe.location.href = password + ".html"; }}

Here is a zip file containing the documents for the above example.

Where rightframe 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.


You can specify default text in the prompt box if you wish..

Click here for my secret page!

Just edit the following line in the script from this...

   var password = prompt("Password required:", "");

To this...

   var password = prompt("Password required:", "Enter your secret code here");

You could string together 2 prompt boxes for a mock username & password verification.

Here is an example. (username is slip, password is mahoney)

Here is the altered code for the above example...

[snip]...

function gateKeeper() {
   var username = prompt("Enter your username:", "");
   var password = prompt("Enter your password:", "");
   this.location.href = username + "/" + password + ".html";
}

...[snip]

Now, I can hear a question bubbling up. The answer is.. no, you can't get them to appear on the same prompt box. It has to be one, then another.

And that's it for version 2 of the GateKeeper. Have fun with it!

Is there any more?

Sure is. There's a much nicer and more powerful version of GateKeeper available in the members area...

Here are some of the improvements:

You'll also get access to yet another version that:

If you are not a member yet but would like to become one, then click here.