Cross-Origin-Embedder-Policy: unsafe-none | require-corp | credentialless
Directives
unsafe-none
-
Allows the document to load cross-origin resources without giving explicit permission through the CORS protocol or the
Cross-Origin-Resource-Policy
header. This is the default value. require-corp
-
A document can only load resources from the same origin, or resources explicitly marked as loadable from another origin.
Cross-origin resource loading will be blocked by COEP unless:
- The resource is requested in
no-cors
mode and the response includes aCross-Origin-Resource-Policy
header that allows it to be loaded into the document origin. - The resource is requested in
cors
mode and the resource supports and is permitted by CORS. This can be done, for example, in HTML using the{mode="cors"}
.
- The resource is requested in
credentialless
-
A document can load cross-origin resources that are requested in
Cross-Origin-Resource-Policy
header. In this case requests are sent without credentials: cookies are omitted in the request, and ignored in the response.The cross-origin loading behaviour for other request modes is the same as for
require-corp
. For example, a cross-origin resource requested incors
mode must support (and be permitted by) CORS.
Examples
Features that depend on cross-origin isolation
Certain features, such as access to 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 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 want to embed a cross origin resource that supports CORS, you will need to explicitly specify that it is requested in cors
mode.
For example, to fetch an image declared in HTML from a third-party site that supports CORS, you can use the crossorigin
attribute so that it is requested in cors
mode:
<img src="/cats-d8c4vu/thirdparty.com/img.png" crossorigin />
You can similarly use the HTMLScriptElement.crossOrigin
attribute or fetch with { mode: 'cors' }
to request a file in CORS mode using JavaScript.
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 # coep |
Browser compatibility
BCD tables only load in the browser
See also
Cross-Origin-Opener-Policy
WorkerGlobalScope.crossOriginIsolated
- Cross Origin Opener Policy in Why you need "cross-origin isolated" for powerful features on web.dev (2020)
- COOP and COEP explained: Artur Janc, Charlie Reis, Anne van Kesteren (2020)