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

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

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

1. 当用户登录后加载主页面时，您需要设置名为XSRF-COOKIE的会话cookie。然后AngularJS将通过在文档（1）中声明的每个请求附加标题来完成剩下的工作
2. 您需要通过比较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标头，如下所示：

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);
}