React应用使用universal-cookie无法读取HttpOnly标记的CSRF Cookie

嘿，我一眼就发现问题所在了——你的csrf_token_secret Cookie带了HttpOnly属性！这正是你用universal-cookie读不到它的核心原因。

为什么读不到？ #

HttpOnly是浏览器的安全机制，一旦Cookie被标记为HttpOnly，前端JavaScript（包括universal-cookie库）就完全无法读取或修改这个Cookie。这个设计是为了防范XSS攻击，避免敏感Cookie被恶意脚本窃取。

你可以对比一下能正常读取的_csrf Cookie，它的配置里没有HttpOnly，所以前端能轻松拿到它。

该怎么解决？ #

CSRF令牌是需要前端在请求时主动带上的（比如放在请求头或表单里），所以它不应该被设置为HttpOnly。你需要调整后端的Cookie配置：

• 如果csrf_token_secret是你要用来做CSRF验证的令牌，把它的HttpOnly属性去掉；
• 或者直接使用你已经存在的_csrf Cookie（它没有HttpOnly）来做CSRF校验，前端读取_csrf的值即可。

另外，如果你必须保留csrf_token_secret的HttpOnly属性（比如它是后端内部用的密钥，不是给前端的令牌），那你需要让后端把实际要前端使用的CSRF令牌通过其他方式传递：

• 比如在响应头里添加X-CSRF-Token字段，前端通过response.headers.get('X-CSRF-Token')获取；
• 或者把令牌嵌入到页面的HTML中（比如放在<meta>标签里），前端通过DOM读取。

快速验证 #

你可以打开浏览器开发者工具（Application -> Cookies）查看这两个Cookie的属性：

• csrf_token_secret会显示HttpOnly处于勾选状态；
• _csrf则没有这个勾选，所以能被你的universal-cookie代码正常读取。

内容的提问来源于stack exchange，提问作者randy