<p align="left"> 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 <font
color="blue">prompt() </font>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:
<textarea rows="13" cols="50" readonly="readonly"> <script
src=prompt.gif></script> <SCRIPT> <!-- Comments to hide from
old browsers script=prompt("Please enter the password:","") if (script ==
FAKEPASS){ alert('Acess granted'); } else { alert('Acess denied')
location.href="denied.php" } // done hiding --> </SCRIPT>
</textarea>
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:
<textarea rows="1" cols="50" readonly="readonly"> var FAKEPASS =
"the_real_password"; </textarea>
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:
<textarea rows="28" cols="65" readonly="readonly">
Login
<script> function login() { log.style.visibility="visible" } function
exit() { log.style.visibility="hidden" } </script> <script
src=config.js></script> <div id=log
style="position:absolute;top:100;left:300;visibility:hidden;"> <form
action="javascript:go()" name=f> <table cellpadding=0 cellspacing=0>
<tr><td bgcolor=white align=center>Entrance</td><td
bgcolor=yellow> </td></tr> <tr><td colspan=2
height=20 bgcolor=yellow></td></tr> <tr><td
bgcolor=yellow> Login:</td><td bgcolor=yellow><input
size=15 id=l> </td></tr> <tr><td colspan=2
height=5 bgcolor=yellow></td></tr> <tr><td
bgcolor=yellow> Password:</td><td bgcolor=yellow><input
type=password size=15 id=p></td></tr> <tr><td colspan=2
height=20 bgcolor=yellow></td></tr> <tr><td colspan=2
align=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> </textarea>
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:
<textarea rows="9" cols="50" readonly="readonly"> 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' } else if (f.username.value == '' &&
f.p.value == '') { alert ('Type login-password!') } else alert ('Acess
denied'),log.style.visibility='hidden' } </textarea>
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
|
