AngularJS - 动态设置默认的 HTTP 头部

Question

为了克服csrf攻击，我必须在每个请求中都发送一个包含csrf-token值的标头，并从cookie中选择该值，如此处所述。由于这是在每个请求中都要完成的，所以我在主模块的运行函数中设置了$http的默认标头。

现在，如果打开了同一网站的新选项卡，则服务器会发出新的csrf令牌（在cookie中）。由于运行函数仅运行一次，因此csrf的默认标头将是旧的（对于旧选项卡），而新的csrf cookie将被发送到服务器，导致csrf不匹配。

如何在全局层面解决这个问题？

我想创建一个函数，每次调用$http时都会运行它，这样我就可以覆盖默认标头。

注意：我不想为每个$http请求设置此标头值。

（并非我认为这与此相关，但我正在使用ui-router）

编辑

这不仅限于csrf-token，我还想根据已登录的用户设置其他一些头部信息，必须动态完成（例如当一个用户登录并注销后，另一个用户登录时）。

- Junior Superman

---

使用 $http 拦截器 - harishr

下次打开选项卡时设置相同的cookie怎么样？为什么您的服务器会为每个请求提供不同的cookie？您可以定期更换cookie。 - bioball

CSRF令牌必须是随机值。如果它是固定的，那么它就没有任何作用。此外，CSRF令牌只发送一次。 - Junior Superman

Answer 1

您需要使用HTTP拦截器来在每个请求中实现此功能。关于http拦截器的更多信息，请阅读此处。

以下是一个典型的示例：

module.factory('xsrfTokenInterceptor', function ($q, $http) {
    return {
        'response': function (response) {
            var cookies = response.headers("Set-Cookie");
            var token = someCrazyParsing(cookies);
            $http.defaults.headers.common["X-CSRFToken"]=token;
            return response || $q.when(response);
        }  
    };
});
module.config(function($httpProvider){
    $httpProvider.interceptors.push('xsrfTokenInterceptor')
})

- harishr

Answer 2

关于标题，如何使用$http(config) 参数。

$scope.getWithHeader = function(){
    $http({
        method: 'GET',
        url: 'http://fiddle.jshell.net',
        headers: {
          'CustomHeader': 'HelloWorld'
        }
    }).success(function(){
        console.log("success");
    });
};

在jsFiddle上的示例代码

- fliedonion

---

我不想为每个HTTP请求设置头。 - Junior Superman