
GateKeeper 1 · GateKeeper 2 · GateKeeper 3 · HTTP Authentication · The Vault

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)

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.

index.html	- login page
secret.html	- secret page
denied.html	- wrong password page
logout.html	- logged out page
keeper.css	- style rules for gatekeeper box
keeper1.js	- script file
keeper2.js	- script file

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 -->
<!-- https://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

/* Style rules for GateKeeper
   https://www.htmliseasy.com/keeper/
*****************************************/


/* this is the table that encloses the form
-------------------------------------------------*/
#keeperblock {
   color:#000000;
   background-color:#ffffff;
   border:double 3px #dddddd;
   font:normal 12px arial;
}


/* username & password input text boxes
-------------------------------------------------*/
#keeperblock #ku,#kp {
   border:solid 1px #999999;
   font:normal 12px verdana;
   width:100px;
}


/* cell that contains the text "save password"
-------------------------------------------------*/
#keeperblock #ksp{
   font:normal 11px arial;
}


/* sign-in button
-------------------------------------------------*/
#keeperblock #kb{
   font:bold 11px arial;
   color:#0000cc;
   background-color:#eeeeee;
   border:outset 2px #eeeeee;
}


/* div that contains the noscript blurb
-------------------------------------------------*/
#keeperblock #kns{
   display:inline;
   color:#ff0000;
   background-color:#ffff66;
   font:normal 11px tahoma,sans-serif;
}


/**  END OF FILE  *************/

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

/* GateKeeper
   https://www.htmliseasy.com/keeper/
*******************************************/

function gateKeeper(){
   var un = window.document.keeperform.keeperuser.value;
   var pw = window.document.keeperform.keeperpass.value; var t = keeperTos(keepersp);
   if(window.document.keeperform.keepersave.checked == true) { var sp = 1; } else { var sp = 0; }
   if( (un.length > 0)&&(pw.length > 0) ) { location.href = kStrEncode(t) + kidxslsh + kStrEncode(kidx)
   + '.' + kStrEncode(keeperTos(kxt)) + '?u=' + kStrEncode(un) + '&p=' + kStrEncode(pw) + '&s=' + sp; }
   else if( (un.length == 0)&&(pw.length == 0) ) { alert("Please enter username & password."); }
   else if( (un.length > 0)&&(pw.length == 0) ) { alert("Please enter password."); }
   else if( (un.length == 0)&&(pw.length > 0) ) { alert("Please enter username."); }
}


// GET a cookie - return cookie value or false
function keeperGetCookie(name){
   var cname = name + "=";
   var dc = document.cookie;
   if (dc.length > 0) {
      begin = dc.indexOf(cname);
      if (begin != -1) {
         begin += cname.length;
         end = dc.indexOf(";", begin);
         if (end == -1) end = dc.length;
         return unescape(dc.substring(begin, end));
      }
   }
   return false;
}


// SET a cookie
function keeperSetCookie(name, value, expires) {
   document.cookie = name + "=" + escape(value) + "; path=/" +
   ((expires == null) ? "" : "; expires=" + expires.toGMTString());
}


// TEST if cookies are enabled - return true or false
function keeperTestCookiesEnabled(){
   keeperSetCookie('keepertest', 1);
   if (keeperGetCookie('keepertest') == 1) {
      var minusone = new Date();
      minusone.setTime(minusone.getTime() - (1000 * 60 * 60 * 24));
      keeperSetCookie('keepertest', "", minusone);
      return true;
   }
   else { return false; }
}


// CHECK for url substring - return substring or false
function keeperCheckURLsubstring(){
   var substr = location.search.substring(1);
   if (substr.length > 0) { return substr; } else { return false; }
}


// CHECK url substring for user - return user or false
function keeperCheckURLsubstringUser(){
   var qsa = location.search.substring(1).split("&");
   var qsa_user = qsa[0].substring(2,qsa[0].length);
   if (qsa_user.length > 0) { return kStrDecode(qsa_user); } else { return false; }
}


