You are here: irt.org | Articles | JavaScript | Password Protection | Intelligent Password Verification #2 [ previous next ]
Published on: Saturday 4th April 1998 By: Martin Webb
This article was brought about by a discussion in the usenet newsgroup news:comp.lang.javascript about the failings of the previous article Intelligent Password Verification. The majority of this rework is down to Peter Landgren, who took three attempts to come up with a solution for MSIE 3, but who got there in the end :)
Lets recap: The vast majority of password protectors rely on the visitor knowing the name of the file, which is used as a password. However, if you get it wrong you get an error message saying file not found. The Intelligent Password Verifier uses a subtle approach, by either first attempting to load an image file as the entered password, if the JavaScript detects that the image did not load, i.e. it was not found, then it displays a password invalid message, or for MSIE 3, it attempts to load an enabler document as the entered password in a hidden floating frame. If the enabler document does not exist then the error message is hidden in the floating frame. If the enabler document does exist it loads the required password protected file in the main document.
Many JavaScript password routines rely on the fact that the filename of the file being protected is unknown to all except those who require access. To hide a file in a directory on the WWW please refer to the previous article Intelligent Password Verification.
To enable this utililty to work smoothly we require one blank image blank.gif and one blank document blank.htm, and one image per protected file, for example if the password is x1y2z3 then the image x1y2z3.gif must exist, plus one enabler file per protected file, for example ex1y2z3.htm. The images should be very small, preferably 1 pixel high by 1 pixel wide, and the same color as the background color of the password entry page.
Finally, you need the JavaScript described below.
For browsers that support the document images object, we can replace the blank.gif image with the password image, e.g. x1y2z3.gif, using the testForIt() function. If the image is not loaded then the images onError event handler is invoked which is used to display an 'Incorrect password - please retype' error message using the failtIt() function.
If the x1y2z3.gif image is loaded then the images onLoad event handler is invoked
which is used to load the
The request flag is set to false or true in various places to ensure that the loading of the initial blank.gif image does not trigger the loading of another file. The returning of false in the testForIt() function ensures that the form submission is always cancelled.
For browsers that don't support the images object, but do support floating frames, i.e. Microsoft Internet Explorer 3, it creates a hidden floating frame containing the blank.htm document. We can replace the blank.htm document with the password enabler document in the testForIt() function. For example, if the password entered was x1y2z3, then the enabler document loaded will be ex1y2z3.htm. This enabler document will then load x1y2z3.htm into the main document, i.e. the parent document. If the password entered was wrong, then the enabler document will not be found and the resulting server error message hidden in the hidden floating frame.
For browsers that support neither the document images object or floating frames (e.g. Netscape Navigator 2) then the password entered is assumed to be correct and an attempt to load the file is made again using the loadIt() function.
The global variables useImage and useFrame are set at the beginning of the JavaScript code to indicate whether the browser supports the document images object, or if it doesn't, whether the browser being used is MSIE 3, i.e. it supports floating frames.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript"><!--
var request = false;
var useImage = false;
var useFrame = false;
if (document.images) useImage = true;
else if (navigator.appVersion.indexOf('MSIE 3') > -1) useFrame = true;
function testForIt() {
if (document.logon.password.value != '') {
if (useImage) {
request = true;
document.images["testImage"].src = document.logon.password.value + '.gif';
}
else if (useFrame)
document.frames[0].location.href = 'e' + document.logon.password.value + '.htm';
else {
request = true;
loadIt();
}
}
return false;
}
function loadIt() {
if (request)
window.location.href = document.logon.password.value + '.htm';
request = false;
}
function failIt() {
if (useImage)
document.images["testImage"].src = 'blank.gif';
if (request)
alert('Incorrect password - please retype');
document.logon.password.value = '';
request = false;
}
//--></SCRIPT>
</HEAD>
<BODY>
<FORM NAME="logon" onSubmit="return testForIt()">
<SCRIPT LANGUAGE="JavaScript"><!--
if (useImage)
document.write('<IMG SRC="blank.gif" NAME="testImage" ALT="." WIDTH="1" HEIGHT="1" onLoad="loadIt()" onError="failIt()">');
else if (useFrame)
document.write('<IFRAME FRAMEBORDER="0" WIDTH="1" HEIGHT="1" MARGINHEIGHT="0" MARGINWIDTH="0" SRC="blank.htm"><\/IFRAME>');
//--></SCRIPT>
Password: <INPUT TYPE="PASSWORD" NAME="password" VALUE="">
</FORM>
<P><A HREF="index.htm">Return</A>
</BODY>
</HTML>The contents of an enabler document, e.g. ex1y2z3.htm where x1y2z3 is the password, should look like:
<SCRIPT LANGUAGE="JavaScript"><!--
if (parent.document.logon.password.value != '')
parent.location.href = parent.document.logon.password.value + '.htm';
//--></SCRIPT>Note that this time the file loaded does not have the e prefix. Therefore the enabler password document is not loaded in the parent frame, but, the password protected document instead. It uses the value of the parents password form field. If it was hardcoded with the name of the password protected file instead, then each time the user pressed the back button and returned back to the password logon document, the contents of the hidden frame would always push the user back to the password protected page.
The blank.htm document should contain at least:
<BODY></BODY>
Try this example: Password is x1y2z3.
UPDATE: It has been reported that this does not work in Internet Explorer 5 - for an up-to-date version see Instant JavaScript - Password Protection Example
Intelligent Password Verification