如何在角度页面中设置CSRF令牌-OWASP CSRFGuard 3.0 [英] How to set CSRF token in angular page - OWASP CSRFGuard 3.0
问题描述
-
我已经使用Spring MVC构建了我的Restful服务: http://localhost:8088/SpringRestCSRF/rest/rest/greeting
I have used Spring MVC to build my restful services: http://localhost:8088/SpringRestCSRF/rest/rest/greeting
我正在使用OWASP CSRFGuard 3.0保护这些Restful服务免受CSRF的侵害.
I am using OWASP CSRFGuard 3.0 to protect these Restful services from CSRF.
使用简单的HTML访问相同的Rest服务时-AJAX请求-CSRF令牌已设置，并且得到响应:
When accessing the same Rest service using a simple HTML - AJAX request - CSRF token is getting set and I am getting the response:
下面的代码运行正常.
<!DOCTYPE html>
<html>
<head>
<title>REST Service with CSRF Protection</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- First Get call OWASP CSRFGuard JS servlet which sets the token -->
<script src="http://localhost:8088/SpringRestCSRF/CsrfJavaScriptServlet"></script>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
url : "http://localhost:8088/SpringRestCSRF/rest/rest/greeting",
type: 'POST',
}).then(function(data, status, jqxhr) {
$('.greeting-id').append(data);
console.log(data);
});
});
</script>
</head>
<body>
<div>
<p class="greeting-id">The Response is is : </p>
</div>
</body>
</html>
- 当我使用Angular尝试相同的操作时，令牌未设置，并且出现CSRF保护错误.
Angular代码(我是Angular的新手)
Angular Code ( I am very new to Angular)
<!DOCTYPE html>
<html lang="en">
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<!-- Assumption - First Get call to OWASP CSRFGuard JS servlet which sets the token -->
<script src="http://localhost:8088/SpringRestCSRF/CsrfJavaScriptServlet"></script>
</head>
<body ng-app="myapp">
<div ng-controller="MyController">
<button ng-click="testPost(item, $event)">Send AJAX Request</button>
<br /> Data from server: {{myData.fromServer}}
<br /> Cookie Value {{$cookies}}
</div>
<script>
/*----------------*/
var app = angular.module('myapp', []);
app
.controller(
'MyController',
function($scope, $http) {
$scope.result = "";
$scope.init = function() {
$http.defaults.xsrfHeaderName = 'X-CSRF-TOKEN';
$http.defaults.xsrfCookieName = 'CSRF-TOKEN';
};
$scope.testPost = function() {
$http
.post(
'http://localhost:8088/SpringRestCSRF/rest/rest/greeting')
.success(function(result) {
$scope.result = result;
$scope.myData.fromServer = data;
});
};
});
</script>
</body>
</html>
有人可以建议我如何在Angular中设置令牌.
Can someone suggest how should I set the Token in Angular.
来自Angular的报价:
Quote from Angular:
在寻找此问题的解决方案时，请阅读以下声明.
While searching a solution to this problem, read the below statement.
跨站点请求伪造(XSRF)保护XSRF是一种通过 未经授权的网站可以获取您用户的私人数据.角度的 提供了一种抵抗XSRF的机制.在执行XHR请求时， $ http服务从cookie中读取令牌(默认情况下为XSRF-TOKEN) 并将其设置为HTTP标头(X-XSRF-TOKEN).由于只有JavaScript 在您的域上运行的服务器可以读取Cookie，您的服务器可以 确保XHR来自您域中运行的JavaScript.这 标头不会为跨域请求设置.
Cross Site Request Forgery (XSRF) Protection XSRF is a technique by which an unauthorized site can gain your user's private data. Angular provides a mechanism to counter XSRF. When performing XHR requests, the $http service reads a token from a cookie (by default, XSRF-TOKEN) and sets it as an HTTP header (X-XSRF-TOKEN). Since only JavaScript that runs on your domain could read the cookie, your server can be assured that the XHR came from JavaScript running on your domain. The header will not be set for cross-domain requests.
要利用此优势，您的服务器需要在 第一个HTTP上称为XSRF-TOKEN的JavaScript可读会话cookie GET请求.在随后的XHR请求中，服务器可以验证 Cookie与X-XSRF-TOKEN HTTP标头匹配，因此请确保 只有您域中运行的JavaScript才能发送请求. 令牌对于每个用户必须是唯一的，并且必须由 服务器(以防止JavaScript编写自己的令牌).我们 建议令牌是您网站身份验证的摘要 饼干加盐以增强安全性.
To take advantage of this, your server needs to set a token in a JavaScript readable session cookie called XSRF-TOKEN on the first HTTP GET request. On subsequent XHR requests the server can verify that the cookie matches X-XSRF-TOKEN HTTP header, and therefore be sure that only JavaScript running on your domain could have sent the request. The token must be unique for each user and must be verifiable by the server (to prevent the JavaScript from making up its own tokens). We recommend that the token is a digest of your site's authentication cookie with a salt for added security.
标头名称可以使用xsrfHeaderName和 $ httpProvider.defaults的xsrfCookieName属性位于 配置时，运行时$ http.defaults或按请求配置 对象.
The name of the headers can be specified using the xsrfHeaderName and xsrfCookieName properties of either $httpProvider.defaults at config-time, $http.defaults at run-time, or the per-request config object.
推荐答案
现在使用angular2时，情况已经发生了变化..但是，如果您仍然使用旧版本，则可以使用以下方法:
now with angular2 the things has changed .. but if you still use the old version , you can use this :
var app = angular.module('myapp', []);
app.config(function($httpProvider) {
$httpProvider.defaults.xsrfCookieName = 'XSRF-TOKEN';
$httpProvider.defaults.xsrfHeaderName = 'X-XSRF-TOKEN';
});
app.controller ...etc
这篇关于如何在角度页面中设置CSRF令牌-OWASP CSRFGuard 3.0的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
