如何在 Angular js 中设置 XSRF 保护？答案

【问题标题】：How to setup XSRF protection in angular js?如何在 Angular js 中设置 XSRF 保护？
【发布时间】：2014-04-23 05:02:55
【问题描述】：

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

【问题讨论】：

如何对用户进行身份验证？能否详细介绍一下申请？
我正在使用 Spring Security 对用户进行身份验证。我有一个jsp登录页面，其余的api（/app/rest/**）在spring security中被过滤。一旦用户登录，主页就会被加载，有一个控制器会带来所有用户信息并将其放入 sessionStorage。

标签： angularjs csrf

【解决方案1】：

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

当主页面在用户登录后加载时，您需要设置一个名为 XSRF-COOKIE 的会话 cookie。然后 AngularJS 将按照文档 (1) 中的说明在每个请求中附加一个标头来完成剩下的工作
您需要通过比较 cookie 中的令牌和标头中的令牌来验证后端对您的 REST API 的每次调用（例如使用拦截器）。该逻辑在您引用的页面上进行了描述

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

【讨论】：

感谢您的回复。我使用的是spring security 3.0。我打算升级它。之后会回复你。

【解决方案2】：

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

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

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

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

【讨论】：

你刚刚打破了使用 Angular 的方法来防止跨站点请求伪造的整个安全前提。使用 cookie 的全部意义在于，恶意 JavaScript 无法读取其内容以获取存储在其中的令牌。通过在 HTML 中提供令牌，恶意 JavaScript 现在可以从 DOM 中提取所述令牌，从而完全绕过安全性。
"有人可能会问为什么 CsrfToken 不存储在 cookie 中。这是因为存在已知的漏洞，其中标头（即设置 cookie）可以由另一个域设置。另一个缺点是通过删除状态（即超时），如果某些事情受到损害，您将失去强制终止令牌的能力。” source
@UncleCodeMonkey 应用程序必须能够访问 CSRF 令牌才能将其包含在 HTTP 请求标头中，对吗？因此，如果应用程序可以访问令牌，那么 同一域 上的恶意 JavaScript 也应该可以访问它，对吗？我并不是说这是一个更好的答案，但我不认为你提出的批评是有效的。如果应用程序通过 XSS 被利用，那么 CSRF 令牌也很可能被泄露，对吗？（我错过了什么吗？）

【解决方案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);
}

【讨论】：