0

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.

Hollywood
  • 156
  • 13

1 Answers1

2

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

chiliNUT
  • 17,144
  • 11
  • 59
  • 92
  • Interesting, didn't know about that functionality. It looks like all that really does is move the password and other variables from being sent in the URL itself to the body of XML request- still visible in the console details. From a security standpoint, does it matter which way I send the form details, the way in the OP vs your way? Or do I have all the security I need just from using HTTPS? – Hollywood Apr 17 '21 at 16:27
  • 1
    https should be enough security. For a RESTful API, a login endpoint should not be GET, and outside of some special cases, a POST request shouldn't have GET params, so thats what drove my decision there. Having the password show in the console is OK. Try logging in to some popular sites and you'll see that many of them expose your password in the console. I can see my password with Chase Bank and Outlook. Worth nothing that FB and google take it a step further and do obscure the password. – chiliNUT Apr 17 '21 at 18:07
  • see https://stackoverflow.com/questions/198462/is-either-get-or-post-more-secure-than-the-other, https://stackoverflow.com/questions/5868786/what-method-should-i-use-for-a-login-authentication-request, and https://stackoverflow.com/questions/611906/http-post-with-url-query-parameters-good-idea-or-not – chiliNUT Apr 17 '21 at 18:07