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.
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.
SharedArrayBuffer
est utilisé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 deSharedArrayBuffer
. 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](https://web.dev/static/articles/cross-origin-isolation-guide/image/devtoools-console-warning-a56031c56b918.png?authuser=6&hl=fr)
(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 queCOOP: 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 deCOEP: 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.
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êteCross-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 querequest.mode
est défini surcors
. - Si vous souhaitez utiliser des fonctionnalités puissantes telles que
SharedArrayBuffer
dans un iFrame chargé, ajoutezallow="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éfiniCross-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éfiniCross-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
renvoietrue
dans la console pour vérifier que votre page est isolée multi-origine.