我的API在api.domain.com
和前端角度应用程序中运行
正在frontend.domain.com
CSRF实施
api.domain.com
上启用了CORS,只允许从frontend.domain.com
访问。X-CSRFTOKEN
在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保护的正确方法吗?
答案 0 :(得分:2)
在我看来(或者我认为是一般做法),在应用程序开始时,你应该进行一次CSRF调用,你的服务器应该设置一个包含CSRF令牌的cookie(所以你需要修改你的服务器)用于为当前用户会话生成单个CSRF令牌的代码,该代码应对整个用户会话有效。
然后,在Angular应用程序中,定义请求拦截器,您可以读取该cookie并将其设置为每个POST请求的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');
});
});
然后添加一个拦截器并修改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令牌。
但是如果你想要一个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
:使用httpconfig
对象调用拦截器。该 函数可以自由修改config
对象或创建一个新对象。该 函数需要直接返回config
对象或promise 包含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);
})