跨域嵌入策略 (COEP) 标头

语法

Cross-Origin-Embedder-Policy: unsafe-none | require-corp | credentialless

指令

unsafe-none

允许文档加载跨域资源，而无需通过 CORS 协议或 Cross-Origin-Resource-Policy 标头授予明确权限。这是默认值。

require-corp

文档只能加载同源资源，或明确标记为可从其他源加载的资源。

除非满足以下条件，否则 COEP 将阻止跨域资源加载：

• 资源以 no-cors 模式请求，并且响应包含一个 Cross-Origin-Resource-Policy 标头，允许它加载到文档源中。
• 资源以 cors 模式请求，并且资源支持并允许 CORS。例如，在 HTML 中可以使用 crossorigin 属性，或者在 JavaScript 中使用 {mode="cors"} 发出请求。

credentialless

文档可以加载以 no-cors 模式 请求的跨域资源，而无需通过 Cross-Origin-Resource-Policy 标头明确许可。在这种情况下，请求在没有凭据的情况下发送：请求中省略 cookie，响应中忽略 cookie。

其他 请求模式 的跨域加载行为与 require-corp 相同。例如，以 cors 模式请求的跨域资源必须支持 (并允许) CORS。

示例

依赖于跨域隔离的特性

某些特性，例如访问 SharedArrayBuffer 对象或使用 Performance.now() 配合不限速计时器，仅在您的文档是 跨域隔离 时才可用。

要在文档中使用这些特性，您需要将 COEP 标头设置为 require-corp 或 credentialless，并将 Cross-Origin-Opener-Policy 标头设置为 same-origin。此外，该特性不能被 Permissions-Policy: cross-origin-isolated 阻止。

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

您可以使用 Window.crossOriginIsolated 和 WorkerGlobalScope.crossOriginIsolated 属性分别检查窗口和 Worker 上下文中这些特性是否受限。

const myWorker = new Worker("worker.js");

if (crossOriginIsolated) {
  const buffer = new SharedArrayBuffer(16);
  myWorker.postMessage(buffer);
} else {
  const buffer = new ArrayBuffer(16);
  myWorker.postMessage(buffer);
}

使用 CORS 避免 COEP 阻塞

如果您使用 require-corp 启用 COEP，并希望嵌入支持 CORS 的跨域资源，则需要明确指定以 cors 模式请求它。

例如，要从支持 CORS 的第三方站点获取 HTML 中声明的图像，您可以使用 crossorigin 属性，以便以 cors 模式请求它。

<img src="https://thirdparty.com/img.png" crossorigin />

您也可以类似地使用 HTMLScriptElement.crossOrigin 属性或使用 { mode: 'cors' } 来通过 JavaScript 以 CORS 模式请求文件。

如果某些图像不支持 CORS，则可以使用 credentialless 的 COEP 值作为替代方案，在不需要跨源服务器明确选择加入的情况下加载图像，代价是请求时不带 cookie。

规范

浏览器兼容性

另见

• Cross-Origin-Opener-Policy
• Window.crossOriginIsolated 和 WorkerGlobalScope.crossOriginIsolated
• Why you need "cross-origin isolated" for powerful features 在 web.dev 上的跨域开启策略 (2020)
• COOP 和 COEP 解释：Artur Janc、Charlie Reis、Anne van Kesteren (2020)