JavaScript Password Protection

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 beseen if someone gets through. Do NOT protect anything important with ascript 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.

Below is a link that will show you an example of what we are about to create. Click the link. When you are prompted for a password, enter:

cool

Example Password Protected Page

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:

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 beaccepted by the script. We name it pass1 in case we would like to havemore 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 thevariable "password". If you have not seen prompts before, go to the prompts tutorial for more info.

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. For more on alerts, see the alerts page.

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";
}

If you want to see this in action, click the link for this example below. Enter one of the three correct passwords (cool, awesome, or geekazoid) and you will see the next page!

Multiple Password Example

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. You can find some more secure password javascripts at The JavaScript Source. You can also look for a CGI password script at The CGI Resource Index.

JavaScript Password Protection
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. Ill tell you why and give you links to more secure scripts later in this tutorial.
Password Protect
Add this login form to a page.
JavaScript Prompts
Well, lets say you wanted to get somebodys name before they saw the page, and then write their name on your page right before their very eyes... Well, you can do this using a javascript prompt. Heres the command:
Random Password Generator
Random password generator.
Database Connection Strings
Although our ASP database tutorials all use MS Access connection strings, there are many sorts of database software out there for use with ASP. This tutorial will show you how to connect with them...
Random Password Generation
Web programmers will enjoy this article. It is a quick and effective way to create Random Password Generation - needed for security and anti-spam measures. The author provides concise lines of code, screenshots and simply read texts.
Introduction to Htaccess
What is
The Basics- JavaScript Tutorial
To get started with JavaScript, you will want to be able to see the tag that will set a script apart from the HTML. The tags used to begin and end a script are the tags. The opening tag should appear like this
4 Powerful Features of Javascript Programming Language
In the community of web developers and surfers, Javascript is highly popular as client side scripting language for web browsers. Lets take a look at some of the features of this language.
Hotlink Protection
Bandwidth theft or hotlinking is direct linking to a websites files (images, video, etc.). An example would be displaying a JPEG image you found on someone elses web page so it will appear on your own site, journal, weblog, forum posting, etc.