Cross-Origin-Embedder-Policy
Der HTTP Cross-Origin-Embedder-Policy
(COEP) Response-Header konfiguriert die Richtlinie des aktuellen Dokuments zum Laden und Einbetten von Cross-Origin-Ressourcen.
Die Richtlinie, ob eine bestimmte Ressource site-übergreifend eingebettet werden kann, kann für diese Ressource mittels des Cross-Origin-Resource-Policy
(CORP) Headers für einen no-cors
Abruf oder mittels CORS definiert werden. Wenn keine dieser Richtlinien festgelegt ist, können Ressourcen standardmäßig geladen oder in ein Dokument eingebettet werden, als hätten sie einen CORP-Wert von cross-site
.
Der Cross-Origin-Embedder-Policy
ermöglicht es Ihnen zu verlangen, dass CORP- oder CORS-Header gesetzt werden, um site-übergreifende Ressourcen in das aktuelle Dokument zu laden. Sie können auch die Richtlinie auf das Standardverhalten belassen oder zulassen, dass die Ressourcen geladen werden, aber dabei alle Anmeldeinformationen entfernen, die sonst gesendet werden könnten. Die Richtlinie bezieht sich auf geladene Ressourcen und Ressourcen in <iframe>
s und verschachtelten Frames.
Hinweis:
Der Cross-Origin-Embedder-Policy
überschreibt oder beeinflusst nicht das Einbettungsverhalten für eine Ressource, für die CORP oder CORS gesetzt wurde. Wenn CORP eine Ressource darauf beschränkt, nur aus demselben Ursprung (same-origin
) eingebettet zu werden, wird sie unabhängig vom COEP-Wert nicht site-übergreifend in eine Ressource geladen.
Header-Typ | Response-Header |
---|---|
Verbotener Response-Header-Name | Nein |
Syntax
Cross-Origin-Embedder-Policy: unsafe-none | require-corp | credentialless
Direktiven
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 ausdrücklich als von einem anderen Ursprung ladbar markiert sind.
Das Laden von Cross-Origin-Ressourcen wird von COEP blockiert, es sei denn:
- Die Ressource wird im
no-cors
Modus angefordert und die Antwort enthält einenCross-Origin-Resource-Policy
Header, der es erlaubt, in den Dokumentursprung geladen zu werden. - Die Ressource wird im
cors
Modus angefordert und die Ressource wird von CORS unterstützt und zulässig gemacht. Dies kann zum Beispiel in HTML mit demcrossorigin
Attribut oder in JavaScript durch eine Anfrage mit{mode="cors"}
erreicht werden.
- Die Ressource wird im
credentialless
-
Ein Dokument kann Cross-Origin-Ressourcen laden, die im
no-cors
Modus ohne ausdrückliche Erlaubnis über denCross-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 Ladeverhalten für andere Anfragemodi ist das gleiche wie für
require-corp
. Beispielsweise muss eine Cross-Origin-Ressource, die imcors
Modus angefordert wird, CORS unterstützen (und zulässig sein).
Beispiele
Funktionen, die von Cross-Origin-Isolation abhängen
Bestimmte Funktionen, wie der Zugriff auf SharedArrayBuffer
Objekte oder die Verwendung von Performance.now()
mit ungedrosselten 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 werden.
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp
Sie können die Window.crossOriginIsolated
und WorkerGlobalScope.crossOriginIsolated
Eigenschaften verwenden, um zu überprü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);
}
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 ausdrücklich angeben, dass sie im cors
Modus angefordert wird.
Zum Beispiel, um ein Bild, das in HTML deklariert ist, von einer Drittanbieter-Website abzurufen, die CORS unterstützt, können Sie das crossorigin
Attribut verwenden, damit es im cors
Modus angefordert wird:
<img src="https://thirdparty.com/img.png" crossorigin />
Sie können ähnlich das HTMLScriptElement.crossOrigin
Attribut verwenden oder eine Datei im CORS-Modus mittels JavaScript mit { mode: 'cors' }
abrufen.
Falls 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 vom Cross-Origin-Server zu laden, allerdings auf Kosten der Anforderung ohne Cookies.
Spezifikationen
Specification |
---|
HTML # coep |
Browser-Kompatibilität
Siehe auch
Cross-Origin-Opener-Policy
Window.crossOriginIsolated
undWorkerGlobalScope.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)