Skip to content

Cross-Origin-Isolation-Checker

Gib die URL einer beliebigen Seite ein und finde heraus, ob sie cross-origin-isoliert ist und ob SharedArrayBuffer und mehrfädiges WebAssembly dort funktionieren. Der Checker liest die Response-Header Cross-Origin-Opener-Policy und Cross-Origin-Embedder-Policy der URL und sagt dir, was fehlt. Er liest nur Header, sonst wird nichts abgerufen oder gespeichert.

Warum Cross-Origin-Isolation für Web-Spiele zählt

Einige der nützlichsten Browser-Fähigkeiten sind hinter Cross-Origin-Isolation eingeschlossen, und für Spiele ist die wichtigste SharedArrayBuffer, der geteilte Speicher, der mehrfädiges WebAssembly überhaupt möglich macht. Wenn deine Engine einen Web-Build mit Threads ausliefert, läuft er ohne das nicht:

  • Godot-Web-Exporte brauchten historisch SharedArrayBuffer (ab Godot 4.3 gibt es einen einfädigen Export, der die Header vermeidet).
  • Unity-WebGL-Builds mit Threads brauchen ihn.
  • Emscripten pthreads, ffmpeg.wasm und viele Physik- und Codec-Bibliotheken brauchen ihn ebenfalls.

Ohne Isolation hält der Browser außerdem hochauflösende Timer und performance.measureUserAgentSpecificMemory() zurück. Wenn ein Spiel mit Threads also still nicht lädt oder performance.now() verdächtig grob wirkt, ist eine Isolationsprüfung das Erste, was du laufen lässt.

Wie Cross-Origin-Isolation funktioniert

Eine Seite wird cross-origin-isoliert, wenn sie zwei Response-Header auf dem HTML-Dokument sendet:

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

COOP: same-origin kappt die Verbindung der Seite zu anderen Fenstern, die nicht derselben Origin angehören. COEP: require-corp verlangt, dass jede Subressource dem Einbetten ausdrücklich zustimmt. Sind beide gesetzt, wird self.crossOriginIsolated zu true und SharedArrayBuffer ist freigeschaltet.

Der Haken ist COEP: Sobald es aktiv ist, muss jede Cross-Origin-Ressource (CDN-Bilder, Schriften, Skripte, Iframes) Cross-Origin-Resource-Policy: cross-origin senden oder per CORS geladen werden, sonst blockiert der Browser sie. Genau daran scheitern Seiten meistens. Wenn du deine Drittanbieter-Ressourcen nicht kontrollieren kannst, nutz stattdessen Cross-Origin-Embedder-Policy: credentialless, das Cross-Origin-Ressourcen ohne Zugangsdaten lädt, statt ihre Zustimmung zu verlangen.

So aktivierst du es

Cloudflare Pages (eine _headers-Datei):

/*
  Cross-Origin-Opener-Policy: same-origin
  Cross-Origin-Embedder-Policy: require-corp

Vite-Dev-Server (vite.config.js):

js
export default {
  server: {
    headers: {
      'Cross-Origin-Opener-Policy': 'same-origin',
      'Cross-Origin-Embedder-Policy': 'require-corp',
    },
  },
}

nginx:

add_header Cross-Origin-Opener-Policy same-origin;
add_header Cross-Origin-Embedder-Policy require-corp;

itch.io: Aktiviere in den Embed-Optionen deines HTML-Spiels "SharedArrayBuffer support", das setzt die Header für dich.

Nach dem Deployen neu laden und den Checker erneut ausführen. crossOriginIsolated sollte auf true umspringen.

Häufige Fragen

Wie prüfe ich, ob meine Seite cross-origin-isoliert ist?

Gib die URL deiner Seite oben im Checker ein. Er liest serverseitig die Header Cross-Origin-Opener-Policy und Cross-Origin-Embedder-Policy und sagt dir, ob die Kombination die Seite isoliert. Für eine Laufzeitprüfung im eigenen Browser öffnest du die Seite und führst crossOriginIsolated in der Konsole aus, das true zurückgibt, wenn die Isolation aktiv ist.

Warum ist SharedArrayBuffer undefined?

Browser stellen SharedArrayBuffer nur cross-origin-isolierten Seiten bereit. Ist er undefined, fehlen deiner Seite die Header Cross-Origin-Opener-Policy: same-origin und Cross-Origin-Embedder-Policy: require-corp, oder eine Cross-Origin-Ressource blockiert die Isolation unter COEP. Setz die Header (siehe oben) und teste erneut.

Was sind COOP und COEP?

Cross-Origin-Opener-Policy (COOP) steuert, wie eine Seite mit anderen Browserfenstern interagiert. Cross-Origin-Embedder-Policy (COEP) steuert, welche Subressourcen eingebettet werden dürfen. Setzt man COOP: same-origin und COEP: require-corp zusammen, wird eine Seite cross-origin-isoliert, was SharedArrayBuffer und andere mächtige Funktionen freischaltet.

Mein WebAssembly-Spiel lädt im Browser nicht. Liegt es daran?

Oft ja. WebAssembly-Builds mit Threads (manche Godot- und Unity-Web-Exporte, Emscripten pthreads, ffmpeg.wasm) brauchen SharedArrayBuffer, und der verlangt Cross-Origin-Isolation. Zeigt der Checker oben "nicht isoliert", setz die COOP/COEP-Header oder nutz einen einfädigen Build der Engine, wo verfügbar.

Brauche ich den Header Cross-Origin-Resource-Policy?

Nicht auf der Seite, die du isolierst. COOP und COEP sind das, was ein Dokument cross-origin-isoliert macht, und sie gehören auf das Dokument. Cross-Origin-Resource-Policy (CORP) ist ein anderer Header, der in die Gegenrichtung wirkt: Du setzt ihn auf eine Cross-Origin-Ressource (ein Bild, eine Schrift oder ein Skript), damit eine Seite mit COEP: require-corp sie einbetten darf. Zeigt der Checker also CORP als "nicht gesetzt" auf deiner Seite, ist das erwartbar und in Ordnung. CORP ergänzt du nur bei Assets, die andere isolierte Seiten laden müssen.

Bricht COEP meine Drittanbieter-Embeds?

Kann sein. Mit COEP: require-corp muss jede Cross-Origin-Ressource Cross-Origin-Resource-Policy senden oder CORS nutzen, sonst wird sie blockiert. Wenn du CDN-Assets oder Drittanbieter-Skripte einbindest, die du nicht kontrollierst, nimm stattdessen COEP: credentialless, das diese Anforderung umgeht.

Verwandt