WebReference.com - Chapter 6 of Beyond HTML Goodies, from Que Publishing (7/8)

[previous] [next]

Beyond HTML Goodies, chapter 6

Hidden Password Protection

This is the first in a series of two scripts meant to discuss and describe the concept of creating password protection through JavaScript. Each uses a different method of password protection. You choose which one you think is best.

The two are

• Password in script --hidden script
• Password encrypted through arrays

Both are effective to a point. As with most password protection, the protection is only as good as the user's ability to not blab the password. JavaScript has taken a bad rap in all this because many people say that the password is in the script and that it's easy to look at the code, grab the password, and get in.

The second script simply does not include the password, so that's out. The first does, but I'll show you how to make it darn hard to grab it from the code--if you can get to the code at all.

Let's get started with the first one.

Here's the Script

In all honesty, it would do you good to go online and see this pup in action. It's really clever the way the script hides its code.

I have a working copy linked directly to https://www.htmlgoodies.com/stips/scripttip73effect.html. Try to break in.

Here's what you're looking for. Figure 6.13 displays the prompt box that's waiting for your password.

Figure 6.13
What's da' passwoid, bub?

The password is "peppermint"--without the quotes. Before you do it correctly, put in incorrect passwords, leave spaces blank, press Cancel, and try to look at the pages code. You'll see how I hid it.

Here's code after you get back:

<SCRIPT LANGUAGE="javascript">
var getin = prompt("What is the password?","")
if (getin=="peppermint")
{
alert('You got it! In you go...')
location.href='scripttip73correct.html'
}
else
{
if (getin=="null")
{location.href='nope2.,html'}
else
if (getin!="peppermint")
{location.href='nope.html'}
} 
</SCRIPT>

How do you like that? I wrote that code for a fellow professor who wanted a basic password system. The system works pretty well, but it is still crack-able if you know how. Did you try to get the password? Hard, wasn't it?

It was difficult because of the way the script was put together. None of the password elements ran before prompt or alert elements. That way, it was impossible to get the page by itself without some type of JavaScript element taking the focus of the browser. The moment you'd click to lose one item, another would pop up.

Let's look at the code:

var getin = prompt("What is the password?","")

We begin with a prompt that runs first in the script. Every time this page loads, this prompt pops up first. You simply haven't time to get to the view source menu item.

The variable getin is given the value of the text the user puts in to the prompt box.

There's one more thing--notice that there's no text set to go in to the text box part of the prompt. That way, I can set up an event to occur if the user simply clicks Cancel without putting in any text.

if (getin=="peppermint")
{
alert('You got it! In you go...')
location.href='scripttip73correct.html'
} 

The first IF statement is set up to work if the password is correct. If getin is equal (==) to "peppermint" (the password), an alert box pops up. The box is again to keep focus away from the page itself. After you click to close the alert box, the location.href hierarchy statement is enacted and the browser changes the page.

But what if the user puts in the wrong password:

else
{
if (getin=="null")
{location.href='nope2.,html'}
else
if (getin!="peppermint")
{location.href='nope.html'}
}

The wrong password brings on the wrath of the Else statement. I have the Else statement set to itself to be another If statement. Basically if the user response does not match the original If statement, the user's answer is checked again by a second If statement. The Else moves the user response from one to the other.

If the user just clicks Cancel, the variable getin will be null. This response is set to go to a page called nope2.html that tells the user to stop clicking Cancel. (NOTE: This doesn't work on all browser versions--but all versions will get the next blip of code.)

If getin is not null, a value must be put in by the user. If it is anything but "peppermint" (!=), the page nope.html pops up instructing the user to try again.

That's basically it. It's not a hard script, and the password appears in the code, but it's darn hard to get to. The script creates a vicious circle that can only be broken by putting in the correct password or closing the browser window.

Have you figured out how to get to the code yet? The easiest method is to close the browser and re-open it on the page that would send you to the password page. Then put your pointer on the link, right-click, and download the target page. Then you would have the code and the password.

Had you thought of that? If not, your user might very well not have either. Maybe this password script is the one for you. If what you have to protect isn't of high-end importance, this could be the one.

[previous] [next]

Created: August 9, 2002
Revised: August 9, 2002

URL: https://webreference.com/programming/javascript/goodies/chap6/7.html