Cookie 中的 Angular JWT 如何防止 CSRF/XSRF 和 XSS

Posted 2023-03-10

【中文标题】Cookie 中的 Angular JWT 如何防止 CSRF/XSRF 和 XSS

【英文标题】：Angular JWT in Cookie how to prevent CSRF/XSRF and XSS

【发布时间】：2018-09-19 01:40:26

【问题描述】：

我正在学习 Angular 和 Express，我正在尝试实现登录。

据我了解，最好将 JWT 存储在带有“secure: true”和“httpOnly: true”的 Cookie 中：

const jwtBearerToken = jwt.sign(...);

res.cookie("SESSIONID", jwtBearerToken, httpOnly:true, secure:true);

这样没有JavaScrip可以访问Cookie（因为“httpOnly: true”），

而且我受到 XSS 的保护，

但我的 SPA 也无法以这种方式访问​​ JWT，我的问题来了：

如何保护我免受 CSRF/XSRF 的影响？

我的想法是这个：

在cookie中放入一个名为“cookie_id”的字段

还在“res”标头中发送将包含相同字段“cookie_id”的 JWT

将 JWT 存储在 LocalStorge 中

定义一个 HttpInterceptor Mehtod，为每个“req”在 HttpHeader 中附加“cookie_id”

服务器端检查cookie中的“cookie_id”是否与HttpHeader中的“cookie_id”一致

这是处理这个问题的正确方法吗？

【问题讨论】：

只是为了好奇您的浏览器是否可以发送 cookie 为什么需要 SPA 来访问 cookie？

因为我需要阅读“cookie_id”字段，这里的重点是我需要了解我的 SPA 中的用户是否自愿提出请求

请注意，仅仅因为攻击者无法通过注入的 javascript 获取您的会话 cookie，您就不会受到 xss 的保护。

【参考方案1】：

首先，请注意，仅仅因为攻击者无法通过注入的 javascript 获取您的会话 cookie，您就不会受到 xss 的保护。只是会话cookie不能被窃取。

您描述的针对 csrf 的保护称为double submit，如果实施正确，它是避免 csrf 的有效方法。确保 csrf 令牌 cookie 是不同的（不是会话 cookie），这是规则的一种例外，您可以让 csrf cookie 可供 javascript 访问（不需要 httpOnly），因为如果有 xss，无论如何，任何 csrf 保护都是无用的。然后根据来自 Angular 的请求，读取该 cookie，并将其值作为请求标头发送，服务器只需按照您的描述进行比较。 csrf 令牌值需要有足够的熵（即足够长且足够随机）才能被猜到。另请注意，如果您将其存储在 localStorage 中，而不是直接从 cookie 将其复制到请求标头中，那将更容易出错。不需要使用 localStorage，HttpInterceptor 也可以直接从 csrf cookie 中复制。

【讨论】：

嗨，Gabor，感谢您的重播。我不明白我是否需要两个 Cookie。换句话说，当用户进行身份验证时，我会发回两个 cookie，第一个带有 JWT，第二个带有“XSRF-TOKEN”？如果这是正确的，我如何以快递的形式发回两个 cookie？重新保护我打算使用的令牌的“熵”github.com/kelektiv/node-uuidv4

是的，您像以前一样在 httpOnly cookie 中发回会话 id，并创建一个单独的 csrf cookie，它不是 httpOnly，以便 Angular 可以读取并将其值复制到请求标头。 Node-uuid 对我来说看起来不错。对于响应中的多个 cookie，请参阅 here。