安全地启用跨源隔离

概述

跨源隔离是使用 SharedArrayBuffer 等能力的前提，但它会改变资源加载规则，未携带相应头的跨源资源会被阻断。启用前需盘清所依赖的跨源资源，并在上线后以运行时标志确认隔离生效。

关键步骤

1. 设置 COOP 为 same-origin、COEP 为 require-corp。
2. 确保所有跨源资源带有 CORS 或 CORP 头。
3. 对失败的图片或字体添加 crossorigin 或 CORP。
4. 验证 crossOriginIsolated 为 true 且目标功能可用。

验证

• 页面处于跨源隔离状态。
• 必需的跨源资源仍能加载。
• 弹窗的关系按预期处理。
• 目标 API 在隔离下可用。

注意事项

• 跨源隔离可能破坏不发送所需头的第三方嵌入，且无变通余地。
• 必须全站一致应用，否则不同页面能力不同。

适用范围

本条目围绕「安全地启用跨源隔离」给出可复制的步骤、验证方式与常见问题，适合需要按此流程落地的工程团队。执行时请结合自身上下文调整命令与阈值，并在变更前后留存证据，便于后续复核与回滚。

res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');
// then: self.crossOriginIsolated === true