Secure Ajax Login

Before the summer vacation, I strolled online and went to coolcode somehow. CN, I saw andot's article "design and implementation scheme of Secure Login System", which was deeply inspired and decided to apply it in practice. However, the article only points out the general process and does not describe the specific operation method. After one afternoon and one night of exploration, I finally realized it. This article will introduce some of my thoughts and experiences in practice.

Generally, the login form submitted on a website with non-SSL encrypted connections uses plaintext to submit the password. After the server receives the password submitted by the client, it uses the corresponding encryption algorithm (such as MD5 or sha1, this document uses MD5 as an example) to compare it with the MD5 password in the database to determine whether the user is legal. However, in this case, once the plaintext password sent by the user is intercepted, the user's security is seriously threatened.

According to andot's article, the simplest and safest way to implement secure login using JavaScript + PHP is to provide random strings on the server and store them, in the client, JavaScript uses MD5 to merge random numbers and passwords, and submits MD5 strings to the server. The server also performs the same operation and compares them with the results submitted by the client, you can determine the user's identity. In this way, even if the data transmitted in the middle is intercepted, it is only the product of an MD5 password and a one-time random string re-MD5 operation. Once used, the random string will be destroyed immediately, it cannot be verified again and is useless. Even if a random string is intercepted in the middle, a valid Verification string cannot be submitted to the server without knowing the original password. The original password only appears on the client browser and does not pass the network transmission. The password used for each verification submission is different, and the server does not know what the original password is, to protect the original password.
After the general principle is clear, the following is the specific workflow.

First, enter the form on the client and click Submit to trigger JavaScript. Javascript asynchronously requests a random string from the server. The server generates a string, stores it in the session, and sends it back to the client as XML. The client's JavaScript receives the XML and parses it to obtain a random string.

Then, JavaScript obtains the original password entered by the user and performs MD5. Then, the MD5 password and the random string sent from the server are used for MD5 again.

After that, JavaScript submits the encrypted password and user name to the server. The server uses the random string in the session and the password in the database for MD5 and destroys the random string in the session, compare the results with the results submitted by the user to determine the user identity. If the verification succeeds, the server stores the user's status, account, and other information and sessions.
Finally, the server returns the login status to the client again through XML. If the return is successful, the client shows that the login is successful and the browser is redirected to the relevant page. The login process is now complete.

In fact, this process is very simple. to implement it, only five JavaScript Functions are required. One is used to create an XMLHTTPRequest object, the other is used to request a random string from the server, and the other is used to obtain the instant string, A user name and password used to send user submissions to the server, and a user name and password used to obtain logon results and determine whether redirection is required. If you need a progress bar or a display of the current logon status, you can add one or two more functions to the control page.

The following is the Ajax code:

/*
* Safe Login
* Version 0.2 copyright (c) dgwxx 2006.
* See http://www.dgwxx.net for more info.
*/

VaR XMLHTTP;

Setstatus ("Prepare...", "green ");

Function createxmlhttprequest (){
If (window. activexobject ){
XMLHTTP = new activexobject ("Microsoft. XMLHTTP ");
}
Else if (window. XMLHttpRequest ){
XMLHTTP = new XMLHttpRequest ();
}
}

Function requestrndcode (){
Setstatus ("Requesting verification code...", "green ");
Createxmlhttprequest ();

VaR url = "user. php? Action = rnds & timestamp = "+ new date (). gettime ();

XMLHTTP. Open ("get", URL, true );
XMLHTTP. onreadystatechange = processrndcode;
XMLHTTP. setRequestHeader ("Content-Type", "application/X-WWW-form-urlencoded ");
XMLHTTP. Send (null );
}

Function processrndcode (){
If (XMLHTTP. readystate = 4 & XMLHTTP. Status = 200 ){
Setstatus ("processing verification code...", "green ");
VaR rndcode = XMLHTTP. responsexml. getelementsbytagname ("rndcode") [0]. firstchild. Data;
Sendverifyrequest (rndcode );
}
}

Function sendverifyrequest (rndstr ){
Setstatus ("Send verification request...", "green ");
Createxmlhttprequest ();

VaR url = "user. php? Action = verify & timestamp = "+ new date (). gettime ();
VaR loginuser = Document. getelementbyid ("loginuser"). value;
VaR loginpwd = Document. getelementbyid ("loginpwd"). value;
VaR sendpwd = hex_md5 (rndstr + hex_md5 (loginpwd ));

XMLHTTP. Open ("Post", URL, true );
XMLHTTP. onreadystatechange = processverifyrequest;
XMLHTTP. setRequestHeader ("Content-Type", "application/X-WWW-form-urlencoded ");
XMLHTTP. Send ("loginuser =" + loginuser + "& loginpwd =" + sendpwd );
Setstatus ("waiting for the server to respond...", "green ");
Return false;
}

Function processverifyrequest (){
If (XMLHTTP. readystate = 4 & XMLHTTP. Status = 200 ){
Setstatus ("verifying...", "green ");
Var val = XMLHTTP. responsexml. getelementsbytagname ("passed") [0]. firstchild. Data;

If (val = "true "){
Setstatus ("Verification Successful...", "green ");
SetTimeout ("windows. Location. href = 'config. php'", 500 );
} Else {
Setstatus ("Verification Failed...", "Red ");
}
}
}

Function setstatus (message, fontcolor ){
Document. getelementbyid ("status"). innerhtml = "<font color =" + fontcolor + "> Security Verification status:" + message + "</font> ";
}

PHP code for allocating random strings:

<?
$ Rnd_code = MD5 ($ nowtime_stamp. $ sitename );
$ _ Session ['rnd _ user_key '] = $ rnd_code;
Header ("Content-Type: Application/XML ");
Echo '<? XML version = "1.0" encoding = "UTF-8"?>
<Response>
<Rndcode> '. $ rnd_code.' </rndcode>
</Response> ';
?>

 

 

========================================================== ========================

This article is reprinted. You must ensure that this article is complete and the original author information and the link to this Article are fully retained.

E-mail:Khler@163.com

QQ: 23381103

MSN:Pragmac@hotmail.com

Original article: http://www.phpli.com/ajax/yingyong_30.html

========================================================== ========================