Google utilise la technologie IA pour traduire le contenu dans votre langue préférée. Les traductions générées par IA peuvent contenir des erreurs.

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 prévoyez d'activer l'isolation interorigine, évaluez l'impact que cela aura sur les autres ressources interorigines de votre site Web, telles que les emplacements publicitaires.

Déterminer où `SharedArrayBuffer` est utilisé sur votre site Web

À partir de Chrome 92, les fonctionnalités qui utilisent SharedArrayBuffer ne fonctionneront plus sans isolation multi-origine. Si vous êtes arrivé sur 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 se casse sur 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 manières :

À l'aide des outils pour les développeurs Chrome
(Utilisateurs avancés) À l'aide de la création de rapports d'abandon

Si vous savez déjà où vous utilisez SharedArrayBuffer, passez à 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 les sites Web.

Ouvrez les outils pour les développeurs Chrome sur la page que vous pensez 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  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 d'où provient le SharedArrayBuffer. S'il s'agit d'une bibliothèque tierce, contactez le développeur pour résoudre le problème. S'il est implémenté dans votre site Web, suivez le guide ci-dessous pour activer l'isolation multi-origine.

Avertissement dans la console des outils de développement lorsque SharedArrayBuffer est utilisé sans contexte isolé multi-origine. — Avertissement de la console des Outils de développement lorsque SharedArrayBuffer est utilisé sans isolation multi-origine.

(Utilisateurs avancés) À l'aide de la création de 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é.

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 qui diffusent potentiellement serving SharedArrayBuffer.
```
Report-To: {"group":"default","max_age":86400,"endpoints":[{"url":"THE_DEPRECATION_ENDPOINT_URL"}]}
```
Une fois l'en-tête propagé, le point de terminaison que vous avez enregistré doit commencer à collecter les rapports d'abandon.

Consultez un exemple d'implémentation.

Analyser l'impact de l'isolation multi-origine

Ne serait-il pas formidable de pouvoir évaluer l'impact de l'activation de l'isolation multi-origine sur votre site sans rien casser ? 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 sur l'impact que COOP: same-origin aurait sur votre site. Il ne désactivera 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 même serveur de rapports que celui que vous avez configuré à l'étape précédente.

Attention : L'activation de l'isolation interorigine bloquera le chargement des ressources interorigines auxquelles vous n'avez pas explicitement souscrit, et empêchera 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 donc eu l'idée d'aller dans le sens opposé : un nouveau mode COEP "sans identifiants" qui permet de charger des ressources sans l'en-tête CORP en supprimant tous leurs identifiants. Nous espérons que cela vous permettra de vous assurer plus facilement 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.
De plus, l'en-tête Cross-Origin-Opener-Policy: same-origin interrompt les intégrations qui nécessitent des interactions entre fenêtres multi-origines, telles qu'OAuth et les paiements. Pour atténuer ce problème, nous envisageons d'assouplir la condition d'activation de l'isolation multi-origine en Cross-Origin-Opener-Policy: same-origin-allow-popups.
Ainsi, la communication avec la fenêtre ouverte par elle-même sera possible. Si vous souhaitez activer l'isolation multi-origine, mais que vous êtes bloqué par ces problèmes, nous vous recommandons de vous inscrire à un test d'origine et d'attendre que les nouveaux modes soient disponibles. Nous ne prévoyons pas d'arrêter le test d'origine tant que ces nouveaux modes ne seront pas disponibles.

Atténuer l'impact de l'isolation multi-origine

Une fois que vous avez déterminé les ressources qui seront affectées par l'isolation interorigine, voici des consignes générales pour activer ces ressources interorigines :

Sur les ressources interorigines telles que les images, les scripts, les feuilles de style, les iFrames, et autres, définissez l'Cross-Origin-Resource-Policy:cross-origin en-tête. 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" au <iframe>.
Si les ressources interorigines chargées dans des iFrames ou des scripts de service impliquent une autre couche d'iFrames ou de scripts de service, appliquez de manière récursive les étapes décrites dans cette section avant de continuer.
Une fois que vous avez confirmé que toutes les ressources interorigines sont activées, définissez l'en-tête Cross-Origin-Embedder-Policy: require-corp sur les iFrames et les scripts de service (cela est obligatoire, qu'il s'agisse d'une même origine ou d'une origine différente).
Assurez-vous qu'aucune fenêtre pop-up interorigine ne nécessite de communication via postMessage(). Il n'est pas possible 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, des requêtes HTTP).

Activer l'isolation multi-origine

Une fois que vous avez atténué l'impact de l'isolation multi-origine, voici des consignes générales pour activer l'isolation multi-origine :

Définissez l'en-tête Cross-Origin-Opener-Policy: same-origin sur 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 sur 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 interorigines qui ne sont pas activées.
Vérifiez que self.crossOriginIsolated renvoie true dans la console pour vous assurer que votre page est isolée multi-origine.

L'activation de l'isolation multi-origine sur un serveur local peut être difficile, car les serveurs simples ne sont pas compatibles avec l'envoi d'en-têtes. Vous pouvez lancer Chrome avec un flag de ligne de commande --enable-features=SharedArrayBuffer pour activer SharedArrayBuffer sans activer l'isolation multi-origine. Découvrez comment exécuter Chrome avec un flag de ligne de commande sur les plates-formes respectives.