JavaScript操作Cookie不安全，因document.cookie是明文、无加密、无隔离的纯文本接口，敏感数据应禁用JS存储而交由HttpOnly Cookie由后端管理。
JavaScript 操作 Cookie 本身不安全，document.cookie 是纯文本接口，没有内置加密、作用域隔离或防篡改机制。所有“安全”都依赖开发者手动加固：比如严格校验值、避免存敏感数据、配合 HttpOnly 和 Secure 响应头使用。
为什么不能直接用 document.cookie = "key=value" 写敏感信息
这种写法会把明文数据暴露在前端上下文中，任何脚本（包括第三方库、恶意 XSS 脚本）都能读取、修改甚至发送到外部服务器。浏览器控制台里敲一行 document.cookie 就能看到全部内容。
-
document.cookie是可读可写的字符串拼接接口，无类型、无结构、无自动转义 - 写入时若未指定
SameSite、Secure、HttpOnly，默认不具备防护能力 - 中文或特殊字符（如空格、分号、等号）必须用
encodeURIComponent()编码，否则会被截断
如何安全地读取 Cookie（带解析和校验）
浏览器不提供原生的 Cookie 解析 API，document.cookie 返回的是类似 "a=1; b=2; c=%E4%BD%A0%E5%A5%BD" 的字符串，必须手动拆分和解码。关键点是避免正则误匹配、处理重复键、过滤空值。
function getCookie(name) {
const cookies = document.cookie.split('; ').reduce((acc, pair) => {
const [key, value] = pair.split('=');
if (key && value !== undefined) {
acc[key] = decodeURIComponent(value);
}
return acc;
}, {});
return cookies[name] !== undefined ? cookies[name] : null;
}
// 使用示例
const token = getCookie('authtoken');
if (token && /^[a-zA-Z0-9-]{32,}$/.test(token)) {
// 基础格式校验通过，才继续使用
}
如何安全地写入 Cookie（限制作用域 + 防覆盖）
写入 Cookie 必须显式声明 path、domain、Secure、SameSite，否则容易被子路径或子域名覆盖，或在非 HTTPS 页面被忽略。注意：HttpOnly 无法通过 JS 设置，只能由后端响应头下发。
立即学习“Java免费学习笔记（深入）”；
- 始终设置
path=/（除非明确限定在某个子路径） - 生产环境必须加
; Secure（仅 HTTPS 传输） - 推荐加
; SameSite=Strict或Lax防 CSRF - 避免覆盖其他系统 Cookie（如
PHPSESSID），写前先检查是否存在同名且不可覆盖的项
function setCookie(name, value, options = {}) {
const {
expires = 7 * 24 * 60 * 60 * 1000, // 默认 7 天
path = '/',
domain = '',
secure = location.protocol === 'https:',
sameSite = 'Lax'
} = options;
let cookieStr = ${name}=${encodeURIComponent(value)}; path=${path};
if (domain) cookieStr += ; domain=${domain};
if (secure) cookieStr += '; Secure';
if (sameSite) cookieStr += ; SameSite=${sameSite};
if (expires > 0) {
const date = new Date(Date.now() + expires);
cookieStr += ; expires=${date.toUTCString()};
}
document.cookie = cookieStr;
}
// 安全写入示例（仅 HTTPS、限定路径、防跨站）
setCookie('user_prefs', JSON.stringify({theme: 'dark'}), {
secure: true,
sameSite: 'Strict',
expires: 30 24 60 60 1000
});
真正敏感的数据根本不该进 document.cookie
JWT Token、密码、手机号、支付凭证等，绝不能仅靠前端 Cookie 存储。正确做法是：HttpOnly Cookie 由后端签发并管理，前端只通过 fetch 自动携带；需要前端读取的信息（如用户偏好）才用 JS 操作，并确保做过期、签名、格式校验。
很多人卡在“怎么加密 Cookie”，其实问题不在加密——而在于不该让敏感数据出现在 JS 可见范围内。一旦进入 document.cookie 字符串，就等于放弃了保密性底线。
