我的 API 在 api.domain.com
和前端 Angular 应用程序中运行
在 frontend.domain.com
CSRF 实现
- 在我的
api.domain.com
上启用了 CORS,并且只允许从frontend.domain.com
进行访问。 - CSRF token 在名为
X-CSRFTOKEN
的自定义响应 header 中设置 在 Angular 应用程序中,首先它会发出获取 CSRF token 的请求,然后 将其与每个
的请求 header 一起附加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 token ,因此每个请求都需要一个额外的 $http
调用,因为 CSRF token 会改变每个请求(无论如何要克服这个问题额外的 http 调用?)
我的问题是在跨域应用程序中添加 CSRF 保护的正确方法吗??
最佳答案
有什么方法可以克服这个额外的 HTTP 调用吗?
在我看来(或者我认为这是一般做法),在应用程序开始时,您应该执行一次 CSRF 调用并且您的服务器应该设置一个包含 CSRF token 的 cookie(因此您需要修改您的服务器为当前用户 session 生成单个 CSRF token 的代码),它应该对整个用户 session 有效。
然后,在您的 Angular 应用程序中,定义请求拦截器,您可以读取该 cookie 并将其设置为每个 POST 请求的 HTTP header 。
在这里阅读更多:https://en.wikipedia.org/wiki/Cross-site_request_forgery#Cookie-to-header_token
例如:(使用您现有的代码在响应 header 中传递 token )
假设,您的服务器每次都对现有 session 使用相同的 CSRF token 。
在您的 run
block 中,点击 API 并获取 token 并将其存储在 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 请求以添加该 token :
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 token 。
我需要一个 CSRF token 的 DRY 代码
但是如果您想要一个 DRY 代码,您希望在每个 POST 请求之前进行额外的 HTTP 调用以获取 CSRF token ,也可以使用拦截器或服务。
使用拦截器:
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 httpconfig
object. The function is free to modify theconfig
object or create a new one. The function needs to return theconfig
object directly, or a promise containing theconfig
or a new config object.
现在,在您的代码中的任何地方,只需直接调用 API,拦截器就会负责拉取新的 CSRF token 并将其设置为当前请求:
var request = {
method: "POST",
url: 'http://localhost:3000/csrftest'
}
$http(request).then(function (res) {
console.log(res);
}, function (err) {
console.log(err);
})
关于javascript - 具有跨域的angular js应用程序中的CSRF保护,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48729070/