The Poor Man’s Client-Side Authentication

Recently I had to whip up a quick Web page to disseminate some information requiring a semblance of security in the form of a user name and password. Furthermore, I had HTML and Javascript but no server-side scripting at my immediate disposal. What I came up with as a solution was this.

  • Create a form for entering user name and password. This doesn’t have to be any more complicated than two input fields:
<label>User name:</label>
<input type='text" id='username" />
<label>Password:</label>
<input type='password" id='password" />
  • Add a button to submit the form:
<input id="btnSubmit" type="button" value="Submit" onclick="javascript:go()" />

  • For “authentication”, simply concatenate the values entered for user name and password to derive the name of the HTML page to load. If the values are correct, the correct page is loaded. If not, a File Not Found error is returned. The Javascript to do this is quite simple:
function go() {
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    document.location = "http://site.com/" + username + password + ".html";
}
  • Finally, create a page containing the secret information and name the file as the combination of the desired user name and password.

All this can be done in under 10 minutes, about the same amount of time it takes just to get a Visual Studio project up and going. Obviously, I would not recommend implementing an e-commerce site this way!

Related posts: