如何禁用跨域Iframe的隔离/分区资源及Service Worker？

核心问题 #

ChromeOS 111.0.5563.71版本里，editor-example.com的iframe嵌入preview-example.com时，预览端会生成两个同源同作用域的活跃Service Worker——iframe内的SW使用带^标识的独立分区存储，直接导致编辑器与预览端的MessageChannel自动重连失效。Windows 10上的Chrome完全正常，目前临时方案是直接给新打开的预览标签SW共享MessageChannel端口，但SW会在10-20秒内被浏览器回收，必须手动重开预览页。

已尝试无效的操作 #

• 在Firebase托管中配置Origin-Agent-Cluster: ?0响应头，无效果
• 无法使用子域名或浏览器扩展方案
• Github Codespace部署无此问题，但无法作为日常开发/生产环境使用

可行解决思路 #

1. 强制SW使用同一存储分区 #

在preview-example.com的SW注册代码中，明确指定scope参数，同时向SW发送编辑器域名的验证信息，确保iframe和独立标签页的SW归属同一存储分区：

// preview端注册SW的代码
navigator.serviceWorker.register('/sw.js', {
  scope: '/'
}).then(registration => {
  // 向SW发送验证信息，锁定存储分区
  registration.active?.postMessage({
    type: 'VALIDATE_EDITOR_ORIGIN',
    editorOrigin: 'editor-example.com'
  });
});

同时在SW内部添加验证逻辑，直接注销未通过验证的实例：

// sw.js 内部代码
self.addEventListener('message', (event) => {
  if (event.data.type === 'VALIDATE_EDITOR_ORIGIN' && event.data.editorOrigin === 'editor-example.com') {
    // 标记当前SW为有效实例，接管所有客户端
    self.clients.claim();
  } else {
    // 注销非验证通过的SW实例
    self.registration.unregister();
  }
});

2. 主动清理多余SW实例 #

在preview的主页面（非iframe内嵌页面）加载时，主动获取所有同源SW注册信息，只保留当前页面关联的SW实例：

// preview-example.com主页面代码
async function clearDuplicateSWs() {
  const registrations = await navigator.serviceWorker.getRegistrations();
  for (const reg of registrations) {
    if (reg.active?.state === 'activated' && reg.scope === '/') {
      const clients = await reg.active.clients.matchAll();
      // 若SW未关联当前页面，直接注销
      if (!clients.some(client => client.url === window.location.href)) {
        await reg.unregister();
      }
    }
  }
  // 重新注册确保当前页面的SW为唯一实例
  await navigator.serviceWorker.register('/sw.js', { scope: '/' });
}
// 页面加载时执行清理逻辑
window.addEventListener('load', clearDuplicateSWs);

3. 延长SW存活时间 #

针对临时方案中SW快速被回收的问题，在SW内部添加心跳机制和请求拦截，让浏览器判定SW处于活跃状态：

// sw.js 内部代码
let heartbeatTimer;

self.addEventListener('activate', () => {
  // 每5秒发送一次心跳，维持SW活跃状态
  heartbeatTimer = setInterval(() => {
    self.clients.matchAll().then(clients => {
      if (clients.length > 0) {
        clients.forEach(client => client.postMessage({ type: 'HEARTBEAT' }));
      } else {
        // 无活跃客户端时停止心跳，避免无效资源占用
        clearInterval(heartbeatTimer);
      }
    });
  }, 5000);
});

self.addEventListener('fetch', (event) => {
  // 拦截所有请求，延长SW存活周期
  event.respondWith(fetch(event.request));
});

4. 检查Firebase托管配置 #

确认firebase.json中的响应头配置无冲突，保证跨域iframe正常嵌入的同时，尝试消除分区隔离：

{
  "hosting": {
    "headers": [
      {
        "source": "**",
        "headers": [
          {
            "key": "Origin-Agent-Cluster",
            "value": "?0"
          },
          {
            "key": "Cross-Origin-Opener-Policy",
            "value": "unsafe-none"
          }
        ]
      }
    ]
  }
}

注意：Cross-Origin-Opener-Policy设为unsafe-none才能保证跨域iframe正常加载，若设为same-origin会直接阻止iframe嵌入。

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