React中如何防范Cookie被劫持?我的会话有时会被盗用

UX-瑞雪 阅读 12

我在用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劫持的方法?

我来解答 赞 2 收藏
二维码
手机扫码查看
2 条解答
宇文瑞雪
你这问题出在用js-cookie库设置HttpOnly,这是不可能的。HttpOnly的Cookie只能通过服务器端设置,前端JavaScript无法操作。另外本地开发环境是http协议,Secure属性会被忽略。

正确的做法是让后端在登录成功时通过Set-Cookie响应头来设置:
Set-Cookie: session_id=abc123; HttpOnly; Secure; SameSite=Strict

再给你几个建议:检查一下你的XSS防护措施是否到位,Content-Security-Policy头要设置好,别让恶意脚本有机可乘。还有把session存储方式从Cookie换成token,用localStorage存,读取时加个签名验证。

// 后端Node.js示例
res.cookie('session_id', 'abc123', {
httpOnly: true,
secure: process.env.NODE_ENV === 'production',
sameSite: 'strict',
maxAge: 7 * 24 * 60 * 60 * 1000
});
点赞
2026-02-18 23:02
端木静依
你这问题我当年也踩过,而且栽得不轻。先说重点:HttpOnly 是浏览器层面的安全措施,必须由后端在 Set-Cookie 响应头中设置才生效,前端用 js-cookie 这类库根本没法真正设置 HttpOnly。

你看你这段代码:

Cookies.set('session_id', session.id, {
expires: 7,
secure: true,
httpOnly: true
});


这里有个致命误解 —— js-cookie 的 httpOnly 选项只是个“占位符”,它不会让 Cookie 变成真正不可被 JS 读取的 HttpOnly 类型。实际上前端 JavaScript 根本没权限创建 HttpOnly Cookie,这是浏览器安全机制决定的。

所以你在控制台执行 document.cookie 还能看到 session_id?说明这个 Cookie 根本就没被设成 HttpOnly,攻击者一旦触发 XSS 就能轻松盗走。

正确做法是:登录成功后,由后端接口通过 Set-Cookie 响应头下发带有完整安全属性的 Cookie,比如:

Set-Cookie: session_id=abc123; Path=/; HttpOnly; Secure; SameSite=Strict


注意这几个关键点:
- HttpOnly 阻止 JavaScript 访问
- Secure 确保只在 HTTPS 下传输(本地开发时浏览器对 localhost 放宽限制,所以你看到能设成功)
- SameSite=Strict 或 Lax 可有效防范 CSRF

另外别把安全全压在 Cookie 上,建议加上用户指纹绑定,比如把 session 和 User-Agent、IP 地址哈希一起存服务端做校验。即使 Cookie 被窃取,攻击者也难以直接复用。

总结一下:别走弯路了,赶紧把 session_id 的设置逻辑移到后端去,前端只负责跳转或接收 token 状态,别再用 js-cookie 存敏感会话标识了。
点赞 3
2026-02-12 14:55