Cross-Origin-Embedder-Policy (COEP) header

The HTTPCross-Origin-Embedder-Policy (COEP)response header configures the current document's policy for loading and embedding cross-origin resources.

The policy for whether a particular resource is embeddable cross-site may be defined for that resource using theCross-Origin-Resource-Policy (CORP) header for ano-cors fetch, or usingCORS.If neither of these policies are set, then by default, resources can be loaded or embedded into a document as though they had a CORP value ofcross-origin.

TheCross-Origin-Embedder-Policy allows you to require that CORP or CORS headers be set in order to load cross-site resources into the current document.You can also set the policy to keep the default behavior, or to allow the resources to be loaded, but strip any credentials that might otherwise be sent.The policy applies to loaded resources, and resources in<iframe>s and nested frames.

Note:TheCross-Origin-Embedder-Policy doesn't override or affect the embedding behavior for a resource for which CORP or CORS has been set.If CORP restricts a resource to being embedded onlysame-origin, it won't be loaded cross-origin into a resource irrespective of the COEP value.

Header type	Response header
Forbidden response header name	No

Syntax

http

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

Directives

unsafe-none

Allows the document to load cross-origin resourceswithout giving explicit permission through the CORS protocol or theCross-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 inno-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 incors mode and the resource supports and is permitted by CORS.This can be done, for example, in HTML using thecrossorigin attribute, or in JavaScript by making a request with{mode="cors"}.

credentialless

A document can load cross-origin resources that are requested inno-cors modewithout an explicit permission via theCross-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 behavior for otherrequest modes is the same as forrequire-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 toSharedArrayBuffer objects or usingPerformance.now() with unthrottled timers, are only available if your document iscross-origin isolated.

To use these features in a document, you will need to set the COEP header with a value ofrequire-corp orcredentialless, and theCross-Origin-Opener-Policy header tosame-origin.In addition the feature must not be blocked byPermissions-Policy: cross-origin-isolated.

http

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

You can use theWindow.crossOriginIsolated andWorkerGlobalScope.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 usingrequire-corp and want to embed a cross origin resource that supportsCORS, you will need to explicitly specify that it is requested incors mode.

For example, to fetch an image declared in HTML from a third-party site that supports CORS, you can use thecrossorigin attribute so that it is requested incors mode:

html

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

You can similarly use theHTMLScriptElement.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 ofcredentialless 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.