前端设置的Cookie需要加密吗？怎么防窃取？

红梅的笔记提问于 2026-03-13 19:53:21 阅读 19

安全

我在做登录功能，后端返回 token 后我用 JS 存到 Cookie 里，但听说 Cookie 容易被 XSS 偷走，是不是得加密？可前端加密好像也没用啊，密钥放哪都不安全……

现在代码是这样存的：

document.cookie = "auth_token=" + response.token + "; path=/; Secure; SameSite=Strict";

但同事说这不够安全，建议加密。可我在前端用 CryptoJS 加密的话，别人看源码不就知道密钥了？到底该怎么处理才对？

Cookie加密 Cookie安全

我来解答赞 3 收藏

反馈

1 条解答

南宫蓝月 Lv1

你同事说的"加密"方向错了。前端加密完全没意义，密钥直接暴露在源码里，攻击者解密跟玩一样。

问题的关键不在加密，而在于HttpOnly这个flag。

你当前代码是 document.cookie = ...，这是前端JS设置Cookie，只能设置非HttpOnly的。那XSS攻击者就能通过 document.cookie 把token偷走。

正确的做法是：让后端在设置Cookie时加上HttpOnly flag。这样JavaScript根本读不到这个Cookie，XSS再厉害也白搭。

后端设置大概长这样（以Express为例）：

res.cookie('auth_token', token, {

  httpOnly: true,        // 关键！前端JS读不到

  secure: true,          // HTTPS下传输

  sameSite: 'strict',    // 防止CSRF

  maxAge: 3600000        // 过期时间

});

你前端代码改成直接让后端设置Cookie就行了，前端不需要手动存：

// 前端只需要把token发给后端，让后端去设置Cookie

fetch('/login', {

  method: 'POST',

  body: JSON.stringify({ username, password })

}).then(res => {

  // 登录成功后，后端已经通过Set-Cookie header设置了HttpOnly的token

  // 前端不需要再手动document.cookie

});

总结一下：
1. 前端加密token是智商税，别搞
2. 让后端设置 httpOnly: true 的Cookie，这才是真正的防护
3. 你的 Secure 和 SameSite: Strict 保留着，没问题
4. 前端防XSS也很重要，但那是另一个层面的事

你要是实在需要前端知道用户是否登录，可以让后端返回一个加密状态字段，token本身别让前端碰。

2026-03-13 20:00