如何存储Access Token防范XSS？HttpOnly Cookie相关技术疑问

嘿，这个问题问得非常到位——HttpOnly Cookie的工作机制确实容易让人困惑，尤其是刚接触安全存储Token的时候。我来一步步给你拆解清楚：

为什么要在客户端存储HttpOnly Cookie？ #

首先得明确：HttpOnly Cookie的核心价值不是让客户端JS读取它，而是阻止XSS脚本窃取它。

当你的应用遭遇XSS攻击时，恶意脚本可以通过document.cookie读取普通Cookie里的Token，进而冒充用户发起请求。但HttpOnly标记会让浏览器禁止任何客户端JS访问这个Cookie，从根源上切断了XSS窃取Token的路径。

至于存储在客户端，这是因为HTTP是无状态协议——后端需要一种方式识别后续请求的用户身份，而Cookie就是浏览器帮我们自动管理的“身份凭证容器”，不用我们手动在前端存储和携带Token，既安全又省心。

如何把HttpOnly Cookie里的Access Token发回后端？ #

这正是HttpOnly Cookie最省心的地方：浏览器会自动帮你做这件事，完全不需要JS介入。

当后端在响应中通过Set-Cookie头设置了HttpOnly Cookie（比如：Set-Cookie: access_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...; HttpOnly; Secure; SameSite=Strict; Domain=yourapp.com; Path=/），浏览器会自动把这个Cookie存在本地，并且在后续向符合Cookie匹配规则的后端发起请求时，自动把这个Cookie附加到请求的Cookie头里。

举个例子：如果你的API域名是api.yourapp.com，而Cookie的Domain设置为.yourapp.com（或者直接api.yourapp.com），Path设置为/，那么每次你用fetch或axios向API发请求时，浏览器都会自动带上这个HttpOnly Cookie，你不需要写任何代码手动添加Authorization头或者处理Cookie。

如果是跨域请求（比如前端在yourapp.com，API在api.yourapp.com），只需要在前端请求时开启withCredentials（比如fetch(url, { credentials: 'include' })），同时后端在CORS响应头里设置Access-Control-Allow-Credentials: true，浏览器就会正常携带Cookie。

能不能用JavaScript添加带有HttpOnly标记的Cookie？ #

答案是不行，这是浏览器的安全限制。

document.cookie API只能设置没有HttpOnly标记的Cookie——因为如果允许JS设置HttpOnly Cookie，恶意XSS脚本就可以伪造HttpOnly Cookie来绕过安全机制，这就违背了HttpOnly的设计初衷。HttpOnly Cookie只能由后端通过Set-Cookie响应头来设置。

总结一下：用HttpOnly Cookie存储Access Token是防XSS的最优方案之一，浏览器会自动帮你完成存储和携带的工作，你只需要在后端正确配置Cookie的属性（HttpOnly、Secure、SameSite、Domain、Path），前端正常发起请求即可，完全不需要手动操作这个Token。

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