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

Welcome!

The GateKeeper is a bit of JavaScript code that you can use to restrict access to some or all of your web pages without the need for CGI scripting or server based authentication methods.

There are 3 versions of GateKeeper... versions 1, 2 & 3. The first is the simplest. Insert a bit of code into your page and you're off.

Here is an example...

Unless you know the password, you cannot access the document. Why? Because the password IS the name of the document. If your secret document is red-rose.html, then the password would be red-rose. Pretty simple actually.

Putting it on your page couldn't be simpler. Just place this bit of code where you want your GateKeeper box...

<!-- start GateKeeper code -->
<!-- https://www.htmliseasy.com/keeper/ -->
<form name="keeper" action="javascript:location.href =
window.document.keeper.page.value + '.html'" style="margin:0;">
<div style="display:inline;">
<input type="text" name="page">
<input type="submit" value="Go">
<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 -->

Then change the filename of the target document to whatever you want the password to be. If you want the password to be redrum, change the name of the target document to redrum.html. The script appends ".html" to whatever is entered, then attempts to load that document. If the password is correct, the protected page loads. If the password is incorrect, the user gets a "File Not Found" message.

Once again, because you would not believe how many emails I get asking how to change the password.... the password is the name of the file.

If you want your password to be bellybutton, then make the target document bellybutton.html.

And speaking of buttons, the button can be commented out or removed if you wish...

<!-- start GateKeeper code -->
<!-- https://www.htmliseasy.com/keeper/ -->
<form name="keeper" action="javascript:location.href =
window.document.keeper.page.value + '.html'" style="margin:0;">
<div style="display:inline;">
<input type="text" name="page">
<!-- <input type="submit" value="Go"> -->
<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 -->

Either way, the password can be submitted when the user hits Enter on his keyboard.

Another simple alteration would be to change the password box to type="password" so that the box displays ****** instead of the password.

<!-- start GateKeeper code -->
<!-- https://www.htmliseasy.com/keeper/ -->
<form name="keeper" action="javascript:location.href =
window.document.keeper.page.value + '.html'" style="margin:0;">
<div style="display:inline;">
<input type="password" name="page">
<input type="submit" value="Go">
<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 -->

And of course, you can alter the form's appearance as you wish.

Now, the first question that might come to mind is...

Just how secure is this thing?

More secure than you might think. Unless you give someone the password, the chances are pretty slim that someone will get to the document. If you have a page that you only want certain people to have access to, then it will work like a charm. If you'd like to try your hand at cracking the GateKeeper, you're welcome to try in The Vault.

Couldn't someone just go straight to the protected page?

Sure, assuming you have given them the name of the page (the password). Once you've given someone the password, they can go to that page all they wish until you change the name of the page.

What if someone looks at the source of my page. Can they get the password that way?

No. The password is nowhere in the document. It is entered by the user.

Can Google find the page?

The short answer is no. Google creates its index mostly by following links. As it scans web pages on the internet, it follows links on those pages that lead to other web sites and other web pages. If you or someone else has linked directly to the page that's supposed to be secret, then Google may index it. But if there are no links to the page, no search engine will find it.

Does the GateKeeper work with all browsers?

It will work with any modern javascript-enabled browser. Except for the "javascript-enabled" part, that covers just about everyone.

What if a user has disabled their Javascript?

Then GateKeeper won't work for them and they'll see a message...

Will people with javascript disabled be able to slide past the GateKeeper and get to the secret document?

No.

Instead of getting a "File Not Found" message, can I specify an alternate page if a bad password is entered?

Not with this version of GateKeeper. But you can do that using GateKeeper 2, GateKeeper 3 or using some sort of server-based authentication.

Will it work on my free web page at [Tripod, Geocities, etc.]?

Yes. It will work on any web page.

You said there are different versions of GateKeeper. Do you happen to have a nifty chart that compares the features of each?

Why yes... yes I do...

All in all, GateKeeper 1 is a simple script... but there are a few more things we can do with it.

You can use multiple passwords...

Let's suppose you have a club. And that club has 4 members.... Stan, Kyle, Eric & Kenny. And let's suppose you want each one to be able to access their own particular protected page. You could make 4 pages... stan.html, kyle.html, eric.html and kenny.html and with their respective passwords, each member would have access to only their particular page. (of course, you'd have to make the passwords a little harder for the others to guess... but you get the idea)

Here is an example. Passwords are stan, kyle, eric and kenny. (Keep in mind the passwords are case-sensitive... stan is not the same as Stan or STAN)

We can also make a minor alteration to the script and instead of the password being the name of a file, we can make it the name of a directory...

<!-- start GateKeeper code -->
<!-- https://www.htmliseasy.com/keeper/ -->
<form name="keeper" action="javascript:location.href =
window.document.keeper.page.value + '/index.html'" style="margin:0;">
<div style="display:inline;">
<input type="text" name="page">
<input type="submit" value="Go">
<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 -->

Now a whole directory full of files is protected. Here is an example...

Now instead of looking for bbking.html, the script looks for bbking/index.html.

Why would we want to do that? Well, let's suppose you had a bunch of files in a directory that you wanted to protect. And let's say one day you wanted to change the password. In this scenario all you'd have to do is change the name of the directory, and the new password would be the name of that new directory. Users with the new password would be able to access everything like before, but in the new directory, and users without the new password would be SOL (S--- Outta Luck).

I'll tell you... for a simple script, there's a lot you can do with it.

One last thing before we move on... I want 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://www.yadayada.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://www.yadayada.com/mystuff/

On many servers, you would get a listing of every single file in that directory, including your secret document... unless... there was a default document in that directory or the server was configured NOT to display directory contents. 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.)

If this is confusing, just remember this... in the directory that contains your secret document, just make sure there is a default document (usually index.html).

Well that wraps it up for GateKeeper 1.

Now, when a user enters a bad password, wouldn't it be nice if they got a page specified by you, rather than a generic "File Not Found" message? Well, slide on over to GateKeeper 2 and I'll hook you up.

GateKeeper - Javascript Password Protection

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

HTML 4.0 Reference      Barebones HTML Guide