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

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";
    }

---

总结

在 iframe 跨域的场景下，无论是服务器，还是内嵌的页面，如果要写入 Cookie，都需要增加 SameSite=None;Secure;

 

转载请注明出处。本文地址: 跨域 iframe 内嵌页面 JavaScript 写 cookie 失败解决方法 - 前端路迹