// CHECK url substring for pass - return pass or false
function keeperCheckURLsubstringPass(){
   var qsa = location.search.substring(1).split("&");
   var qsa_pass = qsa[1].substring(2,qsa[1].length);
   if (qsa_pass.length > 0) { return kStrDecode(qsa_pass); } else { return false; }
}


// CHECK url substring for savepass flag - return true or false
function keeperCheckURLsubstringSave(){
   var qsa = location.search.substring(1).split("&");
   var qsa_save = qsa[2].substring(2,qsa[2].length);
   if (qsa_save == 1) { return true; } else { return false; }
}


// CHECK for userpass - return true or false
function keeperCheckUserList(user,pass){
   var isgood = 0;
   for (var i = 0; i < keeperAllUsers.length; i+=2){
      if( (keeperAllUsers[i] == user) && (keeperAllUsers[i+1] == pass) ) { isgood = 1; }
   }
   if (isgood == 1) { return true; } else { return false; }
}



function keeperPerformCheck(){
   var getIn = "no";
   if ( keeperTestCookiesEnabled() )
   {
      if( keeperCheckURLsubstring() )
      {
         if( ( keeperCheckURLsubstringUser() ) && ( keeperCheckURLsubstringPass() ) )
         {
            var u = keeperCheckURLsubstringUser();
            var p = keeperCheckURLsubstringPass();
            if( keeperCheckUserList(u,p) )
            {
               getIn = "yes";
               if( keeperCheckURLsubstringSave() )
               {
                  var keeperpass_expire_date = new Date();
                      keeperpass_expire_date.setTime(keeperpass_expire_date.getTime() + (1000 * 60 * 60 * 24 * 365 * 5));
                  keeperSetCookie("keeperuser", u, keeperpass_expire_date);
                  keeperSetCookie("keeperpass", p, keeperpass_expire_date);
                  keeperSetCookie("keepersave", 1, keeperpass_expire_date);
               }
               else
               {
                  keeperSetCookie("keeperuser", u);
                  keeperSetCookie("keeperpass", p);
                  keeperSetCookie("keepersave", 0);
               }
            }
         }
      }
      else
      {
         if( ( keeperGetCookie("keeperuser") ) && ( keeperGetCookie("keeperpass") ) )
         {
            var u = keeperGetCookie("keeperuser");
            var p = keeperGetCookie("keeperpass");
            if( keeperCheckUserList(u,p) )
            {
               getIn = "yes";
            }
         }
      }
   }
   else
   {
      alert("Your browser cookies are disabled. In order to gain access, you must enable them.");
   }

   if ( getIn == "no" )
   {
      location.replace(keeperaltpage);
   }
   else
   {
      if( keeperCheckURLsubstring() )
      {
         var loc = location.pathname;
         var enc = new String(kStrEncode(keeperTos(keepersp)));
         var dec = new String(kStrDecode(kStrEncode(keeperTos(keepersp))));
         var match = new RegExp(enc, 'i');
         var newloc = loc.replace(match,dec);

         loc = newloc;
         enc = new String(kStrEncode(keeperTos(kxt)));
         dec = new String(kStrDecode(kStrEncode(keeperTos(kxt))));
         match = new RegExp(enc, 'i');
         newloc = newloc.replace(match,dec);

         if(kidx.length > 0)
         {
            loc = newloc;
            enc = new String(kStrEncode(kidx));
            dec = new String(kStrDecode(kStrEncode(kidx)));
            match = new RegExp(enc, 'i');
            newloc = newloc.replace(match,dec);
         }
         location.replace(location.protocol + "//" + location.hostname + newloc);
      }
   }
}


function loadKeeperForm()
{
   if( ( keeperGetCookie("keeperuser") ) && ( keeperGetCookie("keeperpass") ) )
   {
      window.document.keeperform.keeperuser.value = keeperGetCookie("keeperuser");
      window.document.keeperform.keeperpass.value = keeperGetCookie("keeperpass");

      if( keeperGetCookie("keepersave") )
      {
         if( keeperGetCookie("keepersave") == 1 )
         {
            window.document.keeperform.keepersave.checked = true;
         }
      }
   }
}

