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.
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);