Home arrow JavaScript arrow Page 4 - Building a CHAP Login System: Encrypting Data in the Client

Building a CHAP Login System: Encrypting Data in the Client

Web developers concerned with the security of their applications face one of their worst fears every time someone logs in: the possibility that passwords will be passed in plain text. Fortunately, there is a way to avoid this security risk. In this article, the first of three parts, Alejandro Gervasio helps you tackle this problem with a Challenge Handshake Authentication Protocol login system.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 38
August 29, 2005
  1. · Building a CHAP Login System: Encrypting Data in the Client
  2. · The basics of a CHAP login system: pros and cons of client-side data encryption
  3. · The making of a CHAP system: implementing a basic authentication mechanism
  4. · Completing the client code: defining the remaining JavaScript functions

print this article

Building a CHAP Login System: Encrypting Data in the Client - Completing the client code: defining the remaining JavaScript functions
(Page 4 of 4 )

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.value){showError(usrid,'Enter your ID');return false};

  // get 'password' field

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


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

  // get 'challenge' field

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


  // 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


  return true;



 * display error messages


function showError(obj,message){




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" />


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!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials