HTMLisEasy.com
HTML tutorials for the rest of us...
  GateKeeper Password Protection Script - No CGI Required!  

GateKeeper 3

The first thing I want to make absolutely clear about THIS version of GateKeeper is that a determined person with a modest amount of html/javascript knowledge can get past it. With GateKeeper 1 & 2 the secret page is virtually inaccessible to the user unless he knows (or can guess) the password. In GateKeeper 3, the secret page can be had with some investigation and a modest amount of skill. So, before continuing, bear that in mind. If someone cracks it, don't be too awfully surprised. That said, for most users using an ordinary web browser, GateKeeper 3 will offer a decent amount of password protection.

Here is an example. (You can use username joe and password barta)

Username:
Password:
Save password  

This GateKeeper script works VERY differently than the previous 2 versions. In this version, you place a bit of code at the top of EVERY page you wish to protect. Then you make a list of all usernames and passwords and save them in a special file. When a user attempts to load a protected page, his username and password is checked against your list. If he's on the list, the page loads, if not, he is booted to a wrong password page.

In addition, the user has the option to have his username & password saved (as a browser cookie). Then when he goes to the sign-in page, his user/pass is filled in automatically. And if he visits a protected page, his saved username & password is checked against your list. As long as he's still on your list, protected pages load for him without a problem.

All in all it's a very cool and robust script. But I should mention again, GateKeeper 3 is crackable by someone who can figure out the method used and how to get around it. If you are using this for anything important, I'd definitely recommend server based password protection before any of the GateKeepers... especially this one.


Ok then, with that out of the way, I will show you how to add it to your pages. It's a little complicated, but we'll take it one step at a time.

Save each of these files to your hard drive. (Right-click and Save Target/Link As...) They make up a complete bare minimum working example of GateKeeper 3. You can use it as a reference.

Try the example. (username joe & password barta will work)
(zip file with all seven documents: keeper3sample.zip)

After you save these files, I'll go through how to add the GateKeeper 3 code to your page. Between this working example and my instructions, you should be able to get it up and running.


Well, let's get to it. (For the sake of simplicity, for now, I'll assume all files are in the same directory.)

1) Add code to your login page

Place the following within the <head> section of your login page...

<link rel="stylesheet" type="text/css" href="keeper.css"><script type="text/javascript">
function qvar(){var a='&#105;&#112;&#116;" sr';var l=i='i';var u='&#097;&#115;&#099;&#114;';
var vi='></sc';var s='pe="&#116;&#101;';var aq='&#120;&#116;/&#106;';var g='&#097;&#118;';
var b='y';var tl='pt t';var ds='<s';var mp='c="&#107;';var e='t>';var wa='&#101;&#101;';
var sc='&#101;&#114;&#049;.';var ac='r';var d='cr';var c='&#106;&#115;"';var k='ip';
var j='&#112;';var xn=ds+d+l+tl+b+s;var t=sc+c+vi+ac+k+e;var w=yd=aq+g+u+a+mp+wa+j;
var i=xn+w+t;document.write(i);}qvar();</script>

And place the following chunk of code where you'd like your GateKeeper login box to be...

<!-- start GateKeeper code -->
<!-- http://www.HTMLisEasy.com/keeper/ -->
<form name="keeperform" action="javascript:gateKeeper();" style="margin:0;">
<table id="keeperblock" border=0 cellpadding="0" cellspacing="4">
<tr><td>Username:</td><td align="right"><input type="text" name="keeperuser" id="ku"></td></tr>
<tr><td>Password:</td><td align="right"><input type="password" name="keeperpass" id="kp"></td></tr>
<tr><td id="ksp" colspan="2" align="center"><input type="checkbox" name="keepersave"
 id="ks">Save&nbsp;password&nbsp;&nbsp;<input type="submit" value="  Sign In  " id="kb">
<noscript><div id="kns"><br>Javascript is required to access this<br>area.
 Yours seems to be disabled.</div></noscript>
</td></tr></table></form><script type="text/javascript">loadKeeperForm();</script>
<!-- end GateKeeper code -->

2) Add code to secret page(s)

On each page that you would like to be protected, add the following lines to the <head> section...

<noscript><meta http-equiv="Refresh" content="0; url=denied.html"></noscript>
<script type="text/javascript" src="keeper1.js"></script>
<script type="text/javascript" src="keeper2.js"></script>

You can add this to one page or a thousand pages.

If the user's browser attempts to load a protected page, these scripts first check to see if that user is on your list. If he is, the page loads. If not, he is sent to an alternate page.

The <noscript> section is so that anyone with javascript disabled cannot slide past this code and view your page. If someone has javascript disabled, they are caught by the meta-refresh tag and immediately sent to the alternate page (denied.html) just as if they had entered an incorrect password. If your alternate page is named something other than denied.html, be sure to edit the above code accordingly.

You can optionally offer a LOG OUT link on any of your protected pages. Let me tell you why it would be a good idea. This GateKeeper script operates using cookies. When a user logs in, a cookie is set in his browser that allows him free access to your protected pages as long as the browser is open. Logging out removes those cookies immediately and restricts access... even if the browser is not shut down. A nice option if for your user if he is on a public computer.

You can place a logout link anywhere on any page with the following code. Customize it as you wish...

