跨域 iframe 内嵌页面 JavaScript 写 cookie 失败解决方法

最新推荐文章于 2025-11-02 16:23:19 发布

转载最新推荐文章于 2025-11-02 16:23:19 发布 · 1.4w 阅读

17 ·

CC 4.0 BY-SA版权

原文链接：https://www.qinshenxue.com/article/cross-domain-iframe-javascript-failed-to-write-cookie-solution.html

文章标签：

#javascript #前端 #服务器

在新版Chrome下，当iframe页面和父页面跨域时，需要设置Cookie的SameSite=None;Secure才能成功写入。无论是服务器端如Express使用express-session配置，还是页面内JavaScript尝试写Cookie，都需要添加这个标志。例如，使用nginx可以通过proxy_cookie_path配置SameSite属性。

js写cookie的方案

iframe 页面和其父级页面在不同域的时候，如果iframe 页面需要写入Cookie，比如保存登录态，此时需要在写入的时候增加 SameSite=None;Secure;，方能写入成功。

上面是服务器在写cookie的时候需要处理 SameSite，那么如果页面内的 JavaScript 写 cookie，会发现也不能写入成功。

在一个跨域的内嵌页面测试如下图所示。

可以看到写入后，获取 Cookie为空，查看浏览器的 Cookie 面板，也没有发现刚才写入的内容，说明写入失败。

那么是否也需要在写入的时候增加和服务器一样的标识呢？

此时可以看到，Cookie 成功写入了。

服务器写cookie的方案

新版的Chrome下iframe内加载的页面无法写入Cookie，需要嵌入的站点在写Cookie的时候增加 SameSite=none 和 Secure=true。

对于 Express 站点，如果使用的是 express-session ，在其 1.17.0 版本后，支持了配置 sameSite=none，之前的版本是不支持的。

配置如下

测试效果

如果使用 nginx，可以配置 proxy_cookie_path。

location / {
        # your usual config ...
        # hack, set all cookies to secure, httponly and samesite (strict or lax)
        proxy_cookie_path / "/; secure; HttpOnly; SameSite=strict";
    }