第三方存储分区落地后iframe localStorage跨域访问问题求解

核心结论 #

First-Party Set完全可以解决你的问题。它能让浏览器将web.com和iframe.com识别为同一第一方实体，共享同一个存储分区。这样iframe.com无论是被嵌入在web.com中，还是单独访问时，都能访问到同一组localStorage数据。

具体实现步骤 #

1. 创建First-Party Set配置文件 #

在你的主域名（比如web.com）的.well-known目录下，创建名为first-party-set.json的配置文件，内容如下：

{
  "owner": "web.com",
  "members": [
    {
      "domain": "iframe.com",
      "type": "associated"
    }
  ]
}

• owner：指定第一方组的主域名，必须是你拥有的顶级域名
• members：列出关联域名，type设为associated表示该域名属于同一第一方实体

2. 在两个域名上声明归属 #

为web.com和iframe.com的所有HTTP响应添加First-Party-Set响应头，指向配置文件的URL：

First-Party-Set: https://web.com/.well-known/first-party-set.json

如果无法修改服务器响应头，也可以在页面的<head>中添加meta标签（优先级低于响应头）：

<meta http-equiv="First-Party-Set" content="https://web.com/.well-known/first-party-set.json">

3. 验证配置有效性 #

• 打开Chrome浏览器，访问chrome://first-party-sets/，可以查看已注册的第一方组，确认web.com和iframe.com是否在同一组内
• 在开发者工具的Application面板中，查看localStorage的存储分区，确认两个域名的存储上下文已统一

4. 原有代码无需修改（示例参考） #

你的现有postMessage和存储逻辑保持不变，存储分区统一后，iframe.com单独访问时就能直接读取之前存入的数据：

// web.com 发送消息的代码
const iframe = document.getElementById('my-iframe');
iframe.contentWindow.postMessage({ text: 'Hello from web.com' }, 'https://iframe.com');

// iframe.com 接收消息并存储的代码
window.addEventListener('message', (event) => {
  if (event.origin === 'https://web.com') {
    localStorage.setItem('message', JSON.stringify(event.data));
  }
});

// iframe.com 单独访问时读取数据的代码
window.onload = () => {
  const savedMessage = localStorage.getItem('message');
  if (savedMessage) {
    console.log('读取到消息:', JSON.parse(savedMessage));
  }
};

关键注意事项 #

• 配置文件必须通过HTTPS访问，浏览器不支持HTTP的.well-known资源
• 所有关联域名必须由你合法拥有，不能添加不属于你的域名
• 目前Chrome、Edge对First-Party Set支持完善，Firefox处于测试阶段，需注意浏览器兼容性
• 配置生效可能需要清除浏览器缓存，或等待浏览器自动刷新配置

内容的提问来源于stack exchange，提问作者罗钦玮