如何使用 XMLHTTPRequest 处理 CSRF 令牌？答案

【问题标题】：How to handle CSRF token using XMLHTTPRequest?如何使用 XMLHTTPRequest 处理 CSRF 令牌？
【发布时间】：2018-07-17 12:17:37
【问题描述】：

我正在使用受 CSRF 保护的 API。所以我需要做一个 get 调用来获取 CSRF 令牌，然后传递相同的令牌来做 POST 调用。

以下是我尝试过的方式，但我总是得到 CSRF 令牌验证失败作为 POST 调用的响应。

var tryout = new XMLHttpRequest();
tryout.open("GET", "/api/1.0/csrf");
tryout.withCredentials = true;
tryout.setRequestHeader("x-csrf-token", "fetch");    
tryout.setRequestHeader("Accept", "application/json");
tryout.setRequestHeader("Content-Type", "application/json; charset=utf-8");
tryout.onreadystatechange = function () {
    console.log(this);
    var csrfToken = this.getResponseHeader('x-csrf-token');
    if(tryout.readyState == 4){
        console.log(csrfToken);
        tryout.open('POST', '/api/1.0/create');
        tryout.setRequestHeader('x-csrf-token', this.getResponseHeader('x-csrf-token'));            
        tryout.onreadystatechange = function () {
            console.log("call 2");
            console.log(this.responseText);
        };
        tryout.send();
    }
};
tryout.send();

我怀疑可能是 POST 调用正在启动新会话，因此 CSRF 对该会话无效。

请指导我如何在同一会话中进行两次 xhr 调用？

【问题讨论】：

标签： javascript xmlhttprequest csrf

【解决方案1】：

"x-csrf-token", "fetch" 用于 GET 方法获取数据。然后您将获得 csrf 令牌值。只需复制它并将其添加到您的代码中即可。

【讨论】：

【解决方案2】：

我尝试使用相同的 xhr 对象与 XMLHTTPRequest 同步调用（获取 csrf 令牌和下一个 http post 调用在标头中传递 csrf 令牌并且它有效。下面是示例代码。

var res = null;
var tryout = new XMLHttpRequest();  
tryout.open("GET", "/odata/1.0/service.svc", false);
tryout.withCredentials = true;
tryout.setRequestHeader("x-csrf-token", "fetch");    
tryout.setRequestHeader("Accept", "application/json");
tryout.setRequestHeader("Content-Type", "application/json; charset=utf-8");
tryout.send(null);

if(tryout.readyState === 4){
  var csrfToken = tryout.getResponseHeader('x-csrf-token');   

  tryout.open('POST', '/odata/1.0/service.svc/Clients', false);
  tryout.setRequestHeader('x-csrf-token', csrfToken);       
  tryout.setRequestHeader("Content-Type", "application/json; charset=utf-8");
  tryout.setRequestHeader("Accept", "application/json");

  tryout.send(JSON.stringify(obj));

  if(tryout.readyState === 4){
      res = JSON.parse(this.responseText);
  }
}

【讨论】：

什么是obj？它在任何地方都有定义吗？
是的 McJohnson，obj 已定义，它的请求正文。不知何故，我错过了在这里复制 sn-p 的那部分。