面试题手册

Cookie 的 Domain 和 Path 属性用于控制 Cookie 的作用范围，正确设置这些属性对于安全性和功能实现都很重要。Domain 属性作用指定 Cookie 有效的域名控制哪些子域名可以访问该 Cookie设置规则// 当前域名为 www.example.com// 1. 不设置 Domain（默认）document.cookie = "token=abc";// 只有 www.example.com 可以访问// 2. 设置为当前域名document.cookie = "token=abc; Domain=www.example.com";// 只有 www.example.com 可以访问// 3. 设置为父域名（带点前缀）document.cookie = "token=abc; Domain=.example.com";// 所有子域名都可以访问（www.example.com, api.example.com 等）// 4. 错误示例：设置为其他域名document.cookie = "token=abc; Domain=other.com";// 浏览器会忽略此设置注意事项Domain 必须是当前域名的父域名或相同域名设置父域名时需要带点前缀（.example.com）不能设置为完全不同的域名Path 属性作用指定 Cookie 有效的路径控制哪些 URL 路径可以访问该 Cookie设置规则// 当前域名为 www.example.com// 1. 不设置 Path（默认）document.cookie = "token=abc";// 只有当前路径及其子路径可以访问// 2. 设置为根路径document.cookie = "token=abc; Path=/";// 整个域名下的所有路径都可以访问// 3. 设置为特定路径document.cookie = "token=abc; Path=/api";// 只有 /api 及其子路径可以访问（/api/users, /api/data 等）// 4. 设置为父路径document.cookie = "token=abc; Path=/admin";// 只有 /admin 及其子路径可以访问匹配规则Cookie 只在指定的路径及其子路径下发送路径匹配是前缀匹配更具体的路径优先级更高组合使用示例// 场景 1：全站通用 Cookiedocument.cookie = "theme=dark; Domain=.example.com; Path=/";// 场景 2：仅 API 使用的 Cookiedocument.cookie = "apiToken=xyz; Domain=.example.com; Path=/api";// 场景 3：管理后台专用 Cookiedocument.cookie = "adminToken=123; Domain=admin.example.com; Path=/admin";安全考虑最小权限原则// 不推荐：过于宽泛document.cookie = "token=abc; Domain=.example.com; Path=/";// 推荐：限制范围document.cookie = "token=abc; Domain=api.example.com; Path=/api/v1";防止 Cookie 泄露敏感 Cookie 应限制在特定路径避免在静态资源路径设置 Cookie不同功能的 Cookie 使用不同路径实际应用场景单点登录（SSO）// 在认证域名设置document.cookie = "ssoToken=xyz; Domain=.example.com; Path=/";// 所有子域名共享登录状态多环境隔离// 开发环境document.cookie = "token=dev; Domain=.dev.example.com; Path=/";// 生产环境document.cookie = "token=prod; Domain=.example.com; Path=/";功能模块隔离// 用户模块document.cookie = "userToken=abc; Path=/user";// 支付模块document.cookie = "paymentToken=xyz; Path=/payment";

Cookie 的安全属性包括 Secure、HttpOnly、SameSite 和 Domain/Path 限制，这些属性对于防止 Cookie 被窃取或滥用至关重要。Secure 标志只能通过 HTTPS 协议传输防止在非加密连接中泄露示例：Set-Cookie: token=xyz; SecureHttpOnly 标志禁止 JavaScript 通过 document.cookie 访问防止 XSS 攻击窃取 Cookie示例：Set-Cookie: sessionId=abc; HttpOnlySameSite 属性控制跨站请求时是否发送 Cookie值：Strict（严格模式）、Lax（宽松模式）、None（允许跨站）防止 CSRF 攻击示例：Set-Cookie: token=xyz; SameSite=StrictDomain 和 Path 限制Domain：指定 Cookie 有效的域名Path：指定 Cookie 有效的路径限制 Cookie 的作用范围示例：Set-Cookie: token=xyz; Domain=.example.com; Path=/api最佳实践：敏感 Cookie 必须设置 Secure 和 HttpOnly使用 SameSite=Lax 或 Strict 防止 CSRF设置合理的 Domain 和 Path 范围定期更新 Cookie 的过期时间

