Activer les threads Wasm (SharedArrayBuffer) avec COOP/COEP

Si votre jeu web (ou l’exportation de votre moteur) utilise des threads WebAssembly, il s’appuie souvent sur SharedArrayBuffer. Les navigateurs modernes exigent pour cela une isolation interorigines.

1) Vérification rapide : votre page est-elle isolée ?

Ouvrez les outils de développement et exécutez :

self.crossOriginIsolated

Si la valeur est true, vous êtes dans l’état de sécurité requis pour utiliser SharedArrayBuffer.

Référence officielle :

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

2) Les deux en-têtes nécessaires

Envoyez ces en-têtes de réponse avec votre HTML (et généralement dans l’ensemble de votre application) :

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

Références officielles :

• 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) La principale raison pour laquelle cela « ne fonctionne toujours pas » : les sous-ressources

Avec COEP: require-corp, votre page ne peut plus intégrer librement des ressources provenant d’autres origines.

Si vous chargez un script, une image, un worker, une vidéo ou toute autre ressource depuis une autre origine, cette ressource doit explicitement autoriser son utilisation via :

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

Référence officielle :

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

4) Configurations à copier-coller

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) Liste de vérification pour le débogage

• Vérifiez que les en-têtes figurent bien dans la réponse du document, dans le panneau Réseau.
• Vérifiez la valeur de self.crossOriginIsolated.
• Recherchez les requêtes bloquées (un message courant dans les outils de développement contient « blocked … by COEP »).
• Supprimez ou auto-hébergez les scripts tiers qui ne prennent pas en charge CORS/CORP.

À lire aussi

• Publier un jeu web qui se charge rapidement
• Les technologies des jeux web en 2026
• Les Web Workers pour la logique du jeu — utiliser des Workers qui bénéficient de SharedArrayBuffer
• Les bases du multijoueur avec WebSocket — pour les jeux multijoueurs nécessitant une isolation interorigines
• Intégrer des jeux avec une iframe — comprendre l’incidence des en-têtes COOP/COEP sur les intégrations par iframe

Ressources externes

• MDN : Cross-Origin-Opener-Policy — référence sur l’en-tête COOP
• MDN : Cross-Origin-Embedder-Policy — référence sur l’en-tête COEP
• web.dev : Isoler votre site web entre les origines — guide pratique de déploiement