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

Question

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

正如我所知，最好将JWT存储在Cookies中，并使用＆＃34; secure：true＆＃34; ＆＃34; httpOnly：true＆＃34;为：

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

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

通过这种方式，没有JavaScrip可以访问Cookie（因为＆＃34; httpOnly：true＆＃34;），

我受到XSS的保护，

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

如何防范CSRF / XSRF？

我的想法就是这个：

1. 在Cookie中添加一个名为＆＃34; cookie_id＆＃34;

的字段

2. 也可以在＆＃34; res＆＃34;标题包含相同字段的JWT＆＃34; cookie_id＆＃34;

3. 将JWT存储在LocalStorge

中

4. 定义一个HttpInterceptor Mehtod，对于每个＆＃34; req＆＃34;追加＆＃34; cookie_id＆＃34;在HttpHeader中

5. 服务器端检查＆＃34; cookie_id＆＃34;在cookie中与＆＃34; cookie_id＆＃34;相同在HttpHeader中

这是汉德尔的正确方法吗？

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