Monday,
8th Sep 2008

[javascript]

Password Protection Script

I have looked at many Password Protection scripts and none have seemed very secure - until now!

This clever little script doesn't have a password - it works by using the name of the page you want to protect - but it doesn't display the page name in the script, so no-one can view your source code and find the password. Confused? So was I...until I realised that this script isn't really a password script...more like a search script. Here's how it works.

You have a page called, for example, projectx.cfm. This page has information on it that you want to password protect - so only certain people can see the page. First you have a page with a link that say something like "CLICK HERE TO VIEW OUR SECRET PAGE". Now, when they click on that link, they get a popup window which asks them for the password. They type in the password that you have given them, which is the name of the secret page - in this case, projectx - they don't type the .cfm - just the page name. The script then adds .cfm to whatever has been entered into the password box and looks on your server to see if there is a page called *whatever-was-typed*.cfm - if there is, they send them to it. If there isn't, they get the familiar 404 error!

So, if they try and guess your secret page name and type in, say, secretpage - they get a 404 error because the script cannot find secretpage.cfm because it doesn't exist on your server! Phew! I know, it sounds very complicated, but it's really so simple...I guess this is one of those times when the KISS principle really is effective!

OK...so now lets see it working. Here are a couple of tests for you to try. The first one uses the password example and the second one...well...I'm not going to tell you. The second one you have to try and figure out. There is a second page up there but it has a different name to the first. You will know if you manage to crack it - there will be a special message waiting for you! Now, let's see just how secure this little script is, shall we? Remember...your password for the first protected area is example. Good Luck!

My first Password Protected area

My second Password Protected area

Well, if you're anything like me, you've probably just spent an hour or two trying to get in to my second protected area...without success. But don't be glum - it means it works and you can now get your hands on a nifty little password protection script that really will protect those secret areas on your web site!

To use this script, you need 3 pages. The first page will have the link to access the protected area - like the links you just tried out on this page. The second page is a popup window with the box for filling in the password. The third page is the actual secret page that the viewer is trying to access.

Copy and paste the code in the box below and add it to the head of your first page - the one with the link that says something like "Click here to access our protected area"

<script language="javascript">
  <!-- 
  //JavaScript Password Protection Script
  //copyright unknown
  //visit http://www.daxassist.com for this and other javascripts with full tutorials.
      var new_window = null;
      function Password() {
      new_window = window.open('login.cfm', 'LoginID', 'width=350,height=200,resizable=0');
    }
  // End -->
</script>

In the piece of code you just added, change the page login.cfm to the name of the page you will have your text box for the viewer to enter the password. You can, of course leave it as login.cfm - just make sure your second page is called login.cfm. You can also change the dimensions of the password popup box here. The settings I use are

'width=350,height=200,resizeable=0'

but you can make the box larger or smaller depending on your requirements by changing these settings.

After you have added this piece of code, you need to add this anchor to your access link on this first page:

<a href="javascript:;" onClick="Password()">Click here to access the protected area</a>

Adding "javascript:;" to your href ensures that the current page stays open behind the little password popup page that the link will activate.

Now copy and paste the code in the box below and add it to the head of your second page - this is the little popup page that will contain the text box for viewers to enter their password in.

<script language="javascript">
  <!-- begin
    function Enter() {
      var location;
      var password;
      password=this.document.entryform.inputbox.value
      location=password + ".cfm"
      fetch(location)
      LoginID=window.close()
    }
      function fetch(location) {
      var root;
      if (opener.closed) {
      root=window.open('','getLoginID','toolbar=yes,location=yes,status=yes,menubar=yes,scrollbars=yes,resizable=yes,copyhistory=no');
      root.location.href = location;
    } else {
      opener.location.href = location;
    }
  }
// end -->
</script>

There is nothing to edit in this piece of code. This is the script that, when somebody enters a password in the text box, adds the password + .cfm and tries to find a page that matches on your server. Below is the code for the password text entry box. This goes into the body of your second page:

<form name="entryform" onsubmit="Enter(this.form)">
  <input type="text" name="inputbox" value="" size=20><br><br>
  <input type="submit" name="submit" value="Let Me In!">
</form>

Remember, this page is a popup window and will be smaller than a normal page.

Your third page is the one your viewer is trying to access. All you do is give your viewer the name of the page WITHOUT the .cfm file extension. In the first case here, the page is called example.cfm, so when you enter the word example in the password box, the script adds on the .cfm extension and returns the page example.cfm. You can name your secret page anything you wish - it can be a combination of letters, numbers, anything at all. The more intricate, the less chance somebody will eventually figure it out.

download sample zip file