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

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 / 26
August 29, 2005
TABLE OF CONTENTS:
  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
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Building a CHAP Login System: Encrypting Data in the Client - The making of a CHAP system: implementing a basic authentication mechanism
(Page 3 of 4 )

To start building the sample CHAP login system, what I’ll do first is code the server-side part. For this purpose, I’ll use PHP, but due to the simplicity of the script, you shouldn’t have trouble using your preferred server-side language.

For the system to be reasonably secure, first the server will send a random seed (known as challenge string) to the client for the JavaScript program to use. Doing so, I’m making sure that none of the same hashes will be transmitted back to the server when the login form is submitted. So, here is the PHP snippet that generate the challenge string:

// Begin of server-side processing

// start or resume a session

session_start();

// store random value in session variable

$_SESSION['challenge']=md5(rand(1,100000));

// End of server-side processing

The above script simply stores the MD5 hash of a semi-random value in a “challenge” session variable, which will be used within the JavaScript program as the challenge string to be concatenated to the MD5 of the password. Then the MD5 hash of both values combined will be sent back to the server, which in turn will authenticate to the client.

At first glance, you can see that the following expression:

md5(rand(1,100000));

won’t generate non-repetitive random values due to the limitations of the PHP “rand()” function. However, don’t feel concerned about this for the moment. I'm just setting up a basic random generator to implement the CHAP login system, so you can have a pretty clear idea of how it works.

With the server part already coded, the next thing to do is to write the set of JavaScript functions, which conjunctly implement the CHAP system. As I said before, I’ll delegate the task for calculating JavaScript-based MD5 hashes to cryptography experts; therefore, below is the definition for Paul Johnston’s MD5 library:

/*

 * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message

 * Digest Algorithm, as defined in RFC 1321.

 * Copyright (C) Paul Johnston 1999 - 2000.

 * Updated by Greg Holt 2000 - 2001.

 * See http://pajhome.org.uk/site/legal.html for details.

 */

/*

 * Convert a 32-bit number to a hex string with ls-byte first

 */

var hex_chr = "0123456789abcdef";

function rhex(num){

  str = "";

  for(j = 0; j <= 3; j++)

  str += hex_chr.charAt((num >> (j * 8 + 4)) & 0x0F) +

    hex_chr.charAt((num >> (j * 8)) & 0x0F);

  return str;

}

/*

 * Convert a string to a sequence of 16-word blocks, stored as an array.

 * Append padding bits and the length, as described in the MD5 standard.

 */

function str2blks_MD5(str){

  nblk = ((str.length + 8) >> 6) + 1;

  blks = new Array(nblk * 16);

  for(i = 0; i < nblk * 16; i++) blks[i] = 0;

  for(i = 0; i < str.length; i++)

    blks[i >> 2] |= str.charCodeAt(i) << ((i % 4) * 8);

    blks[i >> 2] |= 0x80 << ((i % 4) * 8);

    blks[nblk * 16 - 2] = str.length * 8;

  return blks;

}

/*

 * Add integers, wrapping at 2^32. This uses 16-bit operations internally

 * to work around bugs in some JS interpreters.

 */

function add(x, y){

 var lsw = (x & 0xFFFF) + (y & 0xFFFF);

  var msw = (x >> 16) + (y >> 16) + (lsw >> 16);

 return (msw << 16) | (lsw & 0xFFFF);

}

/*

 * Bitwise rotate a 32-bit number to the left

 */

function rol(num, cnt){

  return (num << cnt) | (num >>> (32 - cnt));

}

/*

 * These functions implement the basic operation for each round of the

 * algorithm.

 */

function cmn(q, a, b, x, s, t){

  return add(rol(add(add(a, q), add(x, t)), s), b);

}

function ff(a, b, c, d, x, s, t){

  return cmn((b & c) | ((~b) & d), a, b, x, s, t);

}

function gg(a, b, c, d, x, s, t){

  return cmn((b & d) | (c & (~d)), a, b, x, s, t);

}

function hh(a, b, c, d, x, s, t){

  return cmn(b ^ c ^ d, a, b, x, s, t);

}

function ii(a, b, c, d, x, s, t){

  return cmn(c ^ (b | (~d)), a, b, x, s, t);

}

/*

 * Take a string and return the hex representation of its MD5.

 */

