如何使用XMLHTTPRequest处理CSRF令牌？

Question

我正在使用受CSRF保护的API。 因此，我需要执行get调用以获取CSRF令牌，然后传递相同的令牌来进行POST调用。

下面是我尝试的方法，但是由于POST调用的响应，我始终无法获得CSRF令牌验证。

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通话？

Answer 1

“ x-csrf-token”，“ fetch”用于GET方法来获取数据。 然后，您将获得csrf令牌值。 只需复制该代码，然后在您的代码中添加它就可以了。

Answer 2

我尝试对XMLHTTPRequest使用两个调用相同的xhr对象进行同步调用（获取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);
  }
}