Cross-Origin-Embedder-Policy
The HTTP Cross-Origin-Embedder-Policy
(COEP) response header configures embedding cross-origin resources into the document.
Header type | Response header |
---|---|
Forbidden header name | No |
Syntax
Cross-Origin-Embedder-Policy: unsafe-none | require-corp | credentialless
Directives
unsafe-none
-
This is the default value. Allows the document to fetch cross-origin resources without giving explicit permission through the CORS protocol or the
Cross-Origin-Resource-Policy
header. require-corp
-
A document can only load resources from the same origin, or resources explicitly marked as loadable from another origin. If a cross origin resource supports CORS, the
crossorigin
attribute or theCross-Origin-Resource-Policy
header must be used to load it without being blocked by COEP. credentialless
-
no-cors cross-origin requests are sent without credentials. In particular, it means Cookies are omitted from the request, and ignored from the response. The responses are allowed without an explicit permission via the
Cross-Origin-Resource-Policy
header. Navigate responses behave similarly as therequire-corp
mode: They requireCross-Origin-Resource-Policy
response header.
Examples
Features that depend on cross-origin isolation
Certain features, such as access to SharedArrayBuffer
objects or using Performance.now()
with unthrottled timers, are only available if your document is cross-origin isolated.
To use these features in a document, you will need to set the COEP header with a value of require-corp
or credentialless
, and the Cross-Origin-Opener-Policy
header to same-origin
.
In addition the feature must not be blocked by Permissions-Policy: cross-origin-isolated
.
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp
You can use the Window.crossOriginIsolated
and WorkerGlobalScope.crossOriginIsolated
properties to check if the features are restricted in window and worker contexts, respectively:
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);
}
Avoiding COEP blockage with CORS
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 />
If CORS is not supported for some images, a COEP value of credentialless
can be used as an alternative to load the image without any explicit opt-in from the cross-origin server, at the cost of requesting it without cookies.
Specifications
Specification |
---|
HTML Standard # coep |
Browser compatibility
BCD tables only load in the browser