Cross-Origin-Embedder-Policy

翻译不完整。 请帮助我们翻译这篇文章!

HTTP Cross-Origin-Embedder-Policy (COEP) 响应标头可防止文档加载未明确授予文档权限(通过 CORP或者 CORS)的任何跨域资源 。

Header type Response header
Forbidden header name no

语法

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

指令

unsafe-none
这是默认值. 允许文档获取跨源资源,而无需通过CORS协议或 Cross-Origin-Resource-Policy 头。
require-corp
文档只能从相同的源加载资源,或显式标记为可从另一个源加载的资源。
如果跨源资源支持CORS,则 crossorigin 属性或 Cross-Origin-Resource-Policy 头必须使用它来加载资源,而不会被COEP阻止。

示例

某些功能取决于跨域隔离

为了节省时间你可以只接受类似于SharedArrayBuffer 或者 Performance.now() 对象, 只要你的文档有一个值被设置为require-corp 的 COEP 头部.

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

你可以看看这个头部 Cross-Origin-Opener-Policy ,这样你设置起来会做的更好。

检查 cross origin isolation 是否成功,你可以再次测试crossOriginIsolated 这个属性 是否对窗口和工作的上下文有效:

if (crossOriginIsolated) {
  // Post SharedArrayBuffer
} else {
  // Do something else
}

避免CORS阻塞COEP

If you enable COEP using require-corp and have a cross origin resource that needs to be loaded, it needs to support CORS and you need to explicitly mark the resource as loadable from another origin to avoid blockage from COEP. For example, you can use the crossorigin attribute for this image from a third-party site:

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

规范说明

Specification
HTML Living Standard
Cross-Origin-Embedder-Policy header

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Cross-Origin-Embedder-PolicyChrome Full support 83Edge Full support 83Firefox Full support 79IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android Full support 83Firefox Android Full support 79Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support

参阅