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.

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

Advertisement

Answer