React中如何验证Cookie数据未被篡改？

敏涵提问于 2026-02-05 20:48:28 阅读 20

安全

我在React项目里用js-cookie设置cookie，但不确定怎么防止别人篡改内容？比如这个登录token：


import Cookies from 'js-cookie';

const setAuth = (token) => {
  Cookies.set('auth_token', token, { expires: 7 });
};

之前查资料说要加签名验证，但具体怎么在前端实现呢？试过把签名放在cookie里一起存，但感觉这样不安全。如果直接比较服务器返回的token和客户端存储的是否一致，又怕每次请求都校验太耗性能…

我来解答赞 7 收藏

反馈

1 条解答

程序猿永莲 Lv1

用 js-cookie 存 cookie 的确没法防止篡改，因为前端存的东西用户都能改。真正验证 cookie 是否被篡改，还是得靠后端签名机制。

你提到的签名验证思路是对的，但签名不能直接存在 cookie 里，应该由服务器生成带签名的 token，前端只存这个 token。比如服务器生成一个 HMAC-SHA256(token, secret_key)，把 token 和签名一起下发，前端只存储 token。每次请求时带上 token，后端验证签名是否合法。

前端这边可以稍微做一层加密混淆，比如在存 token 前加个固定 salt 再 base64 编码：

const CryptoJS = require('crypto-js');



const encrypt = (data, salt = 'your-salt') => {

  return CryptoJS.AES.encrypt(data, salt).toString();

};



const setAuth = (token) => {

  const encryptedToken = encrypt(token);

  Cookies.set('auth_token', encryptedToken, { expires: 7 });

};

但这只是增加破解门槛，不是真正安全。关键是后端要每次请求都验证签名。如果怕性能问题，后端可以做缓存校验机制，不是每次都重新计算签名。

总之前端做不了真正防篡改，只能靠后端签名+每次请求校验，前端能做的就是存储的时候稍微混淆一下。

2026-02-05 21:00