浏览器是否已阻止跨域iframe访问localStorage？跨域登录方案求助

问题背景 #

原跨域持久登录流程如下：

• 登录https://a.com
  • 将认证token存储于localStorage
• 访问https://b.com
  • 加载https://a.com/getToken的iframe
  • 创建window.addEventListener('message', (message) => {...})消息监听器
  • iframe内的a.com读取localStorage中存储的token
  • a.com通过window.parent.postMessage()将token发送至b.com父页面

该方案近期失效，核心原因是a.com在跨站iframe中无法访问localStorage。Firefox调整Cookie拦截设置为仅拦截「跨站跟踪Cookie」可恢复功能，但Chromium系浏览器无对应简便配置。

原因分析 #

这是浏览器隐私政策升级导致的限制：Chromium的Partitioned Storage、Firefox的Total Cookie Protection等机制，会默认隔离跨站iframe对非分区存储（包括localStorage）的访问，以此防范跨站跟踪行为。

可尝试的HTTP头配置方案 #

1. COEP与COOP组合头 #

在a.com的/getToken页面返回以下响应头：

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin

此配置会让iframe与父页面形成独立的浏览上下文，同时允许访问localStorage，但需注意：a.com的/getToken页面不能加载未配置对应跨域头的外部资源，否则资源会被拦截。

2. 存储访问API配合权限策略头 #

• 在a.com的全局响应头添加：

  Permissions-Policy: storage-access=(self "https://b.com")
  

  允许b.com的iframe向a.com申请存储访问权限。
• 修改iframe内a.com的代码，主动申请权限后再读取localStorage：

  async function transferToken() {
    try {
      await document.requestStorageAccess();
      const token = localStorage.getItem('authToken');
      window.parent.postMessage(token, 'https://b.com');
    } catch (err) {
      // 处理权限申请失败逻辑，比如引导用户手动授权
    }
  }
  transferToken();
  

  此方案更灵活，但部分浏览器要求用户有页面交互（如点击）后才能成功申请权限。

3. 迁移至分区Cookie（仅适用于Cookie存储） #

若将token从localStorage迁移到Cookie，可给Cookie添加Partitioned属性：

Set-Cookie: authToken=xxx; Secure; SameSite=None; Partitioned; Path=/

分区Cookie会与嵌入上下文关联，跨站iframe可访问对应分区的Cookie，但此方案需调整token存储方式，不适用于localStorage。

设计模式的适用性 #

原有的iframe + localStorage + postMessage模式已不再适配现代浏览器的隐私保护规则，属于被逐步淘汰的跨域身份传递方案。推荐替换为以下合规方案：

• OAuth2/OpenID Connect：通过标准授权流程，让b.com重定向到a.com的授权页面获取令牌，这是当前最安全合规的跨域身份验证方式。
• CORS配置：若a.com与b.com同属一个主体，可配置CORS规则，允许b.com直接向a.com的接口请求token（需携带用户凭证如Cookie）。

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