Expires 和 Max-Age 都是用于控制 Cookie 过期时间的属性，但它们的实现方式和行为有所不同。Expires 属性特点使用绝对时间（GMT 格式）指定 Cookie 的具体过期日期和时间兼容性更好，支持旧版浏览器语法// 设置 Expiresconst expires = new Date();expires.setDate(expires.getDate() + 7); // 7天后过期document.cookie = "token=abc; Expires=" + expires.toUTCString();// 完整示例document.cookie = "token=abc; Expires=Wed, 09 Jun 2026 10:18:14 GMT; Path=/";注意事项时间格式必须是 UTC (GMT)如果设置的时间早于当前时间，Cookie 立即删除客户端和服务器端时间不同步可能导致问题Max-Age 属性特点使用相对时间（秒数）指定 Cookie 从创建开始的有效期更现代的属性，优先级高于 Expires语法// 设置 Max-Age（单位：秒）document.cookie = "token=abc; Max-Age=3600"; // 1小时后过期// 完整示例document.cookie = "token=abc; Max-Age=86400; Path=/"; // 1天后过期特殊值Max-Age=0：立即删除 CookieMax-Age 为负数：立即删除 Cookie不设置 Max-Age：会话 Cookie，浏览器关闭时删除两者对比| 特性 | Expires | Max-Age ||------|---------|---------|| 时间类型 | 绝对时间 | 相对时间 || 单位 | 日期时间字符串 | 秒数 || 优先级 | 低 | 高 || 兼容性 | 所有浏览器 | 现代浏览器 || 时区问题 | 有 | 无 |优先级规则// 同时设置时，Max-Age 优先document.cookie = "token=abc; Expires=Wed, 09 Jun 2026 10:18:14 GMT; Max-Age=3600";// Cookie 会在 1 小时后过期，而不是指定日期使用场景会话 Cookie// 不设置过期时间document.cookie = "sessionId=abc";// 浏览器关闭时删除短期 Cookie// 使用 Max-Age 更清晰document.cookie = "tempToken=abc; Max-Age=1800"; // 30分钟长期 Cookie// 使用 Expires 更直观const expires = new Date();expires.setFullYear(expires.getFullYear() + 1);document.cookie = "rememberMe=true; Expires=" + expires.toUTCString();删除 Cookie// 方法 1：设置过去的 Expiresdocument.cookie = "token=abc; Expires=Thu, 01 Jan 1970 00:00:00 GMT; Path=/";// 方法 2：设置 Max-Age=0document.cookie = "token=abc; Max-Age=0; Path=/";最佳实践优先使用 Max-Age// 推荐document.cookie = "token=abc; Max-Age=3600";// 不推荐（除非需要兼容旧浏览器）document.cookie = "token=abc; Expires=" + new Date(Date.now() + 3600000).toUTCString();兼容性处理function setCookieWithExpiry(name, value, seconds) { let cookieString = `${name}=${value}`; // 优先使用 Max-Age if (typeof seconds === 'number') { cookieString += `; Max-Age=${seconds}`; } else { // 降级使用 Expires const expires = new Date(); expires.setSeconds(expires.getSeconds() + seconds); cookieString += `; Expires=${expires.toUTCString()}`; } document.cookie = cookieString;}安全考虑敏感信息使用短期过期时间"记住我"功能使用长期过期时间定期轮换 Token 并更新过期时间实际应用示例// 登录成功后设置 Cookiefunction setLoginCookie(token, rememberMe) { const options = { httpOnly: true, secure: true, sameSite: 'strict', path: '/' }; if (rememberMe) { // 记住我：30天 options.maxAge = 30 * 24 * 60 * 60; } else { // 不记住：1小时 options.maxAge = 60 * 60; } // 服务器端设置（Node.js Express 示例） res.cookie('authToken', token, options);}

