CNET tech sites: Price comparisons | Product reviews | Tech news | Downloads | Site map
Search     




  CNET : Web Building : Feature  

Click Here!

SuperScripter
   
A JavaScript Implementation

Implementing the MD5-based login scheme in JavaScript is relatively easy. A full open source implementation of the MD5 algorithm is available from Paul Johnston. Other useful MD5 information is housed at this site. Copy the code to a text file and name it md5-js.txt.

We'll implement the server-side scripting in ASP (because it supports JScript, Microsoft's version of JavaScript). You can use any server-side scripting language, but you'll have to translate the MD5 algorithm into that language.

The following is an ASP implementation of the login form, login.asp.

<%@ LANGUAGE = "JScript" %>
<HTML>
<HEAD>
<TITLE>Please log in!</TITLE>
<% Session("sharedValue") = Math.random().toString() %>
<SCRIPT LANGUAGE="JavaScript" SRC="md5.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">

var sharedValue = "<% =Session("sharedValue") %>"

function handleLogin() {
 sendMD5Value(calculateMD5Value())
 }

function calculateMD5Value() {
 var pw = document.forms["login"].elements["password"].value
 pw += sharedValue
 return calcMD5(pw)
 }

function sendMD5Value(hash) {
 document.forms["login"].elements["password"].value = hash
 document.forms["login"].submit()
 }

</SCRIPT>
</HEAD>
<BODY>

<FORM NAME="login" METHOD="POST" ACTION="checkpassword.asp">
User ID: <INPUT TYPE="TEXT" NAME="userid" SIZE="40"><BR>
Password: <INPUT TYPE="PASSWORD" NAME="password" SIZE="40"><BR>
<INPUT TYPE="BUTTON" NAME="startLogin" VALUE="Login" onClick="handleLogin()">
</FORM>

</BODY>
</HTML>

Only three of the above lines contain ASP scripting. (ASP scripts are enclosed by <% and %>.) The first line of the file identifies the ASP language as JScript.

<%@ LANGUAGE = "JScript" %>

The second ASP line sets the value of the server-side session variable named sharedValue to the String representation of a random floating point number. The session variable persists on the server for the duration of the user's session.

<% Session("sharedValue") = Math.random().toString() %>

The following line sets the client-side JavaScript variable named sharedValue to the value of the server-side variable of the same name.

var sharedValue = "<% =Session("sharedValue") %>"

When the user enters his ID and password into the form and clicks the Login button, the handleLogin() function is invoked. This function invokes the calculateMD5Value() function to append the random value to the password and compute its MD5 digest value. This value is then provided as an argument to the sendMD5Value() function. The sendMD5Value() function replaces the password value entered into the form's password field with the MD5 value and submits the form.

Note that the md5.js file is included via a separate SCRIPT tag. This is the MD5 implementation that you can (and should) copy from Paul Johnston's site. The calculateMD5Value() function uses the calcMD5() function that is defined in md5.js.

On the server side, an ASP script named checkpassword.asp validates the user's ID and MD5 value. This script is as follows:

<%@ LANGUAGE = "JScript" %>
<!--#include file ="md5.inc"-->
<%
function calculateMD5Value() {
 var pw = "" + Application(Request.Form("userid"))
 pw += Session("sharedValue")
 return calcMD5(""+pw)
 }
clientPassword = Request.Form("password")
serverPassword = calculateMD5Value()
if(clientPassword == serverPassword) Response.Redirect("page1.html")
else Response.Redirect("tryagain.htm")
%>

The checkpassword.asp script includes the md5.inc file (on the server side) using the line:

<!--#include file ="md5.inc"-->

This file is the original md5.js file embedded in the ASP <% and %> tags. The .inc suffix follows the standard ASP terminology.

Another server-side script defines the calculateMD5Value() function. The expression Request.Form("userid") returns the user ID value entered by the user when he or she submitted the form. It is used to look up the real value of the user's password from an application variable. (If you intend to use ASP, you may want to implement an approach in which the script obtains the password through other means.) The password is stored using the pw variable. The random value that was originally sent to the user is retrieved from a session variable and appended to the password. Then the MD5 transformation of the combined password and random value is calculated and returned by the function.

function calculateMD5Value() {
 var pw = "" + Application(Request.Form("userid"))
 pw += Session("sharedValue")
 return calcMD5(""+pw)
 }

The heart of the authentication processing is performed by the four lines of code that follow the calculateMD5Value() function. The MD5 password that was submitted by the user is assigned to the clientPassword variable, and the server-calculated value is assigned to the serverPassword variable. These two values are then compared. If the values match, then the user's browser is redirected to page1.html, which is the first page of the protected Web application. Otherwise, the user's browser is redirected to tryagain.htm, which informs the user of the login failure and prompts the user to log in again.

clientPassword = Request.Form("password")
serverPassword = calculateMD5Value()
if(clientPassword == serverPassword) Response.Redirect("page1.html")
else Response.Redirect("tryagain.htm")

To tailor this script, just change page1.html to the first page of the Web application that you are trying to protect. If you are not using ASP, then you'll have to translate the ASP code to the language of your server-side scripting environment.

Back to the beginning 
 
More SuperScripter
Cool Tools
Spotlight on JavaScript
MD5 Discussions
MD5 Downloads

 More Resources  
Hack-Proof Servers: A CNET Topic Center
In Web Building
World Wide Web Security FAQ
From W3C
Secured Transmission (SSL, HTTPS)
From Web Developer's Virtual Library
Internet Security Review Online

  Orbitz: The Most Low Fares.  
Save an additional 10% on Air Fare  Get great Internet-only Hotel rates   Rent a Car for that weekend getaway

Featured services: Holiday Gift Guide | Price Drops | Top 5 Products | PC updates | Tech Jobs | Magazine offers   
  CNET Networks: CNET | GameSpot | mySimon | TechRepublic | ZDNetAbout CNET Networks |   

Contact us | Corrections | How to advertise | Support | CNET Jobs
Copyright ©1995-2001 CNET Networks, Inc. All rights reserved. Privacy policy