ReactJS应用中如何防止用户通过document.cookie修改认证Token？

嘿，这个问题的核心解决方案其实很明确——利用Cookie的HttpOnly属性来彻底锁死前端对它的操作权限，我来给你详细拆解一下：

1. 关键：给Cookie加上HttpOnly属性 #

要让token Cookie无法被前端JS（包括控制台里的document.cookie）修改或读取，最可靠的方式是在服务器端设置Cookie时添加HttpOnly属性。这是浏览器的原生安全机制，一旦设置，浏览器会禁止任何JavaScript代码触碰这个Cookie，只会在每次HTTP请求里自动携带它。

举个服务器端的示例（以Node.js/Express为例）：

// 登录接口返回响应时设置Cookie
res.cookie('token', authenticToken, {
  httpOnly: true, // 这是核心配置！
  secure: process.env.NODE_ENV === 'production', // 生产环境一定要开启，仅在HTTPS下传输
  sameSite: 'strict', // 防范CSRF攻击的关键设置
  maxAge: 24 * 60 * 60 * 1000 // 按需设置过期时间，比如1天
});

设置完成后，你再去浏览器控制台敲document.cookie，会发现这个token Cookie根本不会出现在结果里，自然也就没法修改它了。

2. 关于universal-cookie库的调整 #

你现在用的universal-cookie是前端操作Cookie的工具，但它完全无法读取或设置带有HttpOnly属性的Cookie（这是浏览器的安全限制，不是库的问题）。所以后续你的React应用不需要再用这个库来管理token Cookie了——这个Cookie会由浏览器自动在请求时携带，你不用手动干预。

如果你的应用还有其他非敏感的Cookie（比如用户主题偏好），可以继续用universal-cookie来处理，但认证Token的Cookie交给服务器和浏览器自动管理就好。

3. 额外的安全加固建议 #

• 开启Secure属性：生产环境下务必把secure设为true，确保Cookie只在HTTPS连接中传输，避免被明文截取。
• 配置SameSite属性：推荐设为strict或lax，能有效防范跨站请求伪造（CSRF）攻击。
• 合理设置过期时间：根据业务需求给Cookie设置合适的有效期，避免长期有效的Cookie带来潜在风险。

总的来说，只要服务器端给token Cookie加上HttpOnly属性，就能彻底解决前端修改的问题，这也是业界通用的安全方案。

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