Question

我正在使用angularJs，资源和泽西休息api开发一个应用程序。我想在我的项目中实现xsrf保护。请提出一个更好的例子。我在这里有一个例子，但它使用ColdFusion。 http://www.bennadel.com/blog/2568-Preventing-Cross-Site-Request-Forgery-CSRF-XSRF-With-AngularJS-And-ColdFusion.htm

Answer 1

与给定示例不同，您需要做两件事：

当用户登录后加载主页面时，您需要设置名为XSRF-COOKIE的会话cookie。然后AngularJS将通过在文档（1）
您需要通过比较Cookie中的令牌和标头中的令牌来验证后端中对其余API的每次调用（例如使用拦截器）。逻辑在您引用的页面上描述

（1）为了利用这一点，您的服务器需要在第一个HTTP GET请求中在名为XSRF-TOKEN的JavaScript可读会话cookie中设置令牌。 CSRF Protection section in Documentation

Answer 2

如果这是您在jsp / html页面中设置标题和令牌的代码：

<meta name="_csrf" content="${_csrf.token}"/>
<meta name="_csrf_header" content="${_csrf.headerName}"/>

您可以将所有ajax请求的csrf标头配置为flollows：

var token = $("meta[name='_csrf']").attr("content");
var header = $("meta[name='_csrf_header']").attr("content");

angular.module("app", [])
.config(['$httpProvider', function ($httpProvider) {
    $httpProvider.defaults.headers.common[header] = token;
}]);

然后您的http请求代码将如下所示：

$http({
    url: "loadMyData.htm",
    method: "POST",
}).success(function(data)
{
    console.log(data);
})

Answer 3

使用以下命令创建拦截器。

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
     const cookie = this.cookieService.get('XSRF-TOKEN');
    request = request.clone({
      headers: new HttpHeaders({
        'XSRF-TOKEN': cookie,

      }),
    withCredentials: true
 });
 return next.handle(request);
}

如何在角度js中设置XSRF保护？

3 个答案: