Was ist Cross-Origin-Opener-Policy (COOP) und Cross-Origin-Embedder-Policy (COEP)?

Cross-Origin-Opener-Policy (COOP) und Cross-Origin-Embedder-Policy (COEP) sind zwei HTTP-Response-Header, die Chromium 2020 eingeführt hat und die heute in allen großen Browsern unterstützt werden (Chrome 83+, Firefox 79+, Safari 15.2+). COOP steuert, ob eine Seite ihre Browsing-Context-Gruppe mit geöffneten oder öffnenden Fenstern teilt; COEP steuert, ob die Seite Cross-Origin-Subressourcen laden darf. Setzt man COOP: same-origin zusammen mit COEP: require-corp oder credentialless, schaltet der Browser den Modus "Cross-Origin Isolated" frei — die Voraussetzung für SharedArrayBuffer, performance.measureUserAgentSpecificMemory() und hochauflösende performance.now()-Timer. Sie sind Teil der Post-Spectre-Browser-Härtung, gemeinsam mit Cross-Origin-Resource-Policy (CORP).

Warum wurden COOP und COEP eingeführt?

Im Januar 2018 zeigten die CPU-Seitenkanal-Lücken Spectre und Meltdown (CVE-2017-5753, CVE-2017-5715, CVE-2017-5754), dass bösartiges JavaScript Speicher anderer Origins im gleichen Renderer-Prozess auslesen kann. Die Browser deaktivierten daraufhin SharedArrayBuffer und senkten die Auflösung von performance.now() von Mikrosekunden auf 100 µs. Mit COOP und COEP kann eine Seite explizit einen prozessisolierten, Cross-Origin-sauberen Kontext anfordern — und der Browser gibt die hochauflösenden Funktionen wieder frei.

Was macht Cross-Origin-Opener-Policy (COOP)?

COOP entscheidet, ob ein Top-Level-Dokument eine Browsing-Context-Gruppe (und damit einen JavaScript-Execution-Context) mit Fenstern teilt, die per window.open() geöffnet wurden oder es geöffnet haben. Drei Werte:

• unsafe-none — Standard. window.opener-Zugriff über Origins hinweg erlaubt.
• same-origin-allow-popups — Selbst geöffnete Popups behalten die Referenz; Cross-Origin-Dokumente, die auf dich zugreifen wollen, werden isoliert.
• same-origin — vollständige Isolation. Voraussetzung für Cross-Origin-Isolation.

Cross-Origin-Opener-Policy: same-origin

Was macht Cross-Origin-Embedder-Policy (COEP)?

COEP entscheidet, ob ein Dokument Cross-Origin-Subressourcen (Bilder, Skripte, Fonts, iframes) laden darf. Werte:

• unsafe-none — Standard. Alle Cross-Origin-Ressourcen werden geladen.
• require-corp — Jede Cross-Origin-Subressource muss explizit zustimmen, entweder per Cross-Origin-Resource-Policy: cross-origin oder gültiger CORS-Antwort.
• credentialless — seit Chrome 96 (Oktober 2021). Cross-Origin-Requests laufen ohne Cookies und Credentials; die Ressource muss nicht zustimmen.

Cross-Origin-Embedder-Policy: require-corp

Was ist Cross-Origin Isolation?

Ein Dokument ist Cross-Origin-isoliert, wenn COOP: same-origin und entweder COEP: require-corp oder COEP: credentialless gesetzt sind. Prüfen kannst du das in DevTools oder per JavaScript:

if ( self.crossOriginIsolated ) {
  // SharedArrayBuffer, hochauflösende Timer, measureUserAgentSpecificMemory() verfügbar
}

Ohne Isolation blockieren moderne Browser new SharedArrayBuffer() und runden performance.now() auf 100 µs.

Wann brauche ich COOP und COEP auf einer WordPress-Seite?

• Du brauchst sie nicht für eine normale Content-Seite, einen Blog oder WooCommerce-Shop. Aktivieren kann Einbettungen brechen (YouTube, Google Maps, Stripe Checkout, Facebook).
• Du brauchst sie, wenn du WebAssembly mit Multi-Threading (Photopea, Figma, FFmpeg.wasm) ausführst, Video-Bearbeitung im Browser, Emscripten-Spiele oder präzise Performance-Messungen einsetzt.
• Nur COOP (same-origin-allow-popups) ist eine sinnvolle Härtung auf Login-Seiten und Dashboards gegen Tabnabbing und Cross-Window-Scripting — ohne Einbettungen zu brechen.

Wie setze ich COOP und COEP in WordPress?

Apache (.htaccess):

<IfModule mod_headers.c>
  Header set Cross-Origin-Opener-Policy "same-origin"
  Header set Cross-Origin-Embedder-Policy "require-corp"
  Header set Cross-Origin-Resource-Policy "same-site"
</IfModule>

Nginx:

add_header Cross-Origin-Opener-Policy "same-origin" always;
add_header Cross-Origin-Embedder-Policy "require-corp" always;
add_header Cross-Origin-Resource-Policy "same-site" always;

Alternativ über ein Plugin wie "HTTP Headers".

Was bricht, wenn ich COEP: require-corp aktiviere?

Jede Cross-Origin-Ressource ohne passenden CORP-Header oder CORS-Antwort wird blockiert. Typische Stolperfallen:

• YouTube- und Vimeo-iframes (außer im credentialless-Modus).
• Google Fonts, wenn von fonts.gstatic.com ohne CORS geladen.
• Externe Avatare wie Gravatar oder Facebook-Profilbilder.
• Drittanbieter-Tracking-Pixel, Stripe.js, hCaptcha-Widgets.

In DevTools » Netzwerk » Spalte "Blockiert" siehst du die Übeltäter. Mit COEP: credentialless lockerst du die Pflicht — auf Kosten cookieloser Requests.

Wie teste ich, ob meine Seite Cross-Origin-isoliert ist?

1. Seite in Chrome öffnen.
2. DevTools (F12) » Application » Frames » top » Eintrag "Cross-Origin Isolated: Yes" prüfen.
3. Oder in der Konsole self.crossOriginIsolated ausführen — muss true liefern.
4. Für Produktivumgebungen den "Coop-Coep-Crossorigin"-Report-Endpoint einrichten und Verstöße sammeln.

Was prüft InspectWP?

InspectWP analysiert jeden HTTP-Response-Header der gecrawlten Seite und meldet Vorhandensein und Wert von Cross-Origin-Opener-Policy, Cross-Origin-Embedder-Policy und Cross-Origin-Resource-Policy im Sicherheitsbereich. Fehlende Header werden als Warnung markiert, nicht als kritisch — da die meisten Content-Seiten keine vollständige Cross-Origin-Isolation brauchen.