JWT身份验证场景下客户端如何使用httpOnly Cookie？

• httpOnly为false：前端JS可通过document.cookie正常读取、修改该类Cookie。若站点存在XSS漏洞，攻击者注入的恶意脚本可直接窃取存储JWT的Cookie，直接盗用用户身份。
• httpOnly为true：浏览器会禁止所有JS（包括合法前端脚本、恶意注入脚本）读取、修改该类Cookie，仅浏览器在发送符合匹配规则的HTTP请求时自动携带，从根源上避免XSS漏洞导致的身份凭证被窃取。

大部分场景下不需要前端对Cookie做额外操作，仅在跨域请求时需要补充配置：

2.1 同域请求场景 #

前端发起AJAX请求时，浏览器会自动匹配域名、路径、secure规则，符合条件的httpOnly JWT Cookie会被自动携带到请求头中，无需手动读取、拼接JWT参数，示例如下：

// 同域下直接发起请求即可，无需额外处理Cookie
fetch('/api/getUserInfo')
  .then(res => res.json())
  .then(userInfo => console.log(userInfo))

服务端直接从请求Cookie中解析jwt字段校验身份即可。

2.2 跨域请求场景 #

若前端站点与后端接口域名不同，需要手动开启AJAX请求的凭证携带配置，否则浏览器不会自动携带Cookie：

• 原生fetch配置示例：

fetch('https://backend-yourdomain.com/api/getUserInfo', {
  credentials: 'include' // 跨域时必须添加该配置，才会携带Cookie
})

• Axios配置示例：

// 单次请求配置
axios.get('https://backend-yourdomain.com/api/getUserInfo', {
  withCredentials: true
})

// 全局配置，避免每次请求重复编写
axios.defaults.withCredentials = true

注意：跨域场景下服务端也需要对应配置CORS规则，不允许使用Access-Control-Allow-Origin: *，必须指定明确的前端域名，同时开启Access-Control-Allow-Credentials: true，Express中cors中间件配置示例如下：

const cors = require('cors')
app.use(cors({
  origin: 'https://frontend-yourdomain.com', // 填写前端实际域名，不可用通配符*
  credentials: true
}))

httpOnly属性从以下两个维度保障身份验证流程安全：

1. XSS漏洞防护：即使站点存在XSS注入风险，攻击者也无法通过JS读取到httpOnly属性的JWT Cookie，无法将用户身份凭证上传到第三方服务器，自然无法盗用用户身份。
2. 配合其他属性实现多层防护：可以和secure、sameSite属性搭配进一步提升安全性，服务端配置示例如下：

res.cookie("jwt", accessToken, { 
  secure: true, // 仅HTTPS请求下携带Cookie，避免传输过程被网络窃听
  httpOnly: true,
  sameSite: 'lax', // 限制第三方站点请求携带Cookie，防范CSRF攻击
  maxAge: 2 * 60 * 60 * 1000 // 设置Cookie有效期，避免凭证长期有效
})

内容的提问来源于stack exchange，提问作者Waterfr Villa