Guide pour activer l'isolation multi-origine

L'isolation multi-origine permet à une page Web d'utiliser des fonctionnalités puissantes telles que SharedArrayBuffer. Cet article explique comment activer l'isolation inter-origine sur votre site Web.

Ce guide vous explique comment activer l'isolation inter-origine. L'isolation inter-origine est requise si vous souhaitez utiliser SharedArrayBuffer, performance.measureUserAgentSpecificMemory() ou un minuteur haute résolution avec une meilleure précision.

Si vous avez l'intention d'activer l'isolation multi-origine, évaluez l'impact que cela aura sur les autres ressources multi-origines de votre site Web, comme les emplacements d'annonces.

Si vous ne savez pas où un SharedArrayBuffer est utilisé sur votre site, il existe deux façons de le savoir:

  • À l'aide des outils pour les développeurs Chrome
  • (Utilisateurs avancés) Utiliser les rapports d'abandon

Si vous savez déjà où vous utilisez SharedArrayBuffer, passez à la section Analyser l'impact de l'isolation inter-origine.

À l'aide des outils pour les développeurs Chrome

Les Outils pour les développeurs Chrome permettent aux développeurs d'inspecter des sites Web.

  1. Ouvrez les outils pour les développeurs Chrome sur la page que vous pensez utiliser SharedArrayBuffer.
  2. Sélectionnez le panneau Console.
  3. Si la page utilise SharedArrayBuffer, le message suivant s'affiche :
    [Deprecation] SharedArrayBuffer will require cross-origin isolation as of M92, around May 2021. See https://developer.chrome.com/blog/enabling-shared-array-buffer/ for more details. common-bundle.js:535
  4. Le nom du fichier et le numéro de ligne à la fin du message (par exemple, common-bundle.js:535) indiquent d'où provient le SharedArrayBuffer. S'il s'agit d'une bibliothèque tierce, contactez le développeur pour résoudre le problème. Si elle est implémentée dans votre site Web, suivez le guide ci-dessous pour activer l'isolation inter-origine.
Avertissement dans la console des outils de développement lorsque SharedArrayBuffer est utilisé sans isolation multi-origine
avertissement dans la console des outils pour les développeurs lorsque SharedArrayBuffer est utilisé sans isolation multi-origine.

(Utilisateurs avancés) Utiliser les rapports d'abandon

Certains navigateurs disposent d'une fonctionnalité de création de rapports sur l'abandon des API vers un point de terminaison spécifié.

  1. Configurez un serveur de rapports d'abandon et obtenez l'URL de création de rapports. Pour ce faire, vous pouvez utiliser un service public ou en créer un vous-même.
  2. À l'aide de l'URL, définissez l'en-tête HTTP suivant sur les pages qui diffusent potentiellement SharedArrayBuffer.
    Report-To: {"group":"default","max_age":86400,"endpoints":[{"url":"THE_DEPRECATION_ENDPOINT_URL"}]}
  3. Une fois que l'en-tête commence à se propager, le point de terminaison auquel vous vous êtes inscrit doit commencer à collecter des rapports d'abandon.

Pour voir un exemple d'implémentation, consultez https://cross-origin-isolation.glitch.me.

Analyser l'impact de l'isolation multi-origine

N'est-il pas préférable d'évaluer l'impact de l'activation de l'isolation inter-origines sur votre site sans rien casser ? C'est exactement ce que vous permettent les en-têtes HTTP Cross-Origin-Opener-Policy-Report-Only et Cross-Origin-Embedder-Policy-Report-Only.

  1. Définissez Cross-Origin-Opener-Policy-Report-Only: same-origin sur votre document de premier niveau. Comme son nom l'indique, cet en-tête n'envoie que des rapports sur l'impact que COOP: same-origin aurait sur votre site. Il ne désactive pas la communication avec les fenêtres pop-up.
  2. Configurez la création de rapports et un serveur Web pour recevoir et enregistrer les rapports.
  3. Définissez Cross-Origin-Embedder-Policy-Report-Only: require-corp sur votre document de premier niveau. Là encore, cet en-tête vous permet de voir l'impact de l'activation de COEP: require-corp sans que cela n'affecte le fonctionnement de votre site. Vous pouvez configurer cet en-tête pour envoyer des rapports au même serveur de rapports que celui que vous avez configuré à l'étape précédente.

Limiter l'impact de l'isolation multi-origine

Une fois que vous avez déterminé les ressources concernées par l'isolation multi-origine, voici des consignes générales générales concernant l'activation de ces ressources multi-origines:

  1. Pour les ressources multi-origines telles que les images, les scripts, les feuilles de style, les iFrames et autres, définissez l'en-tête Cross-Origin-Resource-Policy: cross-origin. Sur les ressources du même site, définissez l'en-tête Cross-Origin-Resource-Policy: same-site.
  2. Pour les ressources pouvant être chargées à l'aide de CORS, assurez-vous qu'il est activé en définissant l'attribut crossorigin dans sa balise HTML (par exemple, <img src="example.jpg" crossorigin>). Pour une requête de récupération JavaScript, assurez-vous que request.mode est défini sur cors.
  3. Si vous souhaitez utiliser des fonctionnalités puissantes telles que SharedArrayBuffer dans un iFrame chargé, ajoutez allow="cross-origin-isolated" à <iframe>.
  4. Si les ressources inter-origines chargées dans des iFrames ou des scripts de worker impliquent une autre couche d'iFrames ou de scripts de worker, appliquez de manière récursive les étapes décrites dans cette section avant de continuer.
  5. Une fois que vous avez confirmé que toutes les ressources inter-origines sont activées, définissez l'en-tête Cross-Origin-Embedder-Policy: require-corp sur les iFrames et les scripts de worker (cela est obligatoire, que la ressource soit de même origine ou inter-origine).
  6. Assurez-vous qu'aucune fenêtre pop-up multi-origine ne nécessite de communication via postMessage(). Il n'est pas possible de les maintenir en service lorsque l'isolation inter-origine est activée. Vous pouvez déplacer la communication vers un autre document qui n'est pas isolé multi-origine ou utiliser une autre méthode de communication (par exemple, les requêtes HTTP).

Activer l'isolation inter-origine

Une fois que vous avez atténué l'impact grâce à l'isolation multi-origine, voici des consignes générales pour activer cette fonctionnalité :

  1. Définissez l'en-tête Cross-Origin-Opener-Policy: same-origin sur votre document de premier niveau. Si vous avez défini Cross-Origin-Opener-Policy-Report-Only: same-origin, remplacez-le. Cela bloque la communication entre votre document de niveau supérieur et ses fenêtres pop-up.
  2. Définissez l'en-tête Cross-Origin-Embedder-Policy: require-corp sur votre document de premier niveau. Si vous avez défini Cross-Origin-Embedder-Policy-Report-Only: require-corp, remplacez-le. Cela bloquera le chargement des ressources multi-origines qui ne sont pas activées.
  3. Vérifiez que self.crossOriginIsolated renvoie true dans la console pour vérifier que votre page est isolée entre les origines.

Ressources