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

GateKeeper 2

GateKeeper 2 works the exact same way as GateKeeper 1, except you can configure a "wrong password" page. Here's an example...


(password is frumpy)

Try entering a bad password. You'll get a special Access Denied page instead of a "File Not Found" message.

Setting up this version is a little more complicated than the last. So, first I'll have you put together a set of sample pages. Then I'll tell you how it works. From there you can add GateKeeper 2 to YOUR page.

Start with an empty HTML document...

<html>
<head>
<title></title>
</head>
<body>



</body>
</html>

Next add this chunk of GateKeeper code...

<html>
<head>
<title></title>
</head>
<body>

<!-- start GateKeeper code -->
<!-- https://www.htmliseasy.com/keeper/ -->
<script type="text/javascript">
var keeperaltpage = "denied.html";
function keeperCheck(){
   keeperpass = window.document.keeper.page.value;
   keeperframe.location.href = keeperpass + "2.html";
   timer = setTimeout("keeperTest(keeperpass)",2000); }
function keeperTest(pass){
   if(keeperframe.keeperpasscheck)
   { location.href = pass + ".html"; }
   else { location.href = keeperaltpage; } }
</script>
<form name="keeper" action="javascript:keeperCheck();"
 style="margin:0;">
<div style="display:inline;">
<input type="text" name="page">
<input type="submit" value="Go">
<iframe src="" name="keeperframe" frameborder="0"
 style="width:0px;height:0px;"></iframe>
<noscript><div style="display:inline;color:#ff0000;
 background-color:#ffff66; font:normal 11px tahoma,sans-serif;">
 <br>Javascript is required to access this<br>
 area. Yours seems to be disabled.</div></noscript>
</div></form>
<!-- end GateKeeper code -->

</body>
</html>

Near the top of the script you'll find this line...

var keeperaltpage = "denied.html";

When a user enters a bad password, this is the page they are sent to. You may edit this as you wish.

It can be a partial URL - "denied.html"
a relative URL - "../denied.html"
or a full URL - "http://www.yoursite.com/blah/denied.html"

Now save it as index.html

Save the following as denied.html

<html>
<head>
<title></title>
</head>
<body>

<h1>Access Denied</h1>

</body>
</html>

Save the following as secret.html

<html>
<head>
<title></title>
</head>
<body>

<h1>Secret Page!</h1>

</body>
</html>

Save the following as secret2.html

<html>
<script type="text/javascript">
var keeperpasscheck = 1;
</script>
</html>

That's a total of 4 documents...

  1. index.html
  2. denied.html
  3. secret.html
  4. secret2.html

You have now created a working sample of GateKeeper 2. View it here. (password is secret)

Create and get this sample working for yourself before you continue.
(Here is a zip file with all four documents: keeper2sample.zip)

Now I'll explain how it works. You'll notice the following bit of code in the GateKeeper script..

<iframe src="" name="keeperframe" frameborder="0"
 style="width:0px;height:0px;"></iframe>

This creates an invisible inline frame next to the GateKeeper box. When a password is entered (for example secret), the script looks for and attempts to load a document named secret2.html into that iframe. If secret2.html is found, the document secret.html is then loaded. If not, denied.html is loaded.

So, like GateKeeper 1, the password is the name of the file.

Let's say you'd like the password to be groovy. You'd name your secret page groovy.html, and you'd create a second page named groovy2.html that contains nothing more than the following...

<html>
<script type="text/javascript">
var keeperpasscheck = 1;
</script>
</html>

Like GateKeeper 1, you can remove the button if you'd like...

<!-- <input type="submit" value="Go"> -->

Or change the input box type to password...

<input type="password" name="page">

And like GateKeeper 1, we can make a minor alteration to protect a directory rather than a file...

   { location.href = pass + "/index.html"; }

Here is an example. (password is secret)
(And all the documents in a zip file: keeper2sampleb.zip)

And there's probably a few more things you can do with this script by fiddling with the code... and you're welcome to do just that. Feel free to alter it to your needs.

Now we'll move on to GateKeeper 3. A groovy little piece of Javascript Password Protection if I do say so myself.

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