Skip Navigation | Groups

This site uses cookies- for more information see the Cookie Policy | Continue


JavaScript Logon Page - Construction

JavaScript logon page with no 404 errors

The secured page should be placed in its own folder, with no other pages except a default page. (In this site the default page is index.html.)  The default page prevents directory browsing, and can be used to redirect to elsewhere on the web.

An image file with the same name as the page must also be present.

If the page is named obscurename.html then the image should be named obscurename.gif

In the diagram (left) the secure page is placed in the folder acfGGsd95g and is named trJhK764_cv.html, the associated image is named trJhK764_cv.gif  The logon details for this page are:

Userid: acfGGsd95g = folder name
password: trJhK764_cv = page name

The image need only be a very small transparent gif. Here a cyan rectangle is used so that it can be seen when loaded, but visibility of the gif is not required. An additional image of similar size is also required. In this example images/tp.gif , a 1 x 1px transparent gif, is used.

Note that the page has an obscure name (at least 8 characters, including upper and lower case to make it even harder to remember - Unix is case sensitive so 63 choices are available for each character of the name - [a-zA-Z_0-9], giving  248,155,780,267,521 combinations for an 8 character name.)

The folder name should also follow the same rules - make it difficult.

In the logon page, no-404.htm, the form is constructed using the code:

<form name="logon" onsubmit="return testForIt();"> The form must be named.
testForIt() tests the userid and password entered by swapping the test image for the image in the secure folder.
<p>UserId: <input type="text" name="userid" size="20"></p> Name of the folder containing the secured page.
<p>Password: <input type="password" name="password" size="20"></p> Name of the secured page
<p><input type="submit" value="Submit" name="B1">  
<img border="0" name="testImage" src="/images/tp.gif"
onLoad="loadIt()" onerror="failIt()" alt="" width="10"
This should all be on one line.
Image used for testing for the correct username/password. This is swapped by the javascript for the image in the secure folder.
If the new image loads, loadIt() opens the secure page, otherwise failIt() shows a warning message.
<input type="reset" value="Reset" name="B2"></p>  

Javascript is placed in the <head>...</head> section of the page.: (the code may be downloaded from

<script type="text/javascript">  
var request = false;
var pth = "/fp/articles/jspass/";
initialise variables
If the image is in a subfolder, then start the path to it. In this example, the secured page is in a folder in the /.../jspass folder.
function testForIt() {
request = true;
pth = "/fp/articles/jspass/"
if (document.images)
This function tests for the new image.
document.images["testImage"].src = pth + document.logon.userid.value
+ '/' + document.logon.password.value + '.gif';
(this is all on one line)
construct url for the new image.
return false;
If browser is old, (does not support document.images) try to load the secure page without testing.
function loadIt() {
if (request)
This function loads the secure page.
window.location.href = pth + document.logon.userid.value + '/' + document.logon.password.value + '.html'; (This is all on one line)
Construct the secured page URL and open it.
request = false;
reset variable for next time.
function failIt() {
if (request)
alert('Incorrect userid or password - please retype');
request = false;
document.logon.password.value = '';
document.logon.userid.value = '';
if (document.images)
document.images["testImage"].src = '/images/tp.gif';
If new image failed to load display message, and reset form fields to blank.
For maximum security, do not tell user which part of login was incorrect.
Replace the test image with the original.

Construction of the other pages involved is up to the web designer.