Cookie 在跨域场景下的使用需要特别注意，因为浏览器的同源策略会限制 Cookie 的访问和发送。同源策略与 CookieCookie 默认只在同源请求中发送同源：相同协议、域名和端口跨域 Cookie 设置通过 Domain 属性// 在父域名设置 Cookie，子域名可访问document.cookie = "token=xyz; Domain=.example.com; Path=/";设置 Domain 为 .example.com，所有子域名都能访问注意：Domain 必须是当前域名的父域名或相同域名跨域请求携带 Cookie// 前端设置fetch('https://api.example.com/data', { credentials: 'include' // 或 'same-origin'});// 或使用 XMLHttpRequestconst xhr = new XMLHttpRequest();xhr.withCredentials = true;xhr.open('GET', 'https://api.example.com/data');xhr.send();服务器端配置// Express.js 示例app.use(cors({ origin: 'https://frontend.example.com', credentials: true // 允许携带 Cookie}));// 设置 Cookie 时指定 SameSiteres.setHeader('Set-Cookie', [ 'token=xyz; HttpOnly; Secure; SameSite=None']);CORS 与 Cookie 的关系必须设置 credentials: 'include'服务器必须设置 Access-Control-Allow-Credentials: trueAccess-Control-Allow-Origin 不能是 *，必须是具体域名第三方 Cookie 限制Chrome、Firefox 等浏览器逐步限制第三方 CookieSafari 已默认阻止第三方 Cookie解决方案：使用 SameSite=None; Secure使用场景单点登录（SSO）跨域 API 认证第三方登录（OAuth）安全注意事项跨域 Cookie 必须使用 Secure 标志验证 Origin 和 Referer 头使用 CSRF Token 提供额外防护设置合理的过期时间

Cookie 和 LocalStorage 都是浏览器提供的客户端存储机制，但它们在容量、作用域、API 和使用场景上有重要区别。容量限制Cookie：每个 Cookie 约 4KB，每个域名约 50-100 个LocalStorage：每个域名约 5-10MB数据传输Cookie：每次 HTTP 请求都会自动发送到服务器LocalStorage：不会自动发送，需要手动通过 JavaScript 读取API 操作Cookie：通过 document.cookie 字符串操作，需要手动解析LocalStorage：提供简洁的键值对 API（setItem、getItem、removeItem）过期时间Cookie：可设置过期时间或会话级别LocalStorage：永久存储，除非手动删除或清除浏览器数据作用域Cookie：可通过 Domain 和 Path 属性精确控制作用域LocalStorage：同源策略，仅在同域名、同协议、同端口下共享安全性Cookie：可设置 HttpOnly 防止 JavaScript 访问LocalStorage：完全可被 JavaScript 访问，不适合存储敏感信息使用场景对比Cookie：会话管理、CSRF 防护、服务器需要的数据LocalStorage：用户偏好设置、缓存数据、离线应用数据代码示例// Cookie 操作document.cookie = "name=value; expires=...; path=/";// LocalStorage 操作localStorage.setItem('key', 'value');const value = localStorage.getItem('key');选择建议需要发送到服务器的数据用 Cookie纯客户端数据用 LocalStorage敏感信息用 Cookie + HttpOnly大量数据用 LocalStorage

Cookie 和 Session 都是用于保持用户状态的机制，但它们在存储位置、安全性和使用场景上有显著区别。存储位置Cookie：存储在客户端浏览器中Session：存储在服务器端（内存、数据库或缓存）数据大小Cookie：通常限制在 4KB 左右Session：理论上没有大小限制安全性Cookie：相对不安全，容易被窃取或篡改Session：更安全，数据存储在服务器端性能影响Cookie：每次请求都会携带，增加网络传输量Session：只传输 Session ID，对性能影响较小生命周期Cookie：可设置持久化或会话级别Session：通常在用户关闭浏览器或超时后失效使用场景Cookie：存储非敏感的用户偏好、追踪数据Session：存储敏感信息如用户登录状态、购物车Session 的工作原理用户登录后，服务器创建 Session 并生成唯一的 Session ID服务器将 Session ID 通过 Cookie 发送给客户端客户端在后续请求中携带 Session ID服务器根据 Session ID 查找对应的 Session 数据选择建议敏感数据使用 Session需要长期保存的非敏感数据使用 Cookie可以结合使用：Session 存储核心数据，Cookie 存储辅助信息

