L'en-tête de réponse HTTPCross-Origin-Embedder-Policy (COEP) configure la politique du document courant pour le chargement et l'intégration de ressources d'origine croisée.

La politique définissant si une ressource particulière peut être intégrée en cross-site peut être définie pour cette ressource à l'aide de l'en-têteCross-Origin-Resource-Policy (CORP) lors d'une requêteno-cors, ou en utilisantCORS.Si aucune de ces politiques n'est définie, alors par défaut, les ressources peuvent être chargées ou intégrées dans un document comme si elles avaient une valeur CORP decross-origin.

L'en-têteCross-Origin-Embedder-Policy permet d'exiger que les en-têtes CORP ou CORS soient définis pour charger des ressources d'origine croisée dans le document courant.Vous pouvez aussi définir la politique pour conserver le comportement par défaut, ou autoriser le chargement des ressources mais en supprimant les éventuels identifiants qui auraient pu être envoyés.La politique s'applique aux ressources chargées, ainsi qu'aux ressources dans les<iframe> et les cadres imbriqués.

Syntaxe

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

Directives

unsafe-none

Autorise le document à charger des ressources d'origine croiséesans autorisation explicite via le protocole CORS ou l'en-têteCross-Origin-Resource-Policy.Il s'agit de la valeur par défaut.

require-corp

Un document ne peut charger que des ressources de même origine, ou des ressources explicitement marquées comme chargeables depuis une autre origine.

Le chargement de ressources d'origine croisée sera bloqué par COEP sauf si :

• La ressource est demandée en modeno-cors et la réponse inclut un en-têteCross-Origin-Resource-Policy qui autorise son chargement dans l'origine du document.
• La ressource est demandée en modecors et la ressource prend en charge et autorise CORS.Cela peut se faire, par exemple, en HTML avec l'attributcrossorigin, ou en JavaScript en effectuant une requête avec{mode="cors"}.

credentialless

Un document peut charger des ressources d'origine croisée demandées enmodeno-corssans autorisation explicite via l'en-têteCross-Origin-Resource-Policy.Dans ce cas, les requêtes sont envoyées sans identifiants : les cookies sont omis dans la requête et ignorés dans la réponse.

Le comportement de chargement cross-origin pour les autresmodes de requête est identique à celui derequire-corp.Par exemple, une ressource d'origine croisée demandée en modecors doit prendre en charge (et autoriser) CORS.

Exemples

Fonctionnalités dépendant de l'isolation inter-origines

Certaines fonctionnalités, comme l'accès aux objetsSharedArrayBuffer ou l'utilisation dePerformance.now() avec des minuteurs non limités, ne sont disponibles que si votre document estisolé inter-origines.

Pour utiliser ces fonctionnalités dans un document, vous devez définir l'en-tête COEP avec la valeurrequire-corp oucredentialless, et l'en-têteCross-Origin-Opener-Policy àsame-origin.De plus, la fonctionnalité ne doit pas être bloquée parPermissions-Policy: cross-origin-isolated.

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

Vous pouvez utiliser les propriétésWindow.crossOriginIsolated etWorkerGlobalScope.crossOriginIsolated pour vérifier si les fonctionnalités sont restreintes respectivement dans les contextes window et 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);}

Éviter le blocage COEP avec CORS

Si vous activez COEP avecrequire-corp et souhaitez intégrer une ressource d'origine croisée qui prend en chargeCORS, vous devrez explicitement indiquer qu'elle est demandée en modecors.

Par exemple, pour récupérer une image déclarée en HTML depuis un site tiers qui prend en charge CORS, vous pouvez utiliser l'attributcrossorigin afin qu'elle soit demandée en modecors :

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

Vous pouvez de la même façon utiliser l'attributHTMLScriptElement.crossOrigin ou effectuer une requête avec{ mode: 'cors' } pour demander un fichier en mode CORS en JavaScript.

Si CORS n'est pas pris en charge pour certaines images, une valeur COEP decredentialless peut être utilisée comme alternative pour charger l'image sans consentement explicite du serveur distant, au prix d'une requête sans cookies.

Spécifications

Compatibilité des navigateurs

Voir aussi

• L'en-têteCross-Origin-Opener-Policy
• Les propriétés APIWindow.crossOriginIsolated etWorkerGlobalScope.crossOriginIsolated
• Cross Origin Opener Policy^(angl.) dansWhy you need "cross-origin isolated" for powerful features sur web.dev (2020)
• COOP et COEP expliqué : Artur Janc, Charlie Reis, Anne van Kesteren^(angl.) (2020)