angular跨域js应用中的CSRF保护

Question

我的 API 在 api.domain.com 和前端 angular 应用程序中是运行运行在 frontend.domain.com

之下

CSRF 实现

在我的 api.domain.com 上启用了 CORS，并且只允许来自 frontend.domain.com 的访问。
CSRF 令牌在名为 X-CSRFTOKEN

在Angular应用程序中，首先它会请求获取CSRF令牌，然后将其与每个 post 请求

的请求 header 一起附加

//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打电话？）

我的问题是在 Cross-domain 应用程序中添加 CSRF 保护的正确方法吗？？

Answer 1

有什么方法可以克服这个额外的 HTTP 调用吗？

在我看来（或者我认为这是一般做法），在应用程序开始时，您应该执行一次 CSRF 调用并且您的服务器应该设置一个包含 CSRF 令牌的 cookie（因此您需要修改您的服务器代码为当前用户生成单个 CSRF 令牌 session)，它应该对整个用户有效 session.

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

在此处阅读更多内容：https://en.wikipedia.org/wiki/Cross-site_request_forgery#Cookie-to-header_token

例如：（使用您现有的传递令牌响应的代码header）

假设，您的服务器每次都对现有 session.

使用相同的 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');
    });
});

然后添加拦截器并修改 POST 请求以添加该令牌：

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;
            }
        };
    });
});

现在您的每个 POST 请求都将被拦截并设置 CSRF 令牌。

我需要 CSRF 令牌的 DRY 代码

但是如果你想要一个 DRY 代码，你想要在每个 POST 请求之前进行额外的 HTTP 调用以获取 CSRF 令牌，这也可以使用拦截器或服务。

使用拦截器：

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;
            }
        };
    });
});

来自docs：

request: interceptors get called with a http config object. The function is free to modify the config object or create a new one. The function needs to return the config object directly, or a promise containing the config or a new config object.

现在，在您的代码中的任何位置，只需直接调用 API，拦截器就会负责提取新的 CSRF 令牌并将其设置为当前请求：

var request = {
    method: "POST",
    url: 'http://localhost:3000/csrftest'
}

$http(request).then(function (res) {
    console.log(res);
}, function (err) {
    console.log(err);
})

angular跨域js应用中的CSRF保护

CSRF protection in angular js application with cross domain

javascript

csrf

cross-domain

express

angularjs

有什么方法可以克服这个额外的 HTTP 调用吗？

我需要 CSRF 令牌的 DRY 代码

使用拦截器：