Javascript 如何在角度页面中设置CSRF令牌-OWASP CSRFGuard 3.0_Javascript_Angularjs_Csrf_Csrf Protection_Owasp

Javascript 如何在角度页面中设置CSRF令牌-OWASP CSRFGuard 3.0

javascript angularjs

Javascript 如何在角度页面中设置CSRF令牌-OWASP CSRFGuard 3.0,javascript,angularjs,csrf,csrf-protection,owasp,Javascript,Angularjs,Csrf,Csrf Protection,Owasp,我已经使用Spring MVC构建了我的restful服务：我正在使用OWASP CSRFGuard 3.0保护这些Restful服务不受CSRF的影响当使用简单的HTML-AJAX请求访问相同的Rest服务时，CSRF令牌已设置，我得到响应：下面的代码工作正常 <!DOCTYPE html> <html> <head> <title>REST Service with CSRF Protection</title> <s

我已经使用Spring MVC构建了我的restful服务：

我正在使用OWASP CSRFGuard 3.0保护这些Restful服务不受CSRF的影响

当使用简单的HTML-AJAX请求访问相同的Rest服务时，CSRF令牌已设置，我得到响应：

下面的代码工作正常

<!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>


带CSRF保护的休息服务
$（文档）.ready（函数（）{
$.ajax({
url:“http://localhost:8088/SpringRestCSRF/rest/rest/greeting",
键入：“POST”，
}).then（功能（数据、状态、jqxhr）{
$（'.greeting id'）。追加（数据）；
控制台日志（数据）；
});
});
回答是：

当我使用Angular尝试同样的事情时，令牌没有设置，我得到了CSRF保护错误

角度代码（我对角度代码非常陌生）


发送AJAX请求

来自服务器的数据：{{myData.fromServer}

Cookie值{{$cookies}
/*----------------*/
var-app=angular.module（'myapp'，[]）；
应用程序
.控制员(
“我的控制器”，
函数（$scope，$http）{
$scope.result=“”；
$scope.init=函数（）{
$http.defaults.xsrfHeaderName='X-CSRF-TOKEN'；
$http.defaults.xsrfCookieName='CSRF-TOKEN'；
};
$scope.testPost=函数（）{
$http
.邮政(
'http://localhost:8088/SpringRestCSRF/rest/rest/greeting')
.成功（功能（结果）{
$scope.result=结果；
$scope.myData.fromServer=数据；
});
};
});

有人能建议我如何设置角形标记吗

引自：

在寻找此问题的解决方案时，请阅读以下语句

跨站点请求伪造（XSRF）保护XSRF是由未经授权的站点可以获取用户的私有数据。有棱角的提供一种机制来对抗XSRF。执行XHR请求时， $http服务从cookie中读取令牌（默认情况下，XSRF-token）并将其设置为HTTP头（X-XSRF-TOKEN）。因为只有JavaScript 在您的域上运行的可以读取cookie，您的服务器可以确保XHR来自在您的域上运行的JavaScript。这个不会为跨域请求设置标头

要利用这一点，服务器需要在 JavaScript可读会话cookie，称为第一个HTTP上的XSRF-TOKEN 获取请求。在后续的XHR请求中，服务器可以验证 cookie与X-XSRF-TOKEN HTTP头匹配，因此请确保只有在您的域上运行的JavaScript才能发送请求。令牌对于每个用户都必须是唯一的，并且必须可由服务器（防止JavaScript生成自己的令牌）。我们建议令牌是站点身份验证的摘要为了增加安全性，饼干中加入了盐

可以使用xsrfHeaderName和 $httpProvider.defaults的xsrfCookieName属性位于配置时间，$http.defaults在运行时，或每请求配置反对

现在安格拉尔的情况发生了变化。。但是，如果您仍然使用旧版本，则可以使用：

var app = angular.module('myapp', []);

app.config(function($httpProvider) {
  $httpProvider.defaults.xsrfCookieName = 'XSRF-TOKEN';
  $httpProvider.defaults.xsrfHeaderName = 'X-XSRF-TOKEN';
});

app.controller ...etc

var app = angular.module('myapp', []);

app.config(function($httpProvider) {
  $httpProvider.defaults.xsrfCookieName = 'XSRF-TOKEN';
  $httpProvider.defaults.xsrfHeaderName = 'X-XSRF-TOKEN';
});

app.controller ...etc