Skip to content
Advertisement

Sending password over XML HTTP request post (HTTPS enabled)

Could use some help sorting out best practices with sending passwords in XML requests. I need to collect input from an HTML form, and if the provided password matches what’s on the server, insert the data from the form into a database. I’d like to do this via Javascript/XML requests so I can display a confirmation message in place using innerHTML and responseText without navigating to a new page. Here’s an example of what I have. HTTPS is enabled on this server.

HTML snippet:

<form  enctype='multipart/form-data' action='javascript:insert_and_confirm_data()'>
<input type='text' id='variable_1'>
<input type='text' id='variable_2>
<input type='password' id='password'>
<input type='submit'>

<div id='confirmation'></div>

Javascript function:

function insert_and_confirm_data() {
    if (this.readyState == 4 && this.status == 200) {
        document.getElementById("confirmation").innerHTML = this.responseText;
    }
    var password = document.getElementById("password").value;
    var variable_1 = document.getElementById("variable_1 ").value;
    var variable_2 = document.getElementById("variable_2").value;
    url = 'process_data.php?password=' + password + '&variable_1=' + variable_1 + '&variable_2=' + variable_2;
    xmlhttp.open("POST", url, true);
    xmlhttp.send();
}

PHP snippet (process_data.php):

$password = $_POST["password"];
if (password_verify($password, $uploadPass)) {
    // Get the other variables, insert them to a table, echo a confirmation message
} else {
    echo "<p>Incorrect password</p>";
}

Is this a “valid” and safe way of sending a password to be verified on the server? My gut says including the password in the XML URL is a no-no even with HTTPS enabled and using POST instead of GET. I know how to modify this to call the PHP script directly but I’d really like not to lose the ability to show results on the same page. But I don’t know the best practices of how to do it in this setup.

Advertisement

Answer

Since you are using POST there’s no reason to also use GET params. Instead, you can create a form encoded payload with FormData and post that. You probably want to give your form an id to select it with.

const formData = new FormData(document.querySelector('form'));
xmlhttp.open("POST", "process_data.php", true);
xmlhttp.send(formData);

Retrieving a FormData object from an HTML form

User contributions licensed under: CC BY-SA
1 People found this is helpful
Advertisement