React中如何防范Cookie被劫持?我的会话有时会被盗用
我在用React开发登录功能时,发现用户登录后的session_id存放在Cookie里,但最近测试时发现可以通过XSS漏洞直接读取到这个Cookie。虽然设置了HttpOnly和Secure属性,但还是被攻击者窃取了会话。这是怎么回事呢?
我的登录成功后设置Cookie的代码是这样的:
// 使用js-cookie库设置Cookie
import Cookies from 'js-cookie';
const handleLogin = (session) => {
Cookies.set('session_id', session.id, {
expires: 7,
secure: true,
httpOnly: true
});
// 其他逻辑...
};
但测试时用document.cookie居然还能读到这个Cookie值,难道HttpOnly没生效?明明设置了Secure属性,为什么在本地开发环境(http://localhost)也能设置成功?有没有其他防范Session劫持的方法?
正确的做法是让后端在登录成功时通过Set-Cookie响应头来设置:
Set-Cookie: session_id=abc123; HttpOnly; Secure; SameSite=Strict
再给你几个建议:检查一下你的XSS防护措施是否到位,Content-Security-Policy头要设置好,别让恶意脚本有机可乘。还有把session存储方式从Cookie换成token,用localStorage存,读取时加个签名验证。
你看你这段代码:
这里有个致命误解 —— js-cookie 的 httpOnly 选项只是个“占位符”,它不会让 Cookie 变成真正不可被 JS 读取的 HttpOnly 类型。实际上前端 JavaScript 根本没权限创建 HttpOnly Cookie,这是浏览器安全机制决定的。
所以你在控制台执行 document.cookie 还能看到 session_id?说明这个 Cookie 根本就没被设成 HttpOnly,攻击者一旦触发 XSS 就能轻松盗走。
正确做法是:登录成功后,由后端接口通过 Set-Cookie 响应头下发带有完整安全属性的 Cookie,比如:
注意这几个关键点:
- HttpOnly 阻止 JavaScript 访问
- Secure 确保只在 HTTPS 下传输(本地开发时浏览器对 localhost 放宽限制,所以你看到能设成功)
- SameSite=Strict 或 Lax 可有效防范 CSRF
另外别把安全全压在 Cookie 上,建议加上用户指纹绑定,比如把 session 和 User-Agent、IP 地址哈希一起存服务端做校验。即使 Cookie 被窃取,攻击者也难以直接复用。
总结一下:别走弯路了,赶紧把 session_id 的设置逻辑移到后端去,前端只负责跳转或接收 token 状态,别再用 js-cookie 存敏感会话标识了。