Cross-Origin-Embedder-Policy
Der HTTP Cross-Origin-Embedder-Policy
(COEP) Antwort-Header konfiguriert die Richtlinie des aktuellen Dokuments zum Laden und Einbetten von Cross-Origin-Ressourcen.
Die Richtlinie zur Entscheidung, ob eine bestimmte Ressource cross-site eingebettet werden kann, kann für diese Ressource mit dem Cross-Origin-Resource-Policy
(CORP)-Header für einen no-cors
-Fetch oder unter Verwendung von CORS definiert werden.
Wenn keine dieser Richtlinien festgelegt ist, können Ressourcen standardmäßig geladen oder in ein Dokument eingebettet werden, als ob sie einen CORP-Wert von cross-site
hätten.
Der Cross-Origin-Embedder-Policy
erlaubt Ihnen, zu verlangen, dass CORP- oder CORS-Header gesetzt sind, um Cross-Site-Ressourcen in das aktuelle Dokument zu laden.
Sie können die Richtlinie auch so festlegen, dass das Standardverhalten beibehalten wird, oder um die Ressourcen zu laden, aber dabei Anmeldeinformationen zu entfernen, die sonst gesendet werden könnten.
Die Richtlinie gilt für geladene Ressourcen sowie 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 same-origin
eingebettet zu werden, wird sie ungeachtet des COEP-Wertes cross-origin nicht geladen.
Header-Typ | Antwort-Header |
---|---|
Verbotener Antwort-Header-Name | Nein |
Syntax
Cross-Origin-Embedder-Policy: unsafe-none | require-corp | credentialless
Richtlinien
unsafe-none
-
Ermöglicht 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 von der gleichen Herkunft laden oder Ressourcen, die ausdrücklich als ladbar von einer anderen Herkunft gekennzeichnet 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 das Laden in die Dokumentherkunft erlaubt. - Die Ressource wird im
cors
-Modus angefordert und die Ressource unterstützt und ist durch CORS erlaubt. Dies kann zum Beispiel in HTML mit demcrossorigin
Attribut oder in JavaScript durch das Erstellen einer Anfrage mit{mode="cors"}
erreicht werden.
- Die Ressource wird im
credentialless
-
Ein Dokument kann Cross-Origin-Ressourcen laden, die in
no-cors
-Modus angefordert werden, ohne ausdrückliche Erlaubnis über denCross-Origin-Resource-Policy
-Header. 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 dasselbe wie für
require-corp
. Zum Beispiel muss eine incors
-Modus angeforderte Cross-Origin-Ressource CORS unterstützen (und durch CORS erlaubt 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 zu 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 den Kontexten Fenster und Arbeiter 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 der COEP-Blockierung 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 zum Beispiel ein Bild, das in HTML von einer Drittanbieter-Website deklariert ist und CORS unterstützt, abzurufen, 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 oder einen Fetch 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 Einverständnis des Cross-Origin-Servers zu laden, auf Kosten der Anforderung ohne Cookies.
Spezifikationen
Specification |
---|
HTML # coep |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Cross-Origin-Embedder-Policy | ||||||||||||
credentialless |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
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)