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.
Unless
you know the password, you can't access the document. 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 red_rose,
then just name the target document red_rose.html
By the
way, the password for the previous example is redrum. 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...
The
starting page. (the one with the link)
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>
<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.
