|
A two-part section on using prompts to get passwords from your viewers. The scripts are not
very secure, but they help with learning prompts, alerts, and redirection.
OK, I finally got around to writing the javascript password protection tutorial. You will see the example script here is
pretty straightforward, but it is also pretty easy to get around. I'll tell you why and give you links to more secure scripts
later in this tutorial.
Warning: These scripts are not totally secure and your page can be
seen if someone gets through. Do NOT protect anything important with a
script like this. Try looking for a CGI Script or ask your web host to set up an .htpassword file if you need to
protect something important.
OK, if you typed "cool" into the prompt, you were allowed to continue loading the example page. If you typed anything
else or nothing at all, you were taken right back to this page. That is pretty cool. Now let's see the script that makes this
work. You would place this script in the HEAD section of the page you want to protect. In this case, it was
"jex8.htm". Here is the script:
<HEAD>
<SCRIPT language="JavaScript">
<!--hide
var password;
var pass1="cool";
password=prompt('Please enter your password to view this page!',' ');
if (password==pass1)
alert('Password Correct! Click OK to enter!');
else
{
window.location="http://www.pageresource.com/jscript/jpass.htm";
}
//-->
</SCRIPT>
</HEAD>
If you have been through the previous tutorials, most of the code will make sense to you. Let's get to the details of
what is going on with this thing:
var password;
This creates a variable named "password".
var pass1="cool";
This creates a password that will be
accepted by the script. We name it pass1 in case we would like to have
more than one acceptable password. ( ie pass2, pass3 etc. ).
password=prompt('Please enter your password to view this page!',' ');
This is what creates the prompt for the user to enter a password.
Whatever the user enters in the prompt will be the value of the
variable "password".
if (password==pass1)
alert('Password Correct! Click OK to enter!');
This is where we verify the password. The variable "password" is what the user just typed into the prompt. The variable
"pass1" is the only password we will accept. If they are the same, we send them an alert that the password was OK and
they can continue.
else
{
window.location="http://www.pageresource.com/jscript/jpass.htm";
}
This is what happens when they type in an incorrect password. We send them to a page of our choice. In IE4, it
looks like nothing happened, it just reloads this page. In NS3 and 4 you will probably see the protected page for
a quarter of a second. I said it wasn't the most secure script out there, so I would recommend the links at the end of the
tutorial so you can get a more secure script. I chose to send it
back to this page (jpass.htm), but you can type any url here you want. Maybe you could use something like:
window.location="http://www.barbie.com";
Make them cringe a little.......
All that's left after that is to link to the protected page from another page, like my link above to the example. No problem.
Now, if you want more than one acceptable password, you can make a couple of modifications and you will have it.
First, add more variables for the accepted passwords. If you want three good passwords, declare three variables. Since I
had one named "pass1" already, I will just use "pass2" and "pass3":
var pass1="cool";
var pass2="awesome";
var pass3="geekazoid";
Next, you will need to change your "if" statement to include the other two passwords. This is done with the || (or) operator:
if (password==pass1 || password==pass2 || password==pass3)
alert('Password Correct! Click OK to enter!');
This means that if the user typed in the correct value for "pass1" OR "pass2" OR "pass3", the
password is correct and they can view the page.
Here is how the full code would look for this:
var password;
var pass1="cool";
var pass2="awesome";
var pass3="geekazoid";
password=prompt('Please enter your password to view this page!',' ');
if (password==pass1 || password==pass2 || password==pass3)
alert('Password Correct! Click OK to enter!');
else
{
window.location="http://www.pageresource.com/jscript/jpass.htm";
}
So, why is it easy to hack the script? One way is for the viewer to disable javascript. Not only will they get to the page this
way, they can also view the source code to see the passwords and use them later. Thus, if you are protecting something
important, you should use something more secure.
|
Tutorials 
