Un guide pour permettre l'isolement d'origines multiples

L'isolement d'origines multiples permet à une page Web d'utiliser des fonctionnalités puissantes telles que SharedArrayBuffer. Cet article explique comment activer l'isolement d'origines multiples sur votre site Web.

Feb 9, 2021 — Updated May 6, 2021

Available in: Deutsch, English, Español, Português, Русский, 中文, 日本語 et 한국어

Eiji Kitamura

Twitter GitHub Homepage

Ce guide vous montre comment activer l'isolement d'origines multiples. L'isolement d'origines multiples est requis si vous souhaitez utiliser SharedArrayBuffer, performance.measureUserAgentSpecificMemory(), un minuteur haute résolution avec une meilleure précision ou l'API JS Self-Profiling.

Si vous souhaitez activer l'isolement d'origines multiples, évaluez l'impact que cela aura sur d'autres ressources d'origines multiples de votre site Web, telles que l'emplacement des annonces.

Déterminez où sur votre site Web SharedArrayBuffer est utilisé.

À partir de Chrome 92, les fonctionnalités qui utilisent SharedArrayBuffer ne fonctionneront plus sans l'isolement d'origines multiples. Si vous avez atterri sur cette page en raison d'un message d'obsolescence SharedArrayBuffer, il est probable que votre site Web ou l'une des ressources qui y sont intégrées utilise SharedArrayBuffer. Pour vous assurer qu'aucun problème ne survienne sur votre site Web en raison d'une obsolescence, commencez par identifier où il est utilisé.

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

Utiliser Chrome DevTools
(Avancé) Utiliser les rapports d'obsolescence

Si vous savez déjà où vous utilisez un SharedArrayBuffer, passez à Analyser l'impact de l'isolement d'origines multiples.

Utiliser Chrome DevTools #

Chrome DevTools permet aux développeurs d'inspecter les sites Web.

Ouvrez Chrome DevTools sur la page que vous soupçonnez d'utiliser un SharedArrayBuffer.
Sélectionnez le panneau Console.

Si la page utilise un SharedArrayBuffer, le message suivant s'affichera :

[Obsolescence] SharedArrayBuffer exigera l'isolement d'origines multiples à partir de la version M92, vers le mois de mai 2021. Consultez le lien suivant : https://developer.chrome.com/blog/enabling-shared-array-buffer/ pour en savoir plus. 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ù vient 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 le cadre de votre site Web, suivez le guide ci-dessous pour activer l'isolement d'origines multiples.

Avertissement DevTools Console lorsqu'un SharedArrayBuffer est utilisé sans isolement d'origines multiples.

(Avancé) Utilisation des rapports d'obsolescence #

Certains navigateurs disposent d'une fonctionnalité de rapport d'obsolescence des API à un point de terminaison spécifié.

Configurez un serveur de rapports d'obsolescence et obtenez l'URL du rapport. Pour cela, utilisez un service public ou créez-en une vous-même.
À l'aide de l'URL, définissez l'en-tête HTTP suivant sur les pages qui abritent potentiellement un 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 que vous avez inscrit doit commencer à collecter des rapports d'obsolescence.

Pour voir un exemple d'implémentation, accédez au lien suivant : https://cross-origin-isolation.glitch.me.

Analyser l'impact de l'isolement d'origines multiples #

Ne serait-il pas formidable de pouvoir évaluer l'impact de l'activation de l'isolement d'origines multiples sur votre site sans prendre le risque d'endommager quoi que ce soit ? C'est exactement ce que les en-têtes HTTP Cross-Origin-Opener-Policy-Report-Only et Cross-Origin-Embedder-Policy-Report-Only vous permettent de 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 envoie uniquement des rapports sur l'impact que COOP: same-origin aurait sur votre site ; il ne désactivera pas réellement la communication avec les fenêtres contextuelles.
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. Encore une fois, cet en-tête vous permet de visualiser l'impact de l'activation de COEP: require-corp sans réellement 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.

Caution

L'activation de l'isolement d'origines multiples bloquera le chargement des ressources d'origines multiples que vous n'activez pas explicitement, et cela empêchera votre document de premier niveau de pouvoir communiquer avec les fenêtres contextuelles. Nous avons étudié des moyens de déployer Cross-Origin-Resource-Policy à grande échelle, car l'isolement d'origines multiples nécessite que toutes les sous-ressources soient explicitement acceptées. Nous avons eu l'idée de faire l'inverse : un nouveau mode COEP « sans informations d'identification » qui permet de charger des ressources sans l'en-tête CORP en supprimant toutes leurs informations d'identification. Nous sommes en train de déterminer les détails de la façon dont cela devrait fonctionner, mais nous espérons que cela vous soulagera de l'obligation de vérifier que les sous-ressources envoient bien l'en-tête Cross-Origin-Resource-Policy. On sait en outre que l'en-tête Cross-Origin-Opener-Policy: same-origin rompra les intégrations qui nécessitent des interactions de fenêtre d'origines multiples telles que OAuth et les paiements. Pour atténuer ce problème, nous étudions l'assouplissement des conditions permettant l'isolement d'origines multiples avec Cross-Origin-Opener-Policy: same-origin-allow-popups. De cette façon, la communication avec la fenêtre ouverte par elle-même sera possible. Si vous souhaitez activer l'isolement d'origines multiples mais êtes bloqué par ces difficultés, nous vous recommandons de vous inscrire à un essai d'origine et d'attendre que les nouveaux modes soient disponibles. Nous ne prévoyons pas de mettre fin à l'essai d'origine tant que ces nouveaux modes ne seront pas disponibles.

Atténuer l'impact de l'isolement d'origines multiples #

Une fois que vous avez déterminé quelles ressources seront affectées par l'isolement d'origines multiples, prenez connaissance des directives générales sur la façon dont vous optez réellement pour ces ressources d'origines multiples :

Pour les ressources d'origines multiples 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. Pour les ressources du même site, définissez l'en-tête Cross-Origin-Resource-Policy: same-site.
Définissez l'attribut crossorigin dans la balise HTML du document de premier niveau si la ressource est fournie avec CORS (par exemple, <img src="example.jpg" crossorigin>).
Si les ressources d'origines multiples chargées dans les iframes impliquent une autre couche d'iframes, 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 d'origines multiples sont activées, définissez Cross-Origin-Embedder-Policy: require-corp sur les ressources d'origines multiples chargées dans les iframes.
Assurez-vous qu'il n'y a pas de fenêtres contextuelles d'origines multiples nécessitant une communication via postMessage(). Il n'y a aucun moyen de les faire fonctionner lorsque l'isolement d'origines multiples est activé. Vous pouvez déplacer la communication vers un autre document sans isolement d'origines multiples ou utiliser une méthode de communication différente (par exemple, des requêtes HTTP).

Activer l'isolement d'origines multiples #

Une fois que vous avez atténué l'impact grâce à l'isolement d'origines multiples, prenez connaissance des directives générales sur la façon dont vous pouvez l'activer :

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 contextuelles.
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 d'origines multiples qui ne sont pas activées.
Vérifiez que self.crossOriginIsolated renvoie true dans la console pour vérifier que votre page est soumise à l'isolement d'origines multiples.

Ressources #

Last updated: May 6, 2021 — Improve article

Return to all articles