为交叉源处理 Angular 2 个 csrf

Question

下面是我们应用程序的架构。

1. Web 界面 [客户端] 是独立的 Angular 2 应用程序 [domain.com]
2. 持有客户端凭证的[代理][网络界面秘密][domain2.com]
3. [API]本身有认证服务器[domain3.com]

申请流程如下：

1. 用户在[客户端]登录页面输入他的凭证用户名+密码，然后将其发送到[代理]。
2. 然后代理会将凭据附加到请求并将其转发到 [API].
3. [API] 将能够在验证用户凭据后获得访问+刷新令牌 & return 它到 [代理]
4. [proxy] return 响应连同 header [Set-Cookie:XSRF-TOKEN ]
5. [client] 应该能够读取 [XSRF-TOKEN] 并将其作为 [X-XSRF-TOKEN] header.

除第 5 步外，在身份验证服务器、代理和客户端上一切正常：

Angular 应该能够根据文档自动处理这个问题

{ provide: XSRFStrategy, useValue: new CookieXSRFStrategy('XSRF-TOKEN', 'X-CSRF-TOKEN')}

哪里 angular 将能够获取 [XSRF-TOKEN] cookie 的值并创建 [X-CSRF-TOKEN] header 以及我们通过应用程序提出的每个请求。

虽然 & 当我使用不同的来源构建架构时，angular 无法从另一个来源读取 cookie。

我面临的这种方法的问题是，由于服务器位于不同的域中，我无法通过 XSRFStrategy 提供程序读取 cookie。有没有办法读取该 cookie 的值？

如果不是，那么当前架构是错误的&我需要在同一个架构中构建[client] & [proxy]我避免使用这种方法的域，因为我需要将表示层与任何后端代码分开。

所以，我的问题是如何针对这种情况实施csrf保护？

Answer 1

在您的端口中您提到了 "access+refresh tokens"，这听起来像是您在使用 OAuth。在 cross-origin 场景中，CSRF 通常根本不是问题。如果您的客户端需要发送任何类型的 HTTP Header 来进行身份验证，您可以安全地禁用 CSRF。

CSRF 攻击会使您的浏览器发送为 [API] 域存储的 cookie，并且通过一些黑客攻击，攻击者还可能发送 "X-Requested-With: XMLHttpRequest"。但是如果你的 API 也需要一个 "Authorization: Bearer ..." 令牌，你可以放弃整个 CSRF 麻烦。