Question

As we all know that using GET method for login (or sending sensitive information) is not suggested. I want to create login functionality using XMLHTTPRequest. Following are my steps:

1. User enters username and password and clicks on Submit button
2. Submit button invokes an XMLHTTPRequest
3. XMLHTTPRequest sends the credential to a PHP page which will verify
   it
4. If credentials are right then create session otherwise show error message
   without refreshing the login screen.

My question is:

How can I transfer login credentials to a PHP page using POST (securely)? If I am using the open method as shown below with GET then I think it is not secure. Can I replace GET with POST? If yes, then how to transfer credentials?

xmlhttp.open("GET","verifyCredentials.php",true);

Answer 1

To post data using POST method, set the method in open to POST, set the Content-Type request header field to application/x-www-form-urlencoded, encode your data accordingly, and pass it as parameter value to send:

xmlhttp.open("POST", "verifyCredentials.php", true);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlhttp.send(data);

You can use the encodeURIComponent function to encode your data:

function formUrlEncoded(params) {
    var data = "";
    for (var name in params) {
        if (!params.hasOwnProperty(name)) continue;
        if (data.length) data += "&";
        data += (encodeURIComponent(name) + "=" + encodeURIComponent(param)).replace(/%20/g, "+");
    }
    return data;
}
var data = formUrlEncoded({"foo":"bar", "baz":"quux"});

Note that with this the data is still transferred unprotected against eavesdropping.