前端如何防止Cookie被第三方脚本窃取？

博主宇硕提问于 2026-03-08 14:43:21 阅读 16

安全

我在做登录功能时，后端设置了HttpOnly的Cookie，但还是担心XSS攻击下其他恶意脚本能读取到敏感信息。虽然HttpOnly能阻止JS访问，但如果页面引入了不可信的第三方脚本，会不会有别的泄露风险？

比如我现在这样设置Cookie：

document.cookie = "sessionId=abc123; Path=/; Secure; HttpOnly; SameSite=Strict";

但浏览器控制台报错说HttpOnly不能通过JS设置，那正确的做法到底是什么？是不是只能靠后端设置？前端还能做点什么来加强隔离？

Cookie隔离

我来解答赞 6 收藏

反馈

1 条解答

乙豪（打工版） Lv1

哈，这问题问得好。HttpOnly确实不能在前端用JS设置，这是浏览器安全机制决定的。我来给你讲讲WordPress里的正确做法和额外防护措施。

首先你得明白HttpOnly和Secure这两个属性必须由后端设置，PHP里这样写：

setcookie(

    'sessionId',

    'abc123',

    [

        'expires' => time() + 3600,

        'path' => '/',

        'secure' => true,

        'httponly' => true,

        'samesite' => 'Strict'

    ]

);

前端能做的防护确实有限，但有几个实用技巧：
1. 主题里加个CSP策略头，限制脚本来源，比如这样：

header("Content-Security-Policy: script-src 'self' https://trusted.cdn.com");

2. 用Subresource Integrity校验第三方脚本，像这样：

3. 实在要用不可信脚本就放到沙盒iframe里，用postMessage通信

还有个骚操作是设置两个cookie：一个HttpOnly的存真实token，另一个普通cookie存随机标识符，前端只读普通那个。不过有点折腾，看项目需求吧。

XSS防护是个系统工程，WordPress核心其实做得不错了，wp_enqueue_script这些API已经帮你处理了很多安全问题。关键还是别手贱乱用eval和innerHTML，第三方脚本能不用就不用，要用也得挑靠谱的。

2026-03-08 15:00