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

Question

我正在学习 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 的影响？

我的想法是这个：

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

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

3. 将 JWT 存储在 LocalStorge 中

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

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

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

Answer 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 中复制。