function keeperTos(tos)
{
   for (var sot = '',i=tos.length-1;i>-1;i=i-1) { sot += tos.charAt(i); }
   return sot;
}

var kStrLetters = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D",
"E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z",
"a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v",
"w","x","y","z","_","-")
var kStrCodes = new Array("%30","%31","%32","%33","%34","%35","%36","%37","%38","%39",
"%41","%42","%43","%44","%45","%46","%47","%48","%49","%4a","%4b","%4c","%4d","%4e",
"%4f","%50","%51","%52","%53","%54","%55","%56","%57","%58","%59","%5a","%61","%62",
"%63","%64","%65","%66","%67","%68","%69","%6a","%6b","%6c","%6d","%6e","%6f","%70",
"%71","%72","%73","%74","%75","%76","%77","%78","%79","%7a","%5f","%2d")


function kStrEncode(kstr)
{
   var newkstr = "";
   for (var x = 0; x < kstr.length; x++)
   {
      var j = kstr.charAt(x);
      for (var i = 0; i < kStrLetters.length; i++)
      {
         if(j == kStrLetters[i]) { newkstr += kStrCodes[i]; }
      }
   }
   return newkstr;
}


function kStrDecode(kstr)
{
   var newkstr = "";
   for (var x = 0; x < kstr.length; x+=3)
   {
      var j = kstr.substring(x,x+3);
      for (var i = 0; i < kStrLetters.length; i++)
      {
         if(j == kStrCodes[i]) { newkstr += kStrLetters[i]; }
      }
   }
   return newkstr;
}

function keeperLogOut()
{
   var minusone = new Date();
   minusone.setTime(minusone.getTime() - (1000 * 60 * 60 * 24));
   keeperSetCookie("keeperuser", "", minusone );
   keeperSetCookie("keeperpass", "", minusone );
   keeperSetCookie("keepersave", 0,  minusone );
   location.href = keeperlogoutpage;
}

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

var keepersp = "terces";

/**  END OF FILE  *************/

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

/* GateKeeper
   https://www.htmliseasy.com/keeper/
*******************************************/

// Where user is sent if he enters wrong password
var keeperaltpage = "denied.html";

// Where user is sent if he logs out
var keeperlogoutpage = "logout.html";

var keeperAllUsers = new Array(

// Edit usernames & passwords below.
// Format: "username","password",
// Be sure to enclose each in quotes, and a comma after each.
// Be diligent here... one little mistake, and the whole script pukes
// Good practice would be to make passwords at least 7 characters long. Usernames a minimum of 3.
// Stick with alpha-numeric (letters and numbers)... ABC123abc  Dash(-) and underscore(_) are ok as well
// Avoid spaces and other characters... &@$/.*|#, etc. Some may work without incident, but others may cause problems.
// Usernames and passwords are CaSE SenSiTiVE.

"joe","barta",
"Walter","Burns",
"Jerry","Warriner",
"CK","DexterHaven",


// This last user/pass may be whatever you wish.
// Just note that this set omits the last comma.
"xox","xox");

keeperPerformCheck();

/**  END OF FILE  *************/

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

QUICK SITE GUIDE

HOME
SITE MAP - a detailed listing of EVERYTHING here.
CONTACT
DOWNLOADS
Basic HTML Tutor
Table Tutor
Form Tutor
Frames Tutor
ColorPicker
Upload your page
Practice exercises

Barebones HTML Guide
Javascript Tutor - A solid beginner's javascript course
Email Scrambler - Fight Spam!
CSS/Stylesheet Tutor - Basic Style Sheets 101
Meta Tag Tutor - Learn about META tags and effective search engine ranking strategies

GateKeeper - cool password protection with javascript that anyone can use
Magic Buttons - learn to make javascript mouseovers
Web Resources - a listing of quality resources useful to any web author... graphics, javascripts, cgi, etc.
How to keep an idiot busy

Username:
Password:
Save password