Cinevva

Français

English
简体中文
한국어
हिन्दी
Português (Brasil)
Español
Türkçe
Bahasa Indonesia

Français

English
简体中文
한국어
हिन्दी
Português (Brasil)
Español
Türkçe
Bahasa Indonesia

Thème

Vérificateur d’isolation inter-origines ​

Saisissez l’URL de n’importe quel site pour savoir s’il bénéficie de l’isolation inter-origines, et si SharedArrayBuffer ainsi que WebAssembly multithread y fonctionneront. Le vérificateur lit les en-têtes de réponse Cross-Origin-Opener-Policy et Cross-Origin-Embedder-Policy de l’URL, puis vous indique ce qui manque. Il ne lit que les en-têtes ; aucune autre donnée n’est récupérée ni stockée.

Pourquoi l’isolation inter-origines est importante pour les jeux web ​

Certaines des fonctionnalités les plus utiles des navigateurs sont réservées aux pages bénéficiant de l’isolation inter-origines. Pour les jeux, la principale est SharedArrayBuffer, la mémoire partagée qui rend possible WebAssembly multithread. Si votre moteur fournit une version web multithread, elle ne fonctionnera pas sans cette isolation :

  • Les exports web de Godot nécessitaient historiquement SharedArrayBuffer (Godot 4.3+ a ajouté un export monothread permettant de se passer de ces en-têtes).
  • Les builds WebGL multithread de Unity en ont besoin.
  • Les pthreads Emscripten, ffmpeg.wasm et de nombreuses bibliothèques de physique et de codecs en ont également besoin.

Sans isolation, le navigateur désactive aussi les minuteurs haute résolution et performance.measureUserAgentSpecificMemory(). Ainsi, si un jeu multithread ne se charge pas sans afficher d’erreur, ou si performance.now() semble anormalement peu précis, la première chose à faire est de vérifier l’isolation.

Fonctionnement de l’isolation inter-origines ​

Une page bénéficie de l’isolation inter-origines lorsque le document HTML envoie deux en-têtes de réponse :

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

COOP: same-origin sépare la page des autres fenêtres qui ne partagent pas la même origine. COEP: require-corp exige que chaque sous-ressource autorise explicitement son intégration. Lorsque les deux sont définis, self.crossOriginIsolated devient true et SharedArrayBuffer est activé.

Le piège vient de COEP : une fois activé, chaque ressource inter-origines (images de CDN, polices, scripts, iframes) doit envoyer Cross-Origin-Resource-Policy: cross-origin ou être récupérée avec CORS, sans quoi le navigateur la bloque. C’est généralement ce qui provoque des dysfonctionnements sur les sites. Si vous ne contrôlez pas vos ressources tierces, utilisez plutôt Cross-Origin-Embedder-Policy: credentialless, qui charge les ressources inter-origines sans identifiants au lieu de leur imposer une autorisation explicite.

Comment l’activer ​

Cloudflare Pages (un fichier _headers) :

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

Serveur de développement Vite (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 : activez « SharedArrayBuffer support » dans les options d’intégration de votre jeu HTML. Les en-têtes seront alors configurés automatiquement.

Après le déploiement, rechargez la page et relancez le vérificateur. crossOriginIsolated devrait passer à true.

Questions fréquentes ​

Comment vérifier si ma page bénéficie de l’isolation inter-origines ? ​

Saisissez l’URL de votre site dans le vérificateur ci-dessus. Il lit côté serveur les en-têtes Cross-Origin-Opener-Policy et Cross-Origin-Embedder-Policy de la page, puis vous indique si leur combinaison permet d’isoler la page. Pour effectuer une vérification à l’exécution dans votre propre navigateur, ouvrez la page et exécutez crossOriginIsolated dans la console. Cette expression renvoie true lorsque l’isolation est active.

Pourquoi SharedArrayBuffer est-il undefined ? ​

Les navigateurs n’exposent SharedArrayBuffer qu’aux pages bénéficiant de l’isolation inter-origines. S’il vaut undefined, les en-têtes Cross-Origin-Opener-Policy: same-origin et Cross-Origin-Embedder-Policy: require-corp sont absents de votre page, ou une ressource inter-origines bloque l’isolation sous COEP. Configurez les en-têtes (voir ci-dessus), puis relancez le test.

Que sont COOP et COEP ? ​

Cross-Origin-Opener-Policy (COOP) contrôle la manière dont une page interagit avec les autres fenêtres de navigation. Cross-Origin-Embedder-Policy (COEP) détermine quelles sous-ressources peuvent être intégrées. L’utilisation conjointe de COOP: same-origin et COEP: require-corp permet à une page de bénéficier de l’isolation inter-origines, ce qui active SharedArrayBuffer et d’autres fonctionnalités avancées.

Mon jeu WebAssembly ne se charge pas dans le navigateur. Est-ce la cause ? ​

Souvent, oui. Les builds WebAssembly multithread (certains exports web Godot et Unity, les pthreads Emscripten, ffmpeg.wasm) ont besoin de SharedArrayBuffer, qui nécessite l’isolation inter-origines. Si le vérificateur ci-dessus indique « non isolée », configurez les en-têtes COOP/COEP ou utilisez une version monothread du moteur lorsqu’elle est disponible.

Ai-je besoin de l’en-tête Cross-Origin-Resource-Policy ? ​

Pas sur la page que vous isolez. COOP et COEP permettent à un document de bénéficier de l’isolation inter-origines et doivent être définis sur ce document. Cross-Origin-Resource-Policy (CORP) est un en-tête différent qui fonctionne dans le sens inverse : vous le placez sur une ressource inter-origines (une image, une police ou un script) afin qu’une page utilisant COEP: require-corp soit autorisée à l’intégrer. Si le vérificateur indique que CORP est « non défini » sur votre page, c’est donc normal et sans conséquence. Vous ne devez ajouter CORP qu’aux ressources que d’autres pages isolées doivent charger.

L’activation de COEP peut-elle rendre mes intégrations tierces inutilisables ? ​

Oui, c’est possible. Avec COEP: require-corp, chaque ressource inter-origines doit envoyer Cross-Origin-Resource-Policy ou utiliser CORS, sans quoi elle est bloquée. Si vous intégrez des ressources de CDN ou des scripts tiers que vous ne contrôlez pas, utilisez plutôt COEP: credentialless, qui évite cette exigence.

À découvrir également ​