Cross-Origin-Embedder-Policy

unsafe-none

Erlaubt es 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 aus demselben Ursprung laden oder Ressourcen, die explizit als aus einem anderen Ursprung ladbar markiert sind.

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

• Die Ressource wird im no-cors Modus abgefragt und die Antwort enthält einen Cross-Origin-Resource-Policy Header, der das Laden in den Dokumentursprung erlaubt.
• Die Ressource wird im cors Modus angefordert und die Ressource unterstützt und wird von CORS erlaubt. Dies kann beispielsweise in HTML mit dem crossorigin Attribut oder in JavaScript durch eine Anfrage mit {mode="cors"} erfolgen.

credentialless

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

Das Laden von Cross-Origin-Ressourcen 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 werden).

Bestimmte Funktionen, wie der Zugriff auf SharedArrayBuffer Objekte oder die Verwendung 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. Darüber hinaus darf die Funktion nicht durch Permissions-Policy: cross-origin-isolated blockiert werden.

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 in Fenster- und Worker-Kontexten 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 explizit angeben, dass sie im cors Modus angefordert wird.

Zum Beispiel, um ein Bild in HTML von einer Drittanbieterseite abzurufen, 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 Fetchen mit { mode: 'cors' } verwenden, um eine Datei im CORS-Modus mithilfe von 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 explizite Zustimmung des Cross-Origin-Servers zu laden, allerdings auf Kosten des Abrufs 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 and COEP explained: Artur Janc, Charlie Reis, Anne van Kesteren (2020)