Question

我正在使用在server.js中将app.get('/login' ...更改为app.post('/login' ...上的https://github.com/passport/express-4.x-local-example(just构建的节点服务器。

在哈巴狗中，我基于https://www.w3schools.com/howto/howto_css_login_form.asp创建了一个带有登录表单的页面，当我提交表单（将输入名称更改为用户名和密码method="post", action "/login"）时，一切正常。由于我不想在没有身份验证的情况下在主体中发送密码，因此我需要在发布请求中添加基本身份验证。我该怎么办？

我尝试将事件侦听器提交添加到我的表单，并使用event.preventDefault();停止默认操作。然后，我创建了new XMLHttpRequest()，将请求标头设置为基本身份验证，并将XML请求发送到服务器。使用控制台时，我可以验证请求是否已完成，但是来自服务器的响应（应重定向）返回到我的XML请求，而不是实际重定向页面。当我尝试通过POSTMAN发送相同的POST请求时，响应为重定向页面。如果我删除事件侦听器，则表单将被提交并且一切正常（但不添加auth标头）。

  doctype html
  head
    meta(charset='UTF-8')
    title Login
    link(rel='stylesheet', href='stylesheets/main.css')
    link(rel='icon', type="image/png", href='favicon.png')
  body 
    form(action='/login', id='form1' method='post')
      .imgcontainer
        img.avatar(src='images/img_avatar2.png', alt='Avatar')
      .container
        label(for='username')
            b Username
        input(type='text', placeholder='Enter Username', name='username', autofocus, required, id='uname')
        label(for='password')
            b Password
        input(type='password', placeholder='Enter Password', name='password', required, id='pword')
        button(type='submit') Login

  script. 
       document.getElementById("form1").addEventListener("submit",   submitFunction);

       function submitFunction() {
            event.preventDefault(); 
            var usr=document.getElementById('uname').value;
            var pwd=document.getElementById('pword').value;
            var obj = {'username' : usr, 'password' : pwd};
            var request = new XMLHttpRequest();
            request.open("POST", "/login", false);
            request.setRequestHeader('Authorization', 'Basic Y2xpZW50SUQ6c2VjcmV0S2V5'); 
            request.setRequestHeader('Content-Type', 'application/json');
            request.send(JSON.stringify(obj));
       }

Answer 1

我找到了包括标头的解决方法。首先，我使用了错误的护照策略。我使用本地，应该使用（'passport-http'）。BasicStrategy。这是一个例子 https://github.com/passport/express-3.x-http-basic-example 我在XMLHttpRequest中添加了一个占位符以用于响应，所以哈巴狗的脚本部分现在看起来像

script.
    document.getElementById("form1").addEventListener("submit", submitFunction); 
    function submitFunction() {
         event.preventDefault();   
         var username = document.getElementById('uname').value;
         var password = document.getElementById('pword').value;
         var request = new XMLHttpRequest();
         request.onreadystatechange = function() {
             if (this.readyState == 4) {
                    // Typical action to be performed when the document is ready:
                    // accept and redirect code in here based on the answer from the server
             }
         };
         request.open("POST", "/login", false);
         request.setRequestHeader('Authorization', "Basic " + btoa(username + ":" + password)); 
         request.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
         request.send();
       }

当然，正如Absor所说的那样（谢谢你），它仍然只是纯文本，因此也许不会为我的请求增加安全性。

Answer 2

不需要身份验证，因为没有加密，HTTP请求仍然是纯文本，因此不会确保您的请求的安全性。

加密将使您的请求变得安全，您的页面和API都应使用HTTPS，并且在使用加密时，您不需要其他身份验证。

如何向表单添加基本身份验证标头

2 个答案: