CSRF在Angular JS应用中使用跨域的保护

Question

我的API在api.domain.com中运行，前端Angular应用程序运行 在frontend.domain.com

下运行

CSRF实施

1. 在我的api.domain.com上启用了CORS，并且仅允许从frontend.domain.com允许访问。
2. CSRF令牌设置在称为X-CSRFTOKEN
的自定义响应标头中

3. 在Angular App中，首先会要求获得CSRF令牌和每个post请求

   将其连接到请求标头

   //get CSRF token
   $http.get("http://localhost:3000/").then(function (response) {
       console.log(response.headers('X-CSRFTOKEN'));
       var request = {
           method: "POST",
           url: 'http://localhost:3000/csrftest',
           headers: {
               "CSRF-Token": response.headers('X-CSRFTOKEN')
           }
       }
       //post request with CSRF token in header
       $http(request).then(function (res) {
           console.log(res);
       }, function (err) {
           console.log(err);
       })
   }, function (err) {
       console.log("Error", err);
   });
   

一个缺点是，我需要为每个请求获取CSRF令牌，因此每个请求都需要额外的$http呼叫，因为CSRF令牌正在更改每个请求(无论如何是否在那里要克服此额外的HTTP调用？(

我的问题是在跨域应用中添加CSRF保护的正确方法??

Answer 1

是否有任何方法可以克服此额外的http调用？

在我的视图中(或我所看到的一般实践(，在应用程序的开始时，您应该进行一次CSRF调用，您的服务器应设置一个包含CSRF代币的cookie(因此您需要修改服务器为当前用户会话生成单个CSRF令牌的代码，该代码应对整个用户会话有效。

然后，在您的Angular应用程序中，定义请求拦截器，您可以阅读该cookie并将其设置为每个帖子请求的HTTP标头。

在这里阅读更多信息：https：//en.wikipedia.org/wiki/cross-site_request_forgery#cookie to-header_token

例如 ：(使用您现有的响应标记中传递令牌的代码(

假设您的服务器每次都使用相同的CSRF令牌。

在您的run块中，击中API并获取令牌并将其存储在localStorage中：

angular.module('myApp').run(function ($http) {
    // This will be executed once the application loads 
    $http.get('http://localhost:3000/').then(function (response) {
        // store the token in the local storage for further use
        localStorage.csrfToken = response.headers('X-CSRFTOKEN');
    });
});

然后添加一个拦截器并修改邮政请求以添加令牌：

angular.module('myApp').config(function ($httpProvider) {
    $httpProvider.interceptors.push(function() {
        return {
            'request': function(config) {
                if (config.method === 'POST') {
                    config.headers['CSRF-Token'] = localStorage.csrfToken;
                }
                return config;
            }
        };
    });
});

现在，您的每个帖子请求将被拦截，CSRF令牌将被设置。

我需要CSRF令牌的干码

但是，如果您想要一个干燥的代码，您想在每个邮政请求之前进行额外的HTTP呼叫，以获取CSRF令牌，也可以使用Interceptors或服务。

使用拦截器：

angular.module('myApp').config(function ($httpProvider) {
    $httpProvider.interceptors.push(function($http, $q) {
        function doAnotherCallToGetTokenAndSetItToRequest(config) {
            var defer = $q.defer();
            $http.get("http://localhost:3000/").then(function (response) {
                config.headers['CSRF-Token'] = response.headers('X-CSRFTOKEN');
                defer.resolve(config);
            });
            return defer.promise;
        }
        return {
            'request': function(config) {
                if (config.method === 'POST') {
                    return doAnotherCallToGetTokenAndSetItToRequest(config);
                }
                return config;
            }
        };
    });
});

来自文档：

request：拦截器被HTTP config对象打电话。这 函数可以免费修改config对象或创建一个新对象。这 功能需要直接返回config对象或承诺 包含config或新的配置对象。

现在，代码中的任何地方，只需直接调用API，拦截器将负责拉动新的CSRF令牌并将其设置为当前请求：

var request = {
    method: "POST",
    url: 'http://localhost:3000/csrftest'
}
$http(request).then(function (res) {
    console.log(res);
}, function (err) {
    console.log(err);
})