XMLHttpRequest: How do I pass 'POST' parameters safely (username, password)?

Question

I have this code:

function RequestLogin() 
  {
      var request = new XMLHttpRequest();
      request.onreadystatechange = function() {
          if (this.readyState == 4) 
          {
              alert(this.responseURL);
          }
      };

      request.open('POST', 'http://myserver/login');
      request.setRequestHeader('Content-type', 'multipart/form-data');
      request.send('user=myUsername&password=myPassword');
    }

Is this considered "safe" If I use HTTPS instead of http://myserver/login? What it's not clear to me are the parameters that I have to bind in the request.send, what am I doing there? Am I appending them in the URL, therefore they're visible if someone sniffs the request? I used to create Form Object and pass it there, but it's not working in this case.

It's the only way I found to pass parameters to POST request, but am I not exposing the parameters anyway by doing 'user=myUsername&password=myPassword'?

Thanks

CertainPerformance · Accepted Answer · 2022-12-03T16:59:43.937

1

If you POST to an HTTPS endpoint, yes, that'll be safe.

What it's not clear to me are the parameters that I have to bind in the request.send, what am I doing there?

You are sending that string as the request body., and you're sending it to the URL specified, request.open('POST', 'http://myserver/login');.

With HTTPS, both the path (/login) and request body are encrypted; snoopers will not be able to see the actual contents of either of them.

Am I appending them in the URL, therefore they're visible if someone sniffs the request?

No, they're not appended in the URL - if that was being done, the code would instead look something like

request.open('POST', 'http://myserver/login?foo=bar&baz=buzz');

Which would be quite strange for a POST - but if it was over HTTPS, it's still be safe, because all snoopers would be able to see is that you and https://myserver are having a conversation. They wouldn't be able to see which endpoint on myserver you're talking to (so, the /login? and everything that follows would be private), and they wouldn't be able to see the contents of the request either.

That said, it'd be better to .send the data as you're doing now

request.send(sensitiveInfo)

than to append the info to the URL because URLs are sometimes stored in the server logs. It's nowhere near as vulnerable as allowing any observer to see what's going on, but it's still not a good idea.

You also might consider whether you could use fetch instead of XMLHttpRequest - fetch is considered the more modern way of making requests. It uses Promises, is arguably more intuitive, and has been generally supported by browsers since 2015.

edited Dec 03 '22 at 16:59

answered Dec 03 '22 at 16:55

CertainPerformance

356,069
52
309
320

Thank you very much! I think what confused me is that the format of which I append the parameters to the request body is the same as the one you use for URLs GET `user=myUsername&password=myPassword` Thanks again! – thePOOOISE Dec 03 '22 at 16:59
Just wanted to add, should I create use FormData instead? Are there any difference? I tried to, but It didn't worked, I guess it depends on the /login endpoint of my server not expecting data as the FormData object? – thePOOOISE Dec 03 '22 at 17:00
FormData could work, see https://stackoverflow.com/a/25701405 - that said, if you have control over the endpoint, you might find it more handy to design it to accept JSON instead. – CertainPerformance Dec 03 '22 at 17:03
I'd like to do that, can you point me towards some resource on how to? I'm using NodeJS for the server code, for now I simply do `var postData = request.data.parse()` and I'm able to get the passed data as `postData['user']` and `postData['password']`. – thePOOOISE Dec 03 '22 at 17:10
It entirely depends on your backend. With Express, for example, you'd just need `.get('/login', (req, res) => { const { user, password } = req;` to start with, and to send data from the client you'd do `fetch('/login', { method: 'POST', body: JSON.stringify(payload), headers: { 'content-type': 'application/json' }})` – CertainPerformance Dec 03 '22 at 17:26

XMLHttpRequest: How do I pass 'POST' parameters safely (username, password)?

1 Answers1