Cookie 安全属性必须由服务器通过 Set-Cookie 设置，前端应使用 js-cookie 库规范操作：强制 secure: true、sameSite: 'lax'、path: '/'，禁用 document.cookie 直接操作，敏感信息交由 HttpOnly Cookie 托管。
JavaScript 中 Cookie 本身不能直接设置 HttpOnly 或 Secure 等关键安全属性——这些必须由服务器通过 Set-Cookie 响应头下发。但前端可通过 js-cookie 库规范操作、规避风险，并与后端协同落实三重防护：传输加密、访问隔离、跨域限制。
用 js-cookie 强制启用 Secure 和 SameSite
即使后端已配置，前端也应主动声明安全策略，避免误设不安全 Cookie：
-
始终搭配
secure: true：确保只在 HTTPS 下写入，防止明文传输被劫持 -
默认设
sameSite: 'lax'（推荐）或'strict'：阻断大多数 CSRF 场景下的跨站 Cookie 发送 -
显式指定
path: '/'和domain：缩小作用范围，避免子域间意外共享
示例：
Cookies.set('session_id', 'abc123', {secure: true,
sameSite: 'lax',
path: '/',
expires: 1
});
绝不依赖 document.cookie 直接操作敏感值
document.cookie 是原始接口，无自动编码、无安全校验，极易出错：
立即学习“Java免费学习笔记（深入）”；
- 手动拼接字符串易遗漏
Secure或写错分隔符，导致 Cookie 被降级为 HTTP 可读 - 未对值做 URI 编码时，含空格、分号等字符会截断 Cookie，引发解析异常
- 无法设置
HttpOnly——该属性只能由服务端下发，前端 JS 永远读不到它
✅ 正确做法：统一使用 js-cookie@3.x（仅此版本持续获安全更新），它内置编码逻辑，自动处理特殊字符。
敏感凭证必须交由 HttpOnly Cookie 托管
用户登录后的 Token、Session ID 等绝不可存于 localStorage 或普通 Cookie：
-
后端响应中必须带上
HttpOnly标志：Set-Cookie: token=xxx; HttpOnly; Secure; SameSite=Lax -
前端不尝试读取它：js-cookie 也无法获取
HttpOnlyCookie，这是浏览器强制限制 - 仅用于自动携带请求：后续 AJAX 请求无需手动加 Header，浏览器自动附带，且 XSS 脚本无法窃取
⚠️ 注意：若需前端感知登录状态，可另设一个轻量级、非敏感的标志 Cookie（如 is_logged_in=true），并配 HttpOnly: false 供 JS 读取。
对 Cookie 值做最小化验证与加密（可选增强）
当业务允许前端写入非会话类数据（如偏好设置）时，建议增加一层防护：
-
输入验证：过滤非法字符，例如禁止
<script></script>、javascript:等 XSS 载荷特征 -
客户端加密：使用
withConverter()替换 js-cookie 的读写逻辑，集成 AES 或 CryptoJS 对值加密后再存入 - 避免存储敏感原文：如手机号可存哈希片段，而非完整号码
示例（简化版验证）：
const validate = (val) => {if (!/^[a-zA-Z0-9_-]{1,64}$/.test(val)) throw new Error('Invalid cookie value');
return val;
};
Cookies.set('theme', validate(userTheme));
