XMLHttpRequest如何安全传递POST登录参数？HTTPS下是否安全？

先看你编写的代码：

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');
}

下面逐个解答你的问题：

1. 改为HTTPS后是否安全？ #

改成HTTPS后，整个请求的传输链路会被加密，包括请求体里的账号密码，中间人无法嗅探到明文内容，这部分是安全的。但你代码里存在一个格式不匹配的问题：明明发送的是user=xxx&password=xxx这种键值对格式，却设置了multipart/form-data的Content-Type，这种不匹配可能导致后端解析失败，但不影响HTTPS的加密特性。

2. send里的参数会不会附加到URL被嗅探？ #

不会。POST请求通过send()传递的参数会放在请求体中，只会出现在HTTP报文的body部分，不会拼接到URL上。只有GET请求的参数才会直接附加在URL后面，所以这部分无需担心。

3. 当前传递参数的方式会不会暴露用户名和密码？ #

如果使用HTTPS传输，请求体是加密状态，不会被明文暴露。但要注意两个细节：

• 前面提到的Content-Type不匹配问题，可能导致后端无法正确获取参数，进而登录失败；
• 绝对不能在前端代码中硬编码真实的用户名和密码（示例中的测试值仅作演示，实际开发这么写等于直接把账号密码暴露给查看源码的人）。

4. 传递Form Object失败的解决办法 #

要正确传递FormData，需注意两个关键点：

• 不要手动设置Content-type，浏览器会自动为FormData生成带有boundary分隔符的正确multipart/form-data请求头；
• 使用FormData的append方法添加参数，示例代码如下：

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

    var formData = new FormData();
    formData.append('user', 'myUsername');
    formData.append('password', 'myPassword');

    request.open('POST', 'https://myserver/login');
    // 无需手动设置Content-Type，浏览器会自动处理
    request.send(formData);
}

内容的提问来源于stack exchange，提问作者thePOOOISE