function MD5(str){

  x = str2blks_MD5(str);

 var a =  1732584193;

  var b = -271733879;

  var c = -1732584194;

  var d =  271733878;

 for(var i = 0; i < x.length; i += 16){

   var olda = a;

   var oldb = b;

    var oldc = c;

    var oldd = d;

    a = ff(a, b, c, d, x[i+ 0], 7 , -680876936);

    d = ff(d, a, b, c, x[i+ 1], 12, -389564586);

    c = ff(c, d, a, b, x[i+ 2], 17,  606105819);

    b = ff(b, c, d, a, x[i+ 3], 22, -1044525330);

    a = ff(a, b, c, d, x[i+ 4], 7 , -176418897);

    d = ff(d, a, b, c, x[i+ 5], 12,  1200080426);

    c = ff(c, d, a, b, x[i+ 6], 17, -1473231341);

    b = ff(b, c, d, a, x[i+ 7], 22, -45705983);

    a = ff(a, b, c, d, x[i+ 8], 7 ,  1770035416);

    d = ff(d, a, b, c, x[i+ 9], 12, -1958414417);

    c = ff(c, d, a, b, x[i+10], 17, -42063);

    b = ff(b, c, d, a, x[i+11], 22, -1990404162);

    a = ff(a, b, c, d, x[i+12], 7 ,  1804603682);

    d = ff(d, a, b, c, x[i+13], 12, -40341101);

    c = ff(c, d, a, b, x[i+14], 17, -1502002290);

    b = ff(b, c, d, a, x[i+15], 22,  1236535329);

    a = gg(a, b, c, d, x[i+ 1], 5 , -165796510);

    d = gg(d, a, b, c, x[i+ 6], 9 , -1069501632);

    c = gg(c, d, a, b, x[i+11], 14,  643717713);

    b = gg(b, c, d, a, x[i+ 0], 20, -373897302);

    a = gg(a, b, c, d, x[i+ 5], 5 , -701558691);

    d = gg(d, a, b, c, x[i+10], 9 ,  38016083);

    c = gg(c, d, a, b, x[i+15], 14, -660478335);

    b = gg(b, c, d, a, x[i+ 4], 20, -405537848);

    a = gg(a, b, c, d, x[i+ 9], 5 ,  568446438);

    d = gg(d, a, b, c, x[i+14], 9 , -1019803690);

    c = gg(c, d, a, b, x[i+ 3], 14, -187363961);

    b = gg(b, c, d, a, x[i+ 8], 20,  1163531501);

    a = gg(a, b, c, d, x[i+13], 5 , -1444681467);

    d = gg(d, a, b, c, x[i+ 2], 9 , -51403784);

    c = gg(c, d, a, b, x[i+ 7], 14,  1735328473);

    b = gg(b, c, d, a, x[i+12], 20, -1926607734);

    a = hh(a, b, c, d, x[i+ 5], 4 , -378558);

    d = hh(d, a, b, c, x[i+ 8], 11, -2022574463);

    c = hh(c, d, a, b, x[i+11], 16,  1839030562);

    b = hh(b, c, d, a, x[i+14], 23, -35309556);

    a = hh(a, b, c, d, x[i+ 1], 4 , -1530992060);

    d = hh(d, a, b, c, x[i+ 4], 11,  1272893353);

    c = hh(c, d, a, b, x[i+ 7], 16, -155497632);

    b = hh(b, c, d, a, x[i+10], 23, -1094730640);

    a = hh(a, b, c, d, x[i+13], 4 ,  681279174);

    d = hh(d, a, b, c, x[i+ 0], 11, -358537222);

    c = hh(c, d, a, b, x[i+ 3], 16, -722521979);

    b = hh(b, c, d, a, x[i+ 6], 23,  76029189);

    a = hh(a, b, c, d, x[i+ 9], 4 , -640364487);

    d = hh(d, a, b, c, x[i+12], 11, -421815835);

    c = hh(c, d, a, b, x[i+15], 16,  530742520);

    b = hh(b, c, d, a, x[i+ 2], 23, -995338651);

    a = ii(a, b, c, d, x[i+ 0], 6 , -198630844);

    d = ii(d, a, b, c, x[i+ 7], 10,  1126891415);

    c = ii(c, d, a, b, x[i+14], 15, -1416354905);

    b = ii(b, c, d, a, x[i+ 5], 21, -57434055);

    a = ii(a, b, c, d, x[i+12], 6 ,  1700485571);

    d = ii(d, a, b, c, x[i+ 3], 10, -1894986606);

    c = ii(c, d, a, b, x[i+10], 15, -1051523);

    b = ii(b, c, d, a, x[i+ 1], 21, -2054922799);

    a = ii(a, b, c, d, x[i+ 8], 6 ,  1873313359);

    d = ii(d, a, b, c, x[i+15], 10, -30611744);

    c = ii(c, d, a, b, x[i+ 6], 15, -1560198380);

    b = ii(b, c, d, a, x[i+13], 21,  1309151649);

    a = ii(a, b, c, d, x[i+ 4], 6 , -145523070);

    d = ii(d, a, b, c, x[i+11], 10, -1120210379);

    c = ii(c, d, a, b, x[i+ 2], 15,  718787259);

    b = ii(b, c, d, a, x[i+ 9], 21, -343485551);

   a = add(a, olda);

   b = add(b, oldb);

    c = add(c, oldc);

    d = add(d, oldd);

  }

  return rhex(a) + rhex(b) + rhex(c) + rhex(d);

}

In simple terms, the above package of functions implements the cryptographic MD5 hash algorithm in JavaScript, useful when client-side data encryption is needed. Considering that user data can be hashed in the client through the powerful library you just saw, in the next few lines I’ll define a couple of additional JavaScript functions, which complete the client programming code required to implement the login system.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- More Top jQuery Tutorials for Beginners
- More Top jQuery Plugins for Menus
- Top jQuery Tutorials for Beginners
- New UI Framework and SDK for JavaScript Rele...
- JavaScript OpenPGP Tool, Node.js 0.6.3 Avail...
- Yahoo Releases Cocktails Language and Develo...
- Customizing jQuery Slideshows: Dynamic Contr...
- Customizing jQuery Slideshows: the animate()...
- Customizing jQuery Slideshows: slideUp() and...
- Customizing jQuery Slideshows: hide() and sh...
- Web Workers: Performing Calculations in Para...
- More Top JavaScript Frameworks and Libraries
- More Dynamic jQuery Styling Techniques
- The Top JavaScript Libraries
- The Top JavaScript Frameworks

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



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