Cookie 在不同浏览器中的实现和行为存在差异，了解这些差异对于开发兼容性良好的 Web 应用非常重要。主要浏览器 Cookie 差异容量限制Chrome：每个 Cookie 4KB，每个域名约 180 个Firefox：每个 Cookie 4KB，每个域名约 150 个Safari：每个 Cookie 4KB，每个域名约 600 个Edge：与 Chrome 相同第三方 Cookie 限制Chrome：逐步限制，计划 2024 年开始默认阻止Firefox：默认阻止第三方追踪 CookieSafari：默认阻止所有第三方 Cookie（ITP 策略）Edge：与 Chrome 相同SameSite 默认行为Chrome 80+：默认 SameSite=LaxFirefox 79+：默认 SameSite=LaxSafari 12+：默认 SameSite=LaxEdge 80+：默认 SameSite=LaxSecure 标志要求Chrome：SameSite=None 必须配合 SecureFirefox：SameSite=None 必须配合 SecureSafari：SameSite=None 必须配合 SecureEdge：SameSite=None 必须配合 SecureSafari ITP（智能追踪预防）自动删除 7 天后未访问的第三方 Cookie限制 Cookie 的有效期最长 7 天影响跨域登录和追踪功能Firefox ETP（增强追踪保护）严格模式阻止所有第三方追踪 Cookie标准模式阻止已知的追踪器 Cookie可通过 about:preferences#privacy 配置Chrome 隐私沙盒计划逐步淘汰第三方 Cookie引入 FLoC、Topics API 等替代方案开发者需要提前准备迁移方案兼容性处理建议检测浏览器支持function supportsSameSiteNone() { try { document.cookie = 'test=1; SameSite=None; Secure'; return document.cookie.includes('test=1'); } catch (e) { return false; }}渐进增强策略const cookieOptions = { httpOnly: true, secure: true, sameSite: 'Lax' // 默认使用 Lax};// 如果需要跨域，检测支持后再使用 Noneif (supportsSameSiteNone()) { cookieOptions.sameSite = 'None';}提供降级方案第三方 Cookie 不可用时使用 LocalStorage实现服务器端会话管理作为备选使用 PostMessage 进行跨域通信测试建议在多个浏览器中测试 Cookie 功能使用浏览器开发者工具检查 Cookie 设置测试隐私模式下的 Cookie 行为验证跨域 Cookie 的兼容性

Cookie 是由服务器发送并存储在浏览器中的小型文本文件，用于在客户端保存用户状态信息。Cookie 主要包含名称、值、域、路径、过期时间、安全标志和 HttpOnly 标志等属性。Cookie 的工作原理：服务器通过 Set-Cookie 响应头将 Cookie 发送到浏览器浏览器将 Cookie 存储在本地浏览器在后续请求中通过 Cookie 请求头自动发送 Cookie 到服务器Cookie 的主要用途：会话管理：保持用户登录状态个性化设置：记住用户偏好购物车功能：保存购物车中的商品追踪分析：统计用户行为数据Cookie 的限制：大小限制：通常每个 Cookie 不超过 4KB数量限制：每个域名通常限制 50-100 个 Cookie安全性：可能被窃取或篡改，需要配合安全标志使用

