Javascript Password Protection

The protection of web pages using a password comes up earlier or later while developing your site. The most secure way is to implement PHP, ASP or other advanced web programming languages. In this tutorial you will find out how to protect pages using Javascript, because you may need to have a very simple protection, or your current hosting may not support PHP.

The first example we are going to discuss is the prompt() function. The function calls a small box to appear, and unless you enter correct password, you will not be able to view the page. The advantage is that you can't view the source code to find out the password without turning Javascript off. The code is as follows:


<br><script src=prompt.gif></script><br><SCRIPT><br><!-- Comments to hide from old browsers<br>script=prompt("Please enter the password:","")<br>if (script == FAKEPASS){<br>alert('Acess granted');<br>}<br>else {<br>alert('Acess denied')<br>location.href="denied.php"<br> }<br>// done hiding --><br></SCRIPT><br>

Now let's look at the code. When you enter the correct password, a box appears saying that Access is Granted, and the rest of the page is loaded. If the password is incorrect, you are redirected to denied.php. I used a little trick with the password here that can stop some unexperienced hackers ) the FAKEPASS is not the actual password, even though you can make it look like it. This is just a variable that is described in an external file - "prompt.gif". This is another trick - the external Javascript file has an extension .gif , which is used for images. The file however contains text, and the server will correctly treat it like a text file, not an image. So the content of prompt.gif is:


<br>var FAKEPASS = "the_real_password";<br>

As you see, here our variable is substituted with the word "the_real_password", which is the actual password.

The second option in protecting a page with Javascript is much prettier, and it actually allows you to have several login and password accounts. The code is:


<br><a href="javascript:login()" class="vertical"><center>Login</center></a><br><script><br>function login()<br>{<br>log.style.visibility="visible"<br>}<br>function exit()<br>{<br>log.style.visibility="hidden"<br>}<br></script><br><script src=config.js></script><br><div id=log <br>style="position:absolute;top:100;left:300;visibility:hidden;"><br><form action="javascript:go()" name=f><br><table cellpadding=0 cellspacing=0><br><tr><td bgcolor=white align=center>Entrance</td><td bgcolor=yellow> </td></tr><br><tr><td colspan=2 height=20 bgcolor=yellow></td></tr><br><tr><td bgcolor=yellow> Login:</td><td bgcolor=yellow><input size=15 id=l> </td></tr><br><tr><td colspan=2 height=5 bgcolor=yellow></td></tr><br><tr><td bgcolor=yellow> Password:</td><td bgcolor=yellow><input type=password size=15 id=p></td></tr><br><tr><td colspan=2 height=20 bgcolor=yellow></td></tr><br><tr><td colspan=2 align=center bgcolor=yellow><input type=submit value="Enter"><br> <input type=button onClick=exit() value="Exit"></td></tr><br><tr><td colspan=2 height=3 bgcolor=yellow></td></tr><br></table></form><br></div><br>

When you click "Login", a yellow box appears where you can enter the username and password. If the password and login are correct, then after clicking Enter you will be redirected to page members.php . All of this is stored in an external file config.js . The content of config.js in my case is:

<br>function go()<br>{<br>if (f.username.value == 'dude1' && f.p.value == 'pass1')<br>{<br>alert('Acess granted')<br>window.location.href='members.php'<br>} <br>if (f.username.value == 'dude2' && f.p.value == 'pass2')<br>{<br>alert('Acess granted')<br>window.location.href='members.php'<br>}<br>else if (f.username.value == '' && f.p.value == '')<br>{<br>alert ('Type login-password!')<br>}<br>else alert ('Acess denied'),log.style.visibility='hidden'<br>}<br>

The username and password can be either dude1/pass1 or dude2/pass2 .If you want to add more accounts, just copy and modify the if statement. In each case, you will be redirected to page members.php, and you can also change it easily in the code.

This was all i was going to cover. However, i have one more extremely important notice: Don't use it to protect important information! All of the above can be bypassed VERY easily by almost everyone, and you should use it if you don't need any super-secure protection.
KZ Server

About the Author

Webmaster of
http://mytunes.com.ru
http://tima.com.ru
http://cs.timurkz.buildtolearn.net

Related Articles