Angularjs 如何对跨域请求实施csrf保护

我有两个web应用程序，一个用于AngularJS中的web UI，另一个用于Java中的其余web服务。两者都部署在不同的域上

应用程序使用cookie进行身份验证。每当用户输入有效的用户名和密码时，服务器返回一个只包含令牌的http cookie，该cookie将在所有请求中传递。我在两个应用程序上都启用了CORS，这就是会话cookie工作正常的原因

现在，我正在尝试为这个添加CSRF保护。我尝试使用csrf cookie，服务器中的csrf cookie（而不仅仅是httponly）将作为REST响应的一部分发送，UI将从cookie中读取值，并将其传递到其他REST调用的csrf令牌头中

我所面临的这种方法的问题是，由于服务器位于不同的域中，我无法在AngularJs中使用$cookies读取cookie。有没有办法读取cookie的值？ 如果没有，那么我可以用其他方式实现CSRF吗

我还尝试在浏览器中的Web UI上创建csrf cookie，但浏览器不会将cookie发送到Web服务，因为它位于不同的域中

---

因此，我的问题是如何在这种情况下实施csrf保护？

Angularjs内置了对csrf的支持，但不幸的是，它无法跨域工作，因此您必须构建自己的

在第一次请求时，我首先在头和cookie中返回一个随机令牌，从而使它工作。要读取标题，您需要将其添加到

访问控制公开标题

。这将添加到所有帖子中

$http.get('url').
    success(function(data, status, headers) {
        $http.defaults.headers.post['X-XSRF-TOKEN'] = headers('XSRF-TOKEN');
    });

---

然后在服务器上，您可以将cookie值与标头中的值进行比较，以确保它们相同。

$http docs:Angular提供了一种机制来对抗XSRF。执行XHR请求时，但不会为跨域请求设置

---

这是一个小库，放在一起可能会帮助您

您在这方面做得很好：

我还尝试在浏览器中的Web UI上创建csrf cookie，但浏览器不会将cookie发送到Web服务，因为它位于不同的域中

CSRF cookie并不意味着“发送”到服务器，而是意味着由客户端读取，然后在自定义HTTP请求头中提供。来自其他域的伪造GET请求（由HTML标记触发，如

）无法设置自定义头，因此您可以这样断言请求来自域上的javascript客户端

下面是如何实现您正在研究的想法，假设您有

api.domain.com

和

ui.domain.com

：

1） 用户从

ui.domain.com

2） 用户将身份验证信息从Angular客户端发布到

api.domain.com

2） 使用名为

authCookie

的

HttpOnly

身份验证cookie和自定义头（例如

X-Auth-cookie

）进行服务器回复，其中该头的值是链接到由

authCookie

标识的会话的唯一值

3） Angular客户端读取

X-Auth-Cookie

头值，并将该值存储在其域

XSRF-TOKEN

Cookie中，

ui.domain.com

• 现在你有了：

  • ui.domain.com

  • api.domain.com

4） 用户在

api.domain.com

上请求受保护的资源。浏览器将自动提供

authCookie

值，Angular将自动发送

X-XSRF-TOKEN

标题，并发送从

XSRF-TOKEN

cookie读取的值

5） 服务器断言

X-XSRF-TOKEN

的值链接到由

authCookie

的值标识的同一会话

---

我希望这有帮助！我还写过AngularJs的令牌身份验证（免责声明：我在at工作）

我试过，因为服务器来自不同的域，我认为AngularJs无法读取该cookie。我手动尝试并检查，$cookies对象中没有cookie。我如何解决这个问题？我还检查了AngularJS CSRF的链接，其中提到不会为跨域请求设置头。我更新了我的答案。如果这不能解决您的问题，请告诉我。步骤3，通过

api.domain.com

发送的cookie如何被

ui.domain.com

读取，它们位于不同的域上。@11维-在步骤3中，ui.domain.com上的SPA正在读取自定义头“X-Auth-cookie”，不读取cookie“authCookie”本身，它不仅是第三方cookie，而且是“httpOnly”