Cross-Origin-Embedder-Policy (COEP) header

Syntax

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

Direktiven

unsafe-none

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

require-corp

Ein Dokument kann nur Ressourcen aus derselben Quelle oder explizit als ladbar markierte Ressourcen aus einer anderen Quelle laden.

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 es erlaubt, sie in die Dokumentquelle zu laden.
• Die Ressource wird im cors-Modus angefordert und die Ressource wird von CORS unterstützt und ist erlaubt. Dies kann zum Beispiel in HTML mit dem crossorigin Attribut oder in JavaScript durch eine Anfrage mit {mode="cors"} erreicht werden.

credentialless

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

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

Beispiele

Funktionen, die von Cross-Origin-Isolierung abhängen

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 dem Wert 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 überprü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);
}

Vermeidung von COEP-Blockaden mit CORS

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.

Um beispielsweise ein Bild von einer Drittanbieter-Site, die CORS unterstützt, in HTML abzurufen, 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 mittels 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, jedoch auf Kosten eines Anrufs ohne Cookies, zu laden.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• 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)