处理Angular 2 csrf的交叉起源

Question

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

1. 网络界面 [客户端] 是独立的Angular 2应用 [domain.com]
2. 持有客户凭据的 [代理] [网络界面密码] [domain2.com]
3. [API] 本身，其中包含auth服务器 [domain3.com]

申请流程如下：

1. 用户在 [客户端] 登录页面输入其凭据用户名+密码，然后将其发送到 [代理] 。
2. 然后代理会将凭据附加到请求并转发到 [API] 。
验证用户凭证后，
3. [API] 将能够获取访问权限+刷新令牌。将其返回 [代理]
4. [代理] 返回响应以及标题 [Set-Cookie：XSRF-TOKEN]
5. [客户端] 应该能够阅读 [XSRF-TOKEN] ＆amp;将其与每个请求一起发送为 [X-XSRF-TOKEN] 标题。

在auth服务器，代理和服务器上，一切都按预期工作客户端除了第5步：

Angular应该能够根据文档

自动处理

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

其中，angular将能够获取 [XSRF-TOKEN] Cookie的值，并创建 [X-CSRF-TOKEN] 标头以及每个请求我们通过申请做了。

虽然＆amp;当我使用不同的来源构建架构时，angular无法从其他来源读取cookie。

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

如果没有，那么当前的架构是错误的＆amp;我需要建立 [客户端] ＆amp; [proxy] 在同一个域中我避免使用此方法，因为我需要将表示层与任何后端代码分开。

那么，我的问题就是如何在这种情况下实现csrf保护？

Answer 1

在您的端口中，您提及＆＃34;访问+刷新令牌＆＃34;，这听起来像您正在使用OAuth。在跨域方案中，CSRF通常不是问题。如果您的客户端需要发送任何类型的HTTP标头进行身份验证，您可以安全地禁用CSRF。

CSRF攻击会使您的浏览器发送为[API]域存储的cookie，并且通过一些攻击，攻击者也可能发送＆＃34; X-Requested-With：XMLHttpRequest＆＃34;。但是，如果您的API还需要＆＃34;授权：承载...＆＃34;令牌，你可以放弃整个CSRF的滋扰。