Building a CHAP Login System: Encrypting Data in the Client

To finish writing the required JavaScript code, the next thing to be done is define the “doCHAP()” function, which will perform the MD5 hash of the given password, then append to it the challenge string sent by the server, and finally apply again the MD5 algorithm on both concatenated values. Additionally, rough data validation will be performed trough the “showError()” function. With reference to this, here is the list of relevant functions:

/*

 * verify form values &

 * implement the Challenge Handshaking Authentication Protocol

 */

function doCHAP(){

  // get 'userid' field

 var usrid=document.getElementById('userid');

 if(!usrid){return};

  if(!usrid.value){showError(usrid,'Enter your ID');return false};

  // get 'password' field

  var psw=document.getElementById('passwd');

  if(!psw){return};

  if(!psw.value){showError(psw,'Enter your password');return false};

  // get 'challenge' field

  var chlng=document.getElementById('challenge');

  if(!chlng){return};

  // calculate MD5 hash of password and concatenate challenge value

  // next calculate MD5 hash of combined values

  chlng.value=MD5(MD5(psw.value)+'<?php echo $_SESSION['challenge']?>');

  // clear password field

  psw.value='';

  return true;

}

/*

 * display error messages

 */

function showError(obj,message){

  alert(message);

  obj.focus();

}

As you can see, the above code speaks for itself. The “doCHAP()” function simply obtains the values of “user ID” and “password” fields that usually compose a regular login form, and applies basic validation on the data by displaying silly alerts through the “showError()” function. Then, as I described before, the challenge string is appended to the hashed password, and next the MD5 function is again applied to the combined strings. The resulting value of this operation is assigned to a “challenge” hidden field for being transmitted to the server. The following line of code performs those operations:

chlng.value=MD5(MD5(psw.value)+'<?php echo $_SESSION['challenge']?>');

Of course the code would be rather incomplete without showing the corresponding login form:

<form method="post" action="chap.php">

User ID <input type="text" name="userid" id="userid"/><br />

Password <input type="password" name="passwd" id="passwd"/><br />

<input type="hidden" name="challenge" id="challenge" />

<input type="submit" name="login" value="Log In" />

</form>

Now hopefully you have a clear idea of how a simple CHAP login system can be implemented. Notice that whenever the form is submitted, the password is never transmitted in plain text to the server. Instead, a hashed value is sent out. Quite good, huh?

Wrapping up

That’s about it for now. Despite the easiness of the given example, I provided you with enough code to play with and start building your own CHAP system. However, there is a long road ahead of us. In the next part of the series, I’ll be showing the code that runs on the server, in order to carry out client authentication, as well as setting up the basis for implementing a more efficient login system. Meet you in the next part!