Cette page a été traduite par l'API Cloud Translation.

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 multi-origine sur votre site Web.

Eiji Kitamura

Ce guide vous explique comment activer l'isolation multi-origine. L'isolation multi-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, telles que les emplacements d'annonces.

Déterminez à quels emplacements de votre site Web SharedArrayBuffer est utilisé

À partir de Chrome 92, les fonctionnalités qui utilisent SharedArrayBuffer ne fonctionneront plus sans l'isolation multi-origine. Si vous avez accédé à cette page en raison d'un message d'abandon de SharedArrayBuffer, il est probable que votre site Web ou l'une des ressources qui y sont intégrées utilise SharedArrayBuffer. Pour vous assurer que rien ne plante votre site Web en raison de l'abandon, commencez par identifier où il est utilisé.

Si vous ne savez pas où un SharedArrayBuffer est utilisé sur votre site, vous pouvez le découvrir de deux façons:

À l'aide des outils pour les développeurs Chrome
(Avancé) Utiliser les rapports sur les abandons

Si vous savez déjà où vous utilisez SharedArrayBuffer, passez à la section Analyser l'impact de l'isolation multi-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.

Ouvrez les outils pour les développeurs Chrome sur la page qui semble utiliser SharedArrayBuffer.
Sélectionnez le panneau Console.

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

Le nom de fichier et le numéro de ligne à la fin du message (par exemple, common-bundle.js:535) indiquent la provenance de 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 sur votre site Web, suivez le guide ci-dessous pour activer l'isolation multi-origine.

Avertissement de la console DevToools lorsque SharedArrayBuffer est utilisé sans isolation multi-origine — La console DevToools génère un avertissement lorsque SharedArrayBuffer est utilisé sans isolation multi-origine.

(Avancé) Utiliser les rapports sur les abandons

Certains navigateurs disposent d'une fonctionnalité de reporting permettant d'abandonner des API à un point de terminaison spécifié.

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.
À l'aide de l'URL, définissez l'en-tête HTTP suivant sur les pages susceptibles de diffuser des SharedArrayBuffer.
```
Report-To: {"group":"default","max_age":86400,"endpoints":[{"url":"THE_DEPRECATION_ENDPOINT_URL"}]}
```
Une fois que l'en-tête commence à se propager, le point de terminaison sur lequel vous vous êtes enregistré doit commencer à collecter des rapports d'abandon.

Consultez un exemple d'implémentation ici : https://cross-origin-isolation.glitch.me.

Analyser l'impact de l'isolation multi-origine

Ne serait-il pas formidable de pouvoir évaluer l'impact que l'activation de l'isolation multi-origine aurait sur votre site sans entraver quoi que ce soit ? Les en-têtes HTTP Cross-Origin-Opener-Policy-Report-Only et Cross-Origin-Embedder-Policy-Report-Only vous permettent de le faire.

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 concernant l'impact que COOP: same-origin aurait sur votre site. Il ne désactive pas la communication avec les fenêtres pop-up.
Configurez la création de rapports et configurez un serveur Web pour recevoir et enregistrer les rapports.
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 affecter le fonctionnement de votre site pour le moment. Vous pouvez configurer cet en-tête pour envoyer des rapports au serveur de création de rapports que vous avez configuré à l'étape précédente.

Attention : Activer l'isolation multi-origine bloque le chargement des ressources multi-origines que vous n'activez pas explicitement et empêche votre document de premier niveau de communiquer avec les fenêtres pop-up. Nous avons exploré des moyens de déployer Cross-Origin-Resource-Policy à grande échelle, car l'isolation multi-origine nécessite que toutes les sous-ressources soient explicitement activées. Nous avons inventé l'idée d'aller dans la direction opposée: un nouveau mode COEP "sans identifiant" qui permet de charger des ressources sans l'en-tête CORP en supprimant tous leurs identifiants. Nous espérons que cela vous aidera à vous assurer que les sous-ressources envoient l'en-tête Cross-Origin-Resource-Policy. Bien que le mode credentialless soit disponible sur Chrome à partir de la version 96, il n'est pas encore compatible avec d'autres navigateurs. Il peut donc être difficile pour certains développeurs de déployer COOP ou COEP à ce stade. On sait également que l'en-tête Cross-Origin-Opener-Policy: same-origin interrompt les intégrations qui nécessitent des interactions de fenêtres multi-origines, comme OAuth et les paiements. Pour atténuer ce problème, nous envisageons d'assouplir la condition afin d'activer l'isolation multi-origine sur Cross-Origin-Opener-Policy: same-origin-allow-popups. Ainsi, il est possible de communiquer avec la fenêtre ouverte toute seule. Si vous souhaitez activer l'isolation multi-origine, mais que vous êtes bloqué par ces problèmes, nous vous recommandons de vous inscrire à une phase d'évaluation et d'attendre que les nouveaux modes soient disponibles. Nous ne prévoyons pas de mettre fin à la phase d'évaluation tant que ces nouveaux modes ne seront pas disponibles.

Limiter l'impact de l'isolation multi-origine

Une fois que vous avez déterminé quelles ressources seront affectées par l'isolation multi-origine, voici des consignes générales pour activer ces ressources multi-origines:

Sur 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.
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 la requête d'extraction JavaScript, assurez-vous que request.mode est défini sur cors.
Si vous souhaitez utiliser des fonctionnalités puissantes telles que SharedArrayBuffer dans un iFrame chargé, ajoutez allow="cross-origin-isolated" à <iframe>.
Si des ressources multi-origines chargées dans des iFrames ou des scripts de nœud de calcul impliquent une autre couche d'iFrames ou de scripts de nœuds de calcul, appliquez de manière récursive les étapes décrites dans cette section avant de continuer.
Après avoir confirmé que toutes les ressources multi-origines sont activées, définissez l'en-tête Cross-Origin-Embedder-Policy: require-corp sur les iFrames et les scripts de nœud de calcul (obligatoire, que ces ressources soient issues de la même origine ou de plusieurs origines).
Assurez-vous qu'aucune fenêtre pop-up multi-origine ne nécessite une communication via postMessage(). Il n'existe aucun moyen de les faire fonctionner lorsque l'isolation multi-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 multi-origine

Une fois que vous avez réduit l'impact de l'isolation multi-origine, voici quelques consignes générales pour l'activer:

Définissez l'en-tête Cross-Origin-Opener-Policy: same-origin de votre document de premier niveau. Si vous aviez défini Cross-Origin-Opener-Policy-Report-Only: same-origin, remplacez-le. Cela bloque la communication entre votre document de premier niveau et ses fenêtres pop-up.
Définissez l'en-tête Cross-Origin-Embedder-Policy: require-corp de votre document de premier niveau. Si vous aviez 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.
Vérifiez que self.crossOriginIsolated renvoie true dans la console pour vérifier que votre page est isolée multi-origine.

L'activation de l'isolation multi-origine sur un serveur local peut s'avérer fastidieuse, car les serveurs simples ne prennent pas en charge l'envoi d'en-têtes. Vous pouvez lancer Chrome avec un indicateur de ligne de commande --enable-features=SharedArrayBuffer pour activer SharedArrayBuffer sans activer l'isolation multi-origine. Découvrez comment exécuter Chrome avec un indicateur de ligne de commande sur les différentes plates-formes.