Cross-Origin-Embedder-Policy

unsafe-none

Erlaubt dem Dokument, Cross-Origin-Ressourcen ohne ausdrückliche Erlaubnis durch das CORS-Protokoll oder den Cross-Origin-Resource-Policy-Header zu laden. Dies ist der Standardwert.

require-corp

Ein Dokument kann nur Ressourcen von derselben Herkunft laden oder Ressourcen, die ausdrücklich als ladbar von einer anderen Herkunft gekennzeichnet sind.

Das Laden von Cross-Origin-Ressourcen wird durch COEP blockiert, es sei denn:

• Die Ressource wird im no-cors-Modus angefordert und die Antwort enthält einen Cross-Origin-Resource-Policy-Header, der erlaubt, sie in die Dokumentherkunft zu laden.
• Die Ressource wird im cors-Modus angefordert und die Ressource unterstützt und wird von CORS erlaubt. Dies kann beispielsweise in HTML unter Verwendung des crossorigin-Attributs erfolgen oder in JavaScript, indem eine Anfrage mit {mode="cors"} gestellt wird.

credentialless

Ein Dokument kann Cross-Origin-Ressourcen laden, die im no-cors-Modus ohne ausdrückliche Erlaubnis über den Cross-Origin-Resource-Policy-Header angefordert werden. In diesem Fall werden Anfragen ohne Anmeldedaten gesendet: Cookies werden in der Anfrage weggelassen und in der Antwort ignoriert.

Das Cross-Origin-Ladeverhalten für andere Anfragemodi ist dasselbe wie für require-corp. Zum Beispiel muss eine im cors-Modus angeforderte Cross-Origin-Ressource CORS unterstützen (und von CORS erlaubt sein).

Bestimmte Funktionen, wie der Zugriff auf SharedArrayBuffer-Objekte oder die Nutzung von Performance.now() mit nicht gedrosselten Timern, sind nur verfügbar, wenn Ihr Dokument Cross-Origin isoliert ist.

Um diese Funktionen in einem Dokument zu verwenden, müssen Sie den COEP-Header mit einem Wert von require-corp oder credentialless setzen und den Cross-Origin-Opener-Policy-Header auf same-origin. Zusätzlich darf die Funktion nicht durch Permissions-Policy: cross-origin-isolated blockiert sein.

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

Sie können die Eigenschaften Window.crossOriginIsolated und WorkerGlobalScope.crossOriginIsolated verwenden, um zu prüfen, ob die Funktionen im Fenster- und Worker-Kontext eingeschränkt sind:

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);
}

Wenn Sie COEP mit require-corp aktivieren und eine Cross-Origin-Ressource einbetten möchten, die CORS unterstützt, müssen Sie ausdrücklich angeben, dass sie im cors-Modus angefordert wird.

Um beispielsweise ein in HTML deklariertes Bild von einer Drittanbieter-Website zu holen, die CORS unterstützt, können Sie das crossorigin-Attribut verwenden, sodass es im cors-Modus angefordert wird:

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

Sie können ähnlich das HTMLScriptElement.crossOrigin-Attribut oder das Abrufen mit { mode: 'cors' } verwenden, um eine Datei im CORS-Modus mit JavaScript anzufordern.

Wenn CORS für einige Bilder nicht unterstützt wird, kann ein COEP-Wert von credentialless als Alternative verwendet werden, um das Bild ohne ausdrückliches Opt-in des Cross-Origin-Servers zu laden, auf Kosten der Anforderung ohne Cookies.

• Cross-Origin-Opener-Policy
• Window.crossOriginIsolated und WorkerGlobalScope.crossOriginIsolated
• Cross Origin Opener Policy in Why you need "cross-origin isolated" for powerful features auf web.dev (2020)
• COOP und COEP erklärt: Artur Janc, Charlie Reis, Anne van Kesteren (2020)