Source Code - JsMadeEasy.com

Metachecker.net

FontsMadeEasy.com

RankChecker.net

Learn Java Script Today

Over 5000 Free Fonts

Tutorials

Javascript Forum

Other Javascript Resources

Advance DHTML Tutorial


Gatekeeper 3.2
This is the upgraded and more advance version. While this GateKeeper has many improvements over the previous version, it's a little more complicated to set up. In this tutorial I'll explain how to do both.
Click here for my secret page!
The PassWord is frumpy Here is a zip file containing all the documents in the below example. Just unzip it to your hard drive!

Insert into <HEAD>
<SCRIPT language="JavaScript"><!-- /******************************************************* GateKeeper v3.2 - by Joe Barta http://junior.apk.net/~jbarta/tutor/keeper/ Permission is granted to freely use this script. ********************************************************/ // You can edit the following line to change the status bar message. var statusMsg = "Password Protected Area" function gateKeeper() { gateKeeperBox = window.open('gatemain.html', 'theKeeper', 'width=230,height=100,resizable=yes'); } //--></SCRIPT>

Insert into <BODY>
<A HREF="javascript:gateKeeper()" onMouseOver="self.status=statusMsg; return true" onMouseOut="self.status=''; return true" 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>

Part 1
Welcome to to version 3.2 of the GateKeeper script! The GateKeeper is a little 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. Access is via password like so... Click here for my secret page! (The password is frumpy) Note - this script works a little differently online than it does running from your disk. Running it locally from pages on your computer will probably generate "Not Found" messages, where running it online produces no such messages. Until you upload your pages, you will probably get an error every time you enter an incorrect password. Here is what's improved since version 2... Password box to hide the input. [*********] Notifies if password has been denied or approved. (No more "File not found" messages) Optional redirect to another page if password is denied. Message for those with javascript disabled. Editable status bar message when mouse is over the link. Ability to save passwords. A second version (GateKeeper-II) that accepts a username and a password. Has a user help file. Several points of configurability. Much more potential for customization. While this GateKeeper has many improvements over the previous version, it's a little more complicated to set up. In this tutorial I'll explain how to do both. If you want to skip right to that easier version, it's right here. (Changes since v3.1... Placed the ultimate target doc in a directory. This increases security in a couple of ways. Fixed IE5 bug (I hope). Changes that hopefully prevent some free hosts from inserting their code in the middle of GateKeeper code.) (Changes since v3.0... Minor changes to increase speed & efficiency. Removed NoteTab Clip. Added link to HTTP authorization example & tutorial.) -------------------------------------------------------------------------------- How does the GateKeeper work? In a nutshell, you enter a password such as frumpy. The script then adds .html to your password and looks for frumpy.html. When frumpy.html loads, it in turn loads the secret document - simple, ain't it? Is it easy to set up? Fairly. I'll talk you through it step by step. Shouldn't be any problem. Is it secure? Fairly. It's a lot more secure than many javascript password schemes but a little less secure than traditional server side password protection. All in all, it's reasonably secure for casual use. You are welcome to try your hand at cracking the GateKeeper in The Vault. (More about traditional server side password protection here) 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. It uses javascript, so what happens if someone comes along with javascript disabled? In short, they're SOL (Outta Luck). They will however, see a message like the one below. What they do from there depends on how bad they want your stuff. Click here for my secret page. Javascript is required to access this area. Yours seems to be disabled. Will people with javascript disabled be able to slide past the GateKeeper and get to the secret document? No. Will search engines be able to find the secret documents? Search engines follow links. Unless you have links to your secret pages the answer is no. If one of your members is a weenie and submits your secret page to a search engine then it will be indexed, but... it is a simple matter to occasionally do an ordinary Search & Replace across a few documents and the weenie boy's efforts are thwarted. Does the GateKeeper work with all browsers? All? I haven't checked it with all browsers. Would you settle for all the major ones that most people use? Does this work with WebTV? I have no idea. Does this work with [insert user-agent here]? I don't know. It's been tested with Netscape 3, Netscape 4.5, IE3 and IE4 on Windows95 and worked quite well. (IE3 showed a glitch though. Then again, IE3 showed a lot of glitches where javascript was concerned.) Will it work on my free web page at [Tripod, XOOM, Geocities, etc.]? Yes. I checked the script on each of those and it works fine. I suspect that it would probably work fine on most other hosts as well. All right. Show me how to do it. Here we go... I don't want to get bogged down with details of the script's operation, but I do feel the need to at least run through it quickly so, bear with me. If you don't follow me... don't worry about it. The GateKeeper window is made up of four frames. The top frame contains a form. A password is entered (frumpy) and the script attempts to load frumpy.html into the fourth and invisible frame. The script allows 10 seconds to load frumpy.html. In frumpy.html there is an onLoad script. As soon as frumpy.html loads, the password is approved and the secret page is loaded in the main browser and the GateKeeper closes. (The url of the secret page is specified in frumpy.html) If 10 seconds pass and frumpy.html still has not loaded, the user gets an Password Denied message and the script stops. That 10 second delay can be permantly increased by the user if necessary, and the password can be saved using cookies. You need a total of 8 documents to make a complete working example like this (password is frumpy). Download sample1.zip and save the contents to a folder somewhere. (Note sample1.zip is part of the GateKeeper tutorial package. If you downloaded this tutorial and are viewing it offline, you can still "download" sample1.zip. You'll just be copying it from one place to another on your computer.) If you have problems with zip files, all 8 documents can be found here ready to copy. This is what you should have. (You don't necessarily need to pay close attention to the descriptions. You don't have to completely understand what's going on in order to install the GateKeeper on your page. Although, all things being equal, it's better to understand than not understand.) These are your pages... index.html - The page with the link. The script on this page creates the little GateKeeper window. sluggo/hideout.html - The ultimate target page in sub-directory sluggo. sluggo/index.html - Just to prevent a directory listing of sluggo. alternate.html - An optional page where users get sent if they enter an invalid password. And these are gatekeeper pages... frumpy.html - The intermediate password page. The password is the name of this document (frumpy). As soon as frumpy.html loads, it in turn loads the ultimate target page. gatemain.html - The frameset doc for the gatekeeper window. The GateKeeper window is actually made up of four frames. Three are visible and one is (usually) invisible. gateblank.html - This gets loaded into each of the four frames at first. They are subsequently overwritten by javascript commands. gatehelp.html - The user help file. This is where they can save passwords among other things. Those eight documents are your skeleton password structure. Yeah but how do I put it on my page? You gotta start somewhere right? Gotta walk before you run right? Well, this is how we're starting. Get this stripped down version uploaded onto your web site somewhere and get it operational. After we get to that point, we'll learn how to modify it and how to insert it into any web page. The link is on index.html, the password should be frumpy and it should take you to the secret page (hideout.html). Again, this is what you should have. Get this working then move on to part 2.

Part 2
All rightee then. Got it to work? Good. Now we'll start fiddling with the knobs. The first thing we'll do is change the password. Change frumpy.html to glimmerman.html. The password is now glimmerman. Try it here. Let's do it again. (You would not believe how many people email me and ask how to change the password.) Change glimmerman.html to fanny.html. The password is now fanny. Try it. Very good. Now we'll change the name of the target document to myclub.html. First, rename hideout.html to myclub.html. Then open fanny.html and change the target variable to myclub.html... [snip]... // Replace sluggo/hideout.html below with the directory/filename of the destination page. var target = "sluggo/myclub.html" ...[snip] The password is still fanny, but now it takes you to myclub.html. Try it here. (The page still looks the same of course... you can change that some other time. Just notice that it went to myclub.html rather than hideout.html.) Also you can change the secret directory from sluggo to mrbill. [snip]... // Replace sluggo/hideout.html below with the directory/filename of the destination page. var target = "mrbill/myclub.html" ...[snip] This is one of the neat improvements of v3.2 over v3.1. In previous versions, if you changed password every so often, an old user could still access the target documents directly. With this improvement, you would change both the password AND the directory. Now an old user would get nothing. If you have multiple users each using a different password, you can do an occassional Search & Replace across all the password docs changing "sluggo" to something else. This doesn't affect current users at all, but anyone who is attempting to access the secret docs directly will be stopped. Try it. (password is fanny) To explain further... the password doc points to the secret pages which reside in a secret directory. Change the name of the secret directory and you immediately "re-hide" all the secret documents... If you have several members each using a different password document, old members won't be able to access any of the secret documents after you change the name of the secret directory. Remember, if you have multiple password docs, every time you change the name of the secret directory, you must also run a Search & Replace on all the password docs (changing sluggo to mrbill, etc) A couple things I want to mention here. First notice that unlike version 1 and 2 of GateKeeper, the password is not the name of the ultimate target document. It's the name of an intermediate document. Once loaded in the invisible GateKeeper frame, that intermediate document then loads the ultimate target document in the main browser window. Second, keep in mind that most of the time, file names are case sensitive. Get in the habit of using all lower case filenames with no spaces. (If you want a space, use an underscore instead... jim_dandy.html) A third thing to point out is that you should definitely make up your own password and target directory/document name. Don't leave them as frumpy, fanny, hideout, sluggo or myclub. If someone wants at your stuff, and they've read this tutorial, they might try those words just for the heck of it. If you're still using these words then... he gets your stuff. (don't rename gatemain.html, gateblank.html, or gatehelp.html. None of these will do an intruder any good and changing those names will break the script.) -------------------------------------------------------------------------------- OK, moving right along... Let's make a password protected page completely from scratch. First make a new directory (folder). For now, call it stuff. Also make a new subdirectory in stuff and name it gwbush. Let's say in stuff you have a document that points to a chat room and you want to protect it with the password gabby. Copy the following and save it as index.html. (Of course you can name it whatever you want, but somewhere in that folder there must be a document named index.html or the contents of that folder are easy pickins.) <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> Click here for my chat room! </BODY> </HTML> Now save the following in sub-directory gwbush as chatroom.html. (This is your chat page that we will protect.) <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY BGCOLOR="#99FFCC"> <H1 ALIGN=center>My Chat Room!</H1> </BODY> </HTML> A note here for users of certain free web hosts... You may have trouble here because some free web hosts limit you to one layer of sub-directories (Tripod comes to mind). You can still use the GateKeeper as is, it's just that your link will need to be on a document in the main directory. Angelfire users are limited to one sub-directory that must be named "images", therefore if you insist on placing your site with Angelfire, you cannot use this version of gateKeeper as is. You must eliminate the sub-directory part of the target as specified in gatemain.html. Better yet, you might consider moving your pages to a different host that doesn't have such lame requirements. This is what we have so far. As of right now it's just a simple page. Not even a link yet. Try it. To add Gatekeeper to this link we must do three things... Add the GateKeeper files. Add and configure the intermediate page. Make the link. 1. Add the GateKeeper files... From your first sample, copy these 3 documents into the stuff folder (all the files that begin with "gate"): gateblank.html gatehelp.html gatemain.html 2. Add and configure the intermediate page... Grab frumpy.html from your first sample, copy it to your stuff folder, and rename it to gabby.html. (We wanted our password to be gabby, remember? So name this document gabby.html) Now open gabby.html and change the "target" to gwbush/chatroom.html... [snip...] // Replace sluggo/hideout.html below with the directory/filename of the destination page. var target = "gwbush/chatroom.html" [...snip] 3. Make the link... Re-open index.html and add the link as follows... <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <A HREF="javascript:gateKeeper()" onMouseOver="self.status=statusMsg; return true" onMouseOut="self.status=''; return true" onClick="gateKeeper(); return false">Click here</A> for my chat room! </BODY> </HTML> Add the blurb for those with javascript disabled... <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <A HREF="javascript:gateKeeper()" onMouseOver="self.status=statusMsg; return true" onMouseOut="self.status=''; return true" onClick="gateKeeper(); return false">Click here</A> for my chat room! <NOSCRIPT><FONT COLOR="#FF0000"> <BR>Javascript is required to access this area. Yours seems to be disabled. </FONT></NOSCRIPT> </BODY> </HTML> And lastly, add the scripting between the <HEAD> tags... <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"><!-- /******************************************************* GateKeeper v3.2 - by Joe Barta http://junior.apk.net/~jbarta/tutor/keeper/ Permission is granted to freely use this script. ********************************************************/ // You can edit the following line to change the status bar message. var statusMsg = "Password Protected Area" function gateKeeper() { gateKeeperBox = window.open('gatemain.html', 'theKeeper', 'width=230,height=100,resizable=yes'); } //--></SCRIPT> </HEAD> <BODY> <A HREF="javascript:gateKeeper()" onMouseOver="self.status=statusMsg; return true" onMouseOut="self.status=''; return true" onClick="gateKeeper(); return false">Click here</A> for my chat room! <NOSCRIPT><FONT COLOR="#FF0000"> <BR>Javascript is required to access this area. Yours seems to be disabled. </FONT></NOSCRIPT> </BODY> </HTML> And that should do it! Try it now. (password is gabby) Now for an excercise. I have a diary page. The text is below. Copy it and save it somewhere as joesdiary.html. <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY BGCOLOR="#FFFF99"> <H2 align=center>Joe's Diary - My most private shtuff</H2> </BODY> </HTML> Next is my home page with a link to my diary. Save it as index.html. <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <H1>Big Joe's Home Page</H1> Check out <A HREF="joesdiary.html">my diary</A>. </BODY> </HTML> Your job is to protect my diary, my most precious writings, my most intimate thoughts, with a password. Make that password be bugzapper. You can name the sub-directory anything you wish. When you have managed to put together this project, you will be ready for part 3.

Part 3
Before continuing, 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://yada.yada.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://yada.yada.com/mystuff/ On most servers, you would get a listing of every single file in that directory... unless there was a default document in that directory. 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.) -------------------------------------------------------------------------------- What else can you do with GateKeeper? Well, you can change the mouseover message when the cursor is over the link. Look at your last excercise again. Note the status bar when the cursor is over the link... Notice it says Password Protected Area. Let's change that to Members Only Chat Area. Open index.html and change the following line... [snip]... // You can edit the following line to change the status bar message. var statusMsg = "Members Only Chat Area" ...[snip] Now try it. -------------------------------------------------------------------------------- Let's suppose you had a members only page. And let's suppose that someone wanted to access that members only page but they weren't a member. They enter a bogus password and it gets denied. Wouldn't it be nice to immediately send them to your new member sign up page? First you need an alternate page. Save the following as signup.html. Save it in the stuff folder. <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY BGCOLOR="#CCCC99"> <H2 ALIGN="center">New Member Sign Up Page</H2> </BODY> </HTML> Now open gatemain.html and add the redirect page... [snip]... /=============================================================== Define a few variables ================================================================/ var storedays = "90"; // length of time (in days) to store saved password var webmasterEmail = ""; // webmaster's email address var defaulttimer = 10; // Default length of time for GateKeeper to find the password doc. var redirectpage = "signup.html" // send visitors to this page if password is denied, full or relative url ...[snip] Now look what happens when someone enters a bad password... Try it. -------------------------------------------------------------------------------- Can I get this thing to work within frames? Absolutely. Let's suppose you had 2 frames side by side. You want to click on a link in the left frame, have the GateKeeper pop up, and on entering a valid password, the target page opens up in the right frame. Here is an example. (password is frumpy) And here is a zip file that contains that example. (If you have problems with zip files, these documents can be found here ready to copy.) It is a simple matter to convert our first example to this frames thing. First, rename index.html to left.html. Then you need two more documents, a right frame document and a master page. Save the following as right.html. <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <H3 ALIGN="center">right.html</H3> </BODY> </HTML> And save the following as index.html (you did rename the other index.html to left.html?) <HTML> <HEAD> <TITLE></TITLE> </HEAD> <FRAMESET COLS="20%,80%"> <FRAME SRC="left.html" NAME="leftframe"> <FRAME SRC="right.html" NAME="rightframe"> </FRAMESET> </HTML> Now open frumpy.html and add the following. [snip]... function letThrough() { parent.opener.parent.rightframe.location.href = target; if(parent.keeperBoxStayOpen == 0) { parent.close(); } } ...[snip] This simply tells the script to load into the main browser frame named rightframe. If you were using a redirect on entering a bad password, you would have to edit yet another line. (Near the end of gatemain.html) [snip]... if (redirectpage.length > 2) { parent.opener.parent.rightframe.location.href = redirectpage; } ...[snip] There's another item of configurability that I'm going to mention, although unless you hear of a definite problem, I suggest you leave it as it is. After sending out the call for frumpy.html, the script pauses for 10 seconds to give the server a few moments to send the page, and the browser a few moments to load the page. Only after 10 seconds has passed, will it check for the password. Keep in mind that this delay is normally only apparent when an incorrect password is entered. If a correct password is entered, as soon as frumpy.html is loaded it proceeds to fill the browser with the target page and kill the gatekeeper window. Usually that ends the first script before the 10 seconds are up. Also know that this item is adjustable by the user. If only the occasional user is on a really slow connection, he can adjust his delay for himself via the help page. If you believe that many of your users are on very slow connections, or if you get a lot of complaints about the password being denied and you suspect that this is the problem, you can increase this delay for everyone. Open gatemain.html and alter the following to however many seconds you want... [snip]... var storedays = "90"; // length of time (in days) to store saved password var webmasterEmail = ""; // webmaster's email address var defaulttimer = 10; // Default length of time for GateKeeper to find the password doc. var redirectpage = "" // send visitors to this page if password is denied, full or relative url ...[snip] Now would be a good time to look at and experiment with the items in the help file. When the GateKeeper box pops up, click on the Help link. The first thing you'll see is a place to save & unsave your password. Try this to see how it works. Further down the page you'll see the area where the user can increase the Password Denied delay. Even further down is an area where a user can report a problem to you, me or both of us. My email address is already coded in. If you want to get feedback from this you will have to add your email address to gatemain.html. So, open gatemain.html and add your email address... [snip]... var storedays = "90"; // length of time (in days) to store saved password var webmasterEmail = "you@your.place"; // webmaster's email address var defaulttimer = 10; // Default length of time for GateKeeper to find the password doc. var redirectpage = "" // send visitors to this page if password is denied, full or relative url ...[snip] While we have this open, note the line right above it. It defines the variable storedays. this is the number of days that the user's password will be saved. After 90 days he will have to enter it manually again. You can alter this to save for as many days as you like. -------------------------------------------------------------------------------- Well ladies & gents, that about covers the use of GateKeeper v3.2. I'll run down an overview of items you need to think about when setting this up... Mandatory: Add the GateKeeper files. Everything that starts with "gate". Add and configure the intermediate page. You can simply modify frumpy.html for this. You need to rename it to whatever password you want to use and you must alter the path/target variable. Add the scripting to the link and to the HEAD of the page that the link is on. Optional: Change the status bar message. Add a redirect page for wrong passwords. Make the proper adjustments if you're using it in frames. Adjust the default time delay. Add your email address to the help page. This is not mandatory, but it's still a good idea. Adjust the number of days the password is saved. -------------------------------------------------------------------------------- I thought you said there was a way to use a both a password AND a username? Did you forget about that? Not at all. It's just saved for the next part. It's not really an adjustment to the GateKeeper. It's different enough that I decided to call it GateKeeper-II and devote an entire section to it. Learn about it in part 4.

Here is a zip file containing all the documents in the above example.