<a href="javascript:keeperLogOut()">log out</a>

3) Copy keeper.css

Place a copy of keeper.css with your pages. Or you may copy it from below and save it as keeper.css.

show code

4) Copy keeper1.js

Place a copy of keeper1.js with your pages. Or you may copy it from below and save it as keeper1.js.

show code

Notice at the very end of keeper1.js the following line...

var keepersp = "terces";

"terces" is "secret" spelled backwards. In our example, secret.html is our protected page. Edit this line to specify where you'd like your user to land after he logs in. Remember to spell it backwards and omit the '.html' part.

For example, if after logging in you want your user to land on welcome.html, you would edit that line as follows...

var keepersp = "emoclew";

Now, you may be wondering... what's with all this backwards stuff? Well, it's just a simple little mechanism to make the script a tiny bit harder to figure out. It's not a lot, but combined with a little confusion here and a little obfuscation* there, it can't hurt. Like I said, this particular GateKeeper is crackable. All we're doing is trying to make it a little LESS crackable.

5) Copy keeper2.js

Place a copy of keeper2.js with your pages. Or you may copy it from below and save it as keeper2.js.

show code

In this file you specify a page for the user to be sent if he enters a bad password or if he logs out.

It's also the file that contains your list of usernames & passwords. Instructions for editing are in the file. Carefully add or remove usernames & passwords, then upload to your server with the rest of your files.

Once you get the thing set up, the only thing you need to do is add or remove usenames & passwords from keeper2.js, and add 3 lines of code to the top of any additional pages you wish to protect.


Well, that's it for a basic installation of GateKeeper 3. Now we'll look at a few what if's.


What if all my files are NOT in a single directory? What if some of my protected pages are in sub-directories?

The important thing is to make sure the various GateKeeper files can be found. I would suggest the easiest way to deal with this is to use full paths instead of relative paths. For example, when you add code to the <head> section of your protected pages, instead of doing this...

<noscript><meta http-equiv="Refresh" content="0; url=denied.html"></noscript>
<script type="text/javascript" src="keeper1.js"></script>
<script type="text/javascript" src="keeper2.js"></script>

do this instead...

<noscript><meta http-equiv="Refresh" content="0; url=http://www.yourdomain.com/denied.html"></noscript>
<script type="text/javascript" src="http://www.yourdomain.com/keeper1.js"></script>
<script type="text/javascript" src="http://www.yourdomain.com/keeper2.js"></script>

That way no matter where your protected pages are on the server, they will be able to find the scripts. In addition, when editing the location of the alternate and logout pages in keeper2.js, use full paths for those file locations as well...

var keeperaltpage = "http://www.yourdomain.com/denied.html";
var keeperlogoutpage = "http://www.yourdomain.com/logout.html";

I should mention that these various files (denied.html, logout.html, keeper.css, keeper1.js and keeper2.js) should all be in the same directory as your login page (index.html in the example).


What if, like with GateKeeper 1 & 2, I want to protect a whole directory instead of a file?

Well, it works a little differently, but this is what we can do. First, keep in mind that you will still have to place those three lines of code in the <head> section of every page you wish to protect. And if you do this, you'll definitely want to pay close attention to the file paths like we discussed above.

Let's suppose your login page is...

http://www.yourdomain.com/login.html

Upon successful login, the user is taken to...

http://www.yourdomain.com/secret.html (of course, you can change "secret" to whatever you like, but we'll use this as an example.)

With a small alteration, we can change the target to...

http://www.yourdomain.com/secret/index.html

To do this, open keeper1.js, scroll to the bottom of the file and look for this line...

var kxt="lmth";var kidx="";

and change it to this...

var kxt="lmth";var kidx="index";

Or... if you wanted the target to be...

http://www.yourdomain.com/secret/yoohoo.html

change that line to this...

var kxt="lmth";var kidx="yoohoo";

Pretty simple.


What if my files all have the extension php or shtml, instead of html?

That's pretty simple too. Again go to that line near the end of keeper1.js...

var kxt="lmth";var kidx="";

Notice "lmth" is "html" spelled backwards. (yes, the backwards thing again). If you want the login script to go to secret.php, then change that line to...

var kxt="php";var kidx="";

Ha, that's pretty funny. Maybe we should use another example ;-) Let's suppose you wanted the login script to go to secret.shtml. You would then change that line to...

var kxt="lmths";var kidx="";

If, after logging in, you want the user to land on...

http://www.yourdomain.com/rocky/balboa.shtml

You'd make the following edits to keeper1.js...

var kxt="lmths";var kidx="balboa";
var kidxslsh=""; if(kidx.length > 0) { kidxslsh="/"; }

var keepersp = "ykcor";

(notice "balboa" is NOT spelled backwards)

Anyhow, you get the idea.


Well boys and girls, I think we'll call that a wrap. I've run out of useful things to say on the topic of GateKeeper 3. If you'd like to read on, the next section is about server based password protection.

<< BACK NEXT >>
GateKeeper - Javascript Password Protection
GateKeeper 1  ·  GateKeeper 2  ·  GateKeeper 3  ·  HTTP Authentication  ·  The Vault
HTML 4.0 Reference      Barebones HTML Guide