Cross-Origin-Embedder-Policy

Der HTTP Cross-Origin-Embedder-Policy (COEP) Antwort-Header konfiguriert das Einbetten von Cross-Origin-Ressourcen in das Dokument.

Header-Typ Antwort-Header
Verbotener Header-Name Nein

Syntax

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

Direktiven

unsafe-none

Dies ist der Standardwert. Erlaubt dem Dokument, Cross-Origin-Ressourcen abzurufen, ohne explizite Erlaubnis über das CORS-Protokoll oder den Cross-Origin-Resource-Policy-Header zu geben.

require-corp

Ein Dokument kann nur Ressourcen von derselben Herkunft oder Ressourcen laden, die ausdrücklich als von einer anderen Herkunft ladbar gekennzeichnet sind. Wenn eine Cross-Origin-Ressource CORS unterstützt, muss das crossorigin-Attribut oder der Cross-Origin-Resource-Policy-Header verwendet werden, um zu verhindern, dass sie durch COEP blockiert wird.

credentialless

no-cors Cross-Origin-Anfragen werden ohne Anmeldeinformationen gesendet. Insbesondere bedeutet dies, dass Cookies von der Anfrage weggelassen und von der Antwort ignoriert werden. Die Antworten sind ohne explizite Erlaubnis über den Cross-Origin-Resource-Policy-Header erlaubt. Navigations-Antworten verhalten sich ähnlich wie im require-corp-Modus: Sie erfordern den Cross-Origin-Resource-Policy-Antwort-Header.

Beispiele

Funktionen, die von Cross-Origin-Isolation abhängig sind

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 verwenden zu können, 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 werden.

http
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 überprüfen, ob die Funktionen in Fenster- und Worker-Kontexten jeweils eingeschränkt sind:

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

Vermeidung von COEP-Blockaden mit CORS

Wenn Sie COEP unter Verwendung von require-corp aktivieren und eine Cross-Origin-Ressource geladen werden muss, muss sie CORS unterstützen und Sie müssen die Ressource ausdrücklich als von einer anderen Herkunft ladbar kennzeichnen, um eine Blockierung durch COEP zu vermeiden. Zum Beispiel können Sie das crossorigin-Attribut für dieses Bild von einer Drittanbieter-Site verwenden:

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

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

Spezifikationen

Specification
HTML Standard
# coep

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch