Wasm-Threads (SharedArrayBuffer) mit COOP/COEP aktivieren

Wenn dein Web-Spiel (oder ein Engine-Export) WebAssembly-Threads nutzt, hängt es meist an SharedArrayBuffer. Moderne Browser verlangen dafür Cross-Origin-Isolation.

1) Kurzer Check: bist du isoliert?

Öffne die DevTools und führ das aus:

self.crossOriginIsolated

Ist das Ergebnis true, bist du im richtigen Sicherheitszustand für SharedArrayBuffer.

Offizielle Referenz:

• https://developer.mozilla.org/docs/Web/API/Window/crossOriginIsolated

2) Die zwei Header, die du brauchst

Liefere diese Response-Header für dein HTML aus (und in der Regel für die ganze App):

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

Offizielle Referenzen:

• https://web.dev/articles/why-coop-coep
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer
• https://developer.chrome.com/blog/enabling-shared-array-buffer/

3) Grund Nummer 1, warum es „immer noch nicht geht": Subressourcen

Mit COEP: require-corp kann deine Seite Cross-Origin-Ressourcen nicht mehr frei einbinden.

Lädst du ein Script, Bild, Worker, Video oder Ähnliches von einer anderen Origin, muss diese Ressource ausdrücklich zustimmen, über:

• CORS (Access-Control-Allow-Origin) oder
• CORP (Cross-Origin-Resource-Policy)

Offizielle Referenz:

• https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Cross-Origin_Resource_Policy

4) Konfigurationen zum Kopieren

Nginx

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

Node / Express

app.use((req, res, next) => {
  res.setHeader('Cross-Origin-Opener-Policy', 'same-origin')
  res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp')
  next()
})

Cloudflare Pages (_headers)

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

5) Checkliste zur Fehlersuche

• Prüfe im Netzwerk-Panel, ob die Header auf der Dokument-Response wirklich ankommen.
• Prüfe self.crossOriginIsolated.
• Halte nach blockierten Requests Ausschau (die DevTools melden typischerweise „blocked … by COEP").
• Entferne Drittanbieter-Scripts ohne CORS/CORP oder hoste sie selbst.

Verwandt

• Ein Web-Spiel ausliefern, das schnell lädt
• Tech-Stack für Web-Spiele 2026
• Web Workers für Spiellogik — Worker nutzen, die von SharedArrayBuffer profitieren
• WebSocket-Multiplayer-Grundlagen — Multiplayer-Spiele, die Cross-Origin-Isolation brauchen
• Spiele per Iframe einbetten — wie COOP/COEP-Header Iframe-Embeds beeinflussen

Externe Ressourcen

• MDN: Cross-Origin-Opener-Policy — Referenz zum COOP-Header
• MDN: Cross-Origin-Embedder-Policy — Referenz zum COEP-Header
• web.dev: Making your website cross-origin isolated — praktischer Deployment-Leitfaden