Cookie 的性能优化对于提升 Web 应用加载速度和用户体验至关重要，特别是在高流量场景下。Cookie 性能问题请求头膨胀每个 HTTP 请求都会携带所有匹配的 CookieCookie 过多会导致请求头过大影响 HTTP/1.1 的连接复用效率网络传输开销Cookie 数据在每次请求中重复传输增加带宽消耗和延迟移动网络环境下影响更明显服务器处理开销服务器需要解析和验证每个 Cookie大量 Cookie 增加服务器 CPU 负载影响请求处理速度优化策略减少 Cookie 数量和大小// 不推荐：多个小 Cookiedocument.cookie = "userPref1=dark";document.cookie = "userPref2=en";document.cookie = "userPref3=large";// 推荐：合并为一个 Cookiedocument.cookie = "userPrefs=theme:dark|lang:en|size:large";使用压缩编码// 压缩 Cookie 值function compressCookieValue(value) { // 使用简短的键名 const compressed = value .replace(/theme:/g, 't:') .replace(/language:/g, 'l:') .replace(/fontSize:/g, 's:'); return compressed;}// 示例// 原始值：theme:dark|language:en|fontSize:large// 压缩后：t:dark|l:en|s:large限制 Cookie 作用域// 不推荐：全站 Cookiedocument.cookie = "analytics=xyz; Domain=.example.com; Path=/";// 推荐：仅特定路径document.cookie = "analytics=xyz; Domain=.example.com; Path=/analytics";分离静态资源 Cookie// 主域名 Cookiedocument.cookie = "session=abc; Domain=.example.com; Path=/";// 静态资源域名（不设置 Cookie）// 使用 cdn.example.com，避免 Cookie 传输高级优化技巧Cookie 分片// 大数据分片存储function setLargeCookie(name, data) { const maxSize = 4000; // Cookie 最大 4KB const chunks = []; for (let i = 0; i < data.length; i += maxSize) { chunks.push(data.substring(i, i + maxSize)); } chunks.forEach((chunk, index) => { document.cookie = `${name}_${index}=${chunk}`; }); // 存储分片数量 document.cookie = `${name}_chunks=${chunks.length}`;}function getLargeCookie(name) { const chunkCount = parseInt(getCookie(`${name}_chunks`)); let data = ''; for (let i = 0; i < chunkCount; i++) { data += getCookie(`${name}_${i}`); } return data;}延迟加载 Cookie// 首次加载不发送非必要 Cookie// 使用 JavaScript 延迟设置window.addEventListener('load', () => { // 页面加载完成后设置分析 Cookie setTimeout(() => { document.cookie = "analytics=xyz; Path=/"; }, 2000);});Cookie 缓存策略// 使用 LocalStorage 缓存非敏感数据function setCachedCookie(name, value, useCache = true) { if (useCache) { localStorage.setItem(name, value); } else { document.cookie = `${name}=${value}`; }}function getCachedCookie(name, useCache = true) { if (useCache) { return localStorage.getItem(name); } else { return getCookie(name); }}HTTP/2 优化头部压缩HTTP/2 使用 HPACK 算法压缩头部Cookie 也会被压缩，减少传输大小但仍建议减少 Cookie 数量多路复用HTTP/2 支持请求并行Cookie 大小对性能影响相对较小但仍需优化以减少延迟监控和分析Cookie 大小监控// 监控 Cookie 总大小function monitorCookieSize() { const cookies = document.cookie.split(';'); let totalSize = 0; cookies.forEach(cookie => { totalSize += cookie.length; }); if (totalSize > 2000) { console.warn(`Cookie size too large: ${totalSize} bytes`); } return totalSize;}性能分析// 分析 Cookie 对性能的影响function analyzeCookiePerformance() { const startTime = performance.now(); // 模拟请求 fetch('/api/test', { credentials: 'include' }).then(() => { const endTime = performance.now(); const duration = endTime - startTime; console.log(`Request duration with cookies: ${duration}ms`); });}最佳实践总结最小化 Cookie 使用只存储必要的数据优先使用 Session Cookie避免存储大文件合理设置作用域限制 Domain 和 Path静态资源不设置 Cookie使用独立域名处理静态资源定期清理删除过期的 Cookie清理不再使用的 Cookie实现自动清理机制替代方案使用 LocalStorage 存储客户端数据使用 Session 存储服务器端数据使用 IndexedDB 存储大量数据

Cookie 容易受到多种安全攻击，了解这些攻击方式和防护措施对于构建安全的 Web 应用至关重要。常见 Cookie 攻击方式XSS（跨站脚本攻击）窃取 Cookie攻击者通过注入恶意脚本读取 document.cookie防护：使用 HttpOnly 标志// 不安全：可被 XSS 窃取document.cookie = "token=abc123";// 安全：HttpOnly 防止 JavaScript 访问Set-Cookie: token=abc123; HttpOnlyCSRF（跨站请求伪造）攻击者诱导用户发送跨站请求，浏览器自动携带 Cookie防护：使用 SameSite 属性、CSRF Token// 防护示例Set-Cookie: token=abc123; SameSite=Strict中间人攻击在非加密连接中截获 Cookie防护：使用 Secure 标志，强制 HTTPSSet-Cookie: token=abc123; SecureCookie 注入攻击者伪造或篡改 Cookie 值防护：对 Cookie 值进行签名或加密Cookie 安全最佳实践设置安全标志// 完整的安全 Cookie 示例Set-Cookie: sessionId=xyz123; HttpOnly; Secure; SameSite=Strict; Path=/; Domain=.example.com; Max-Age=3600敏感数据处理不在 Cookie 中存储明文密码使用加密或签名验证 Cookie 完整性定期轮换 Session ID过期时间管理设置合理的过期时间敏感操作后立即失效 Cookie实现"记住我"功能时使用持久 Cookie服务器端验证验证 Cookie 的来源和完整性检查 IP 和 User-Agent 变化实现速率限制防止暴力破解代码示例：安全的 Cookie 设置// Node.js Express 示例res.cookie('token', encryptedToken, { httpOnly: true, secure: process.env.NODE_ENV === 'production', sameSite: 'strict', maxAge: 3600000, // 1小时 domain: '.example.com'});GDPR 和隐私合规获取用户同意后才能设置 Cookie提供清晰的 Cookie 政策说明实现 Cookie 同意横幅