The protection of web pages using a passwordcomes up earlier or later while developing your site. The mostsecure way is to implement PHP, ASP or other advanced webprogramming languages. In this tutorial you will find out how toprotect pages using Javascript, because you may need to have avery simple protection, or your current hosting may not supportPHP.

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

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

Now let's look at the code. When you enter the correctpassword, a box appears saying that Access is Granted, and therest of the page is loaded. If the password is incorrect, youare redirected to denied.php. I used a little trick with thepassword here that can stop some unexperienced hackers ;)) theFAKEPASS is not the actual password, even though you can make itlook like it. This is just a variable that is described in anexternal file - "prompt.gif". This is another trick - theexternal Javascript file has an extension .gif , which is usedfor images. The file however contains text, and the server willcorrectly treat it like a text file, not an image. So thecontent of prompt.gif is: var FAKEPASS = "the_real_password";

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 muchprettier, and it actually allows you to have several login andpassword accounts. The code is: <center>Login</center> <script> functionlogin() { log.style.visibility="visible" } function exit() {log.style.visibility="hidden" } </script> <scriptsrc=config.js></script> <div id=logstyle="position:absolute;top:100;left:300;visibility:hidden;"><form action="javascript:go()" name=f> <table cellpadding=0cellspacing=0> <tr><td bgcolor=whitealign=center>Entrance</td><td bgcolor=yellow> </td></tr><tr><td colspan=2 height=20 bgcolor=yellow></td></tr> <tr><tdbgcolor=yellow> Login:</td><td bgcolor=yellow><inputsize=15 id=l> </td></tr> <tr><td colspan=2 height=5bgcolor=yellow></td></tr> <tr><tdbgcolor=yellow> Password:</td><td bgcolor=yellow><inputtype=password size=15 id=p></td></tr> <tr><td colspan=2height=20 bgcolor=yellow></td></tr> <tr><td colspan=2align=center bgcolor=yellow><input type=submit value="Enter"> <input type=button onClick=exit() value="Exit"></td></tr><tr><td colspan=2 height=3 bgcolor=yellow></td></tr></table></form> </div>

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

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

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

This was all i was going to cover. However, i have one moreextremely important notice: Don't use it to protect importantinformation! All of the above can be bypassed VERY easily byalmost everyone, and you should use it if you don't need anysuper-secure protection. KZ Server