如何使用JavaScript操作Cookie信息_JavaScript如何安全地读写浏览器Cookie_技术教程

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 设置，只能由后端响应头下发。

始终设置 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
});