Rendre votre site Web « isolé multi-origine » à l'aide de COOP et COEP

Utilisez COOP et COEP pour configurer un environnement isolé multi-origine et activer des fonctionnalités puissantes telles que SharedArrayBuffer, performance.measureUserAgentSpecificMemory() et un minuteur haute résolution avec une meilleure précision.

Eiji Kitamura

Publié le 13 avril 2020, dernière mise à jour le 21 juin 2022

Attention : SharedArrayBuffer sur Chrome pour ordinateur nécessite une isolation multi-origine à partir de Chrome 92. Pour en savoir plus, consultez Mises à jour de SharedArrayBuffer.

Ce document explique comment utiliser COOP et COEP. Pour en savoir plus sur l'importance de cette fonctionnalité, consultez Rendre votre site Web "isolé multi-origine" à l'aide de COOP et COEP.

Certaines API Web augmentent le risque d'attaques par canal auxiliaire comme Spectre. Pour limiter ce risque, les navigateurs proposent un environnement isolé basé sur l'activation, appelé "isolé multi-origine". Avec un état d'isolation multi-origine, la page Web pourra utiliser des fonctionnalités privilégiées, y compris :

Fonctionnalités qui seront disponibles derrière l'état isolé multi-origine

API	Description
SharedArrayBuffer	Obligatoire pour les threads WebAssembly. Cette fonctionnalité est disponible à partir de Chrome 88 pour Android. La version classique est activée par défaut grâce à l'isolation de sites, mais elle nécessitera l'état d'isolation multi-origine et sera désactivée par défaut dans Chrome 92.
performance.measureUserAgentSpecificMemory()	Disponible à partir de Chrome 89.
performance.now(), performance.timeOrigin	Disponible dans de nombreux navigateurs, avec une résolution limitée à 100 microsecondes ou plus. Avec l'isolation multi-origine, la résolution peut être de 5 microsecondes ou plus.

L'état isolé multi-origine empêche également les modifications de document.domain. (La possibilité de modifier document.domain permet la communication entre des documents du même site et a été considérée comme une faille dans la règle d'origine commune.)

Pour activer un état isolé multi-origine, vous devez envoyer les en-têtes HTTP suivants sur le document principal :

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin

Ces en-têtes indiquent au navigateur de bloquer le chargement des ressources ou des iFrames qui n'ont pas accepté d'être chargés par des documents interorigines, et empêchent les fenêtres interorigines d'interagir directement avec votre document. Cela signifie également que les ressources chargées en mode interorigine nécessitent des autorisations.

Vous pouvez déterminer si une page Web est dans un état d'isolation multi-origine en examinant self.crossOriginIsolated.

Remarque : Ce document s'adresse aux personnes qui souhaitent préparer leurs sites Web à utiliser SharedArrayBuffer, les threads WebAssembly, performance.measureUserAgentSpecificMemory() ou un minuteur haute résolution avec une meilleure précision et de manière plus robuste sur toutes les plates-formes de navigateur.

Glossaire

Ce document utilise de nombreux termes abrégés et similaires. Pour plus de clarté, nous avons préparé un mini-glossaire :

• COEP : Cross Origin Embedder Policy
• COOP : Cross Origin Opener Policy
• CORP : Cross-Origin Resource Policy
• CORS : Cross Origin Resource Sharing
• CORB : Cross Origin Read Blocking

Isoler votre site Web multi-origine

Conseil : Découvrez comment activer l'isolation multi-origine.

1. Définir Cross-Origin-Opener-Policy: same-origin sur le document de premier niveau

En activant COOP: same-origin sur un document de premier niveau, les fenêtres de même origine et les fenêtres ouvertes à partir du document disposent d'un groupe de contexte de navigation distinct, sauf si elles sont de même origine avec le même paramètre COOP. L'isolation est donc appliquée aux fenêtres ouvertes, et la communication mutuelle entre les deux fenêtres est désactivée.

Un groupe de contextes de navigation est un ensemble de fenêtres qui peuvent se référencer mutuellement. Par exemple, un document de premier niveau et ses documents enfants intégrés à l'aide de <iframe>. Si un site Web (https://a.example) ouvre une fenêtre de dialogue (https://b.example), la fenêtre d'ouverture et la fenêtre de dialogue partagent le même contexte de navigation. Elles ont donc accès l'une à l'autre avec des API DOM telles que window.opener.

Vous pouvez vérifier si l'élément qui ouvre la fenêtre et l'élément ouvert se trouvent dans des groupes de contexte de navigation distincts à partir des outils de développement.

2. Activer CORP ou CORS sur les ressources

Assurez-vous que toutes les ressources de la page sont chargées avec des en-têtes HTTP CORP ou CORS. Cette étape est requise pour l'étape 4, qui consiste à activer COEP.

Voici ce que vous devez faire, en fonction de la nature de la ressource :

• Si la ressource doit être chargée uniquement à partir de la même origine, définissez l'en-tête Cross-Origin-Resource-Policy: same-origin.
• Si la ressource doit être chargée uniquement à partir du même site, mais avec une origine différente, définissez l'en-tête Cross-Origin-Resource-Policy: same-site.
• Si la ressource est chargée à partir d'une ou de plusieurs origines multiples que vous contrôlez, définissez l'en-tête Cross-Origin-Resource-Policy: cross-origin si possible.
• Pour les ressources interorigines sur lesquelles vous n'avez aucun contrôle :
  • Utilisez l'attribut crossorigin dans la balise HTML de chargement si la ressource est diffusée avec CORS. (Par exemple, <img src="***" crossorigin>.)
  • Demandez au propriétaire de la ressource de prendre en charge CORS ou CORP.
• Pour les iFrames, suivez les mêmes principes et définissez Cross-Origin-Resource-Policy: cross-origin (ou same-site, same-origin selon le contexte).
• Les scripts chargés avec un WebWorker doivent être diffusés à partir de la même origine. Vous n'avez donc pas besoin d'en-têtes CORP ou CORS.
• Pour un document ou un worker diffusé avec COEP: require-corp, les sous-ressources interorigines chargées sans CORS doivent définir l'en-tête Cross-Origin-Resource-Policy: cross-origin pour accepter d'être intégrées. Par exemple, cela s'applique à <script>, importScripts, <link>, <video>, <iframe>, etc.

Terme clé : Same-site désigne les sites Web qui ont le même schéma et le même eTLD+1. Les sites Web de même origine ont la même combinaison de schéma, de nom d'hôte et de port. En savoir plus sur la différence entre "same-site" et "same-origin"

.

Isolation dans les iFrames

Vous pouvez activer l'isolation multi-origine sur un document intégré dans un iframe en appliquant la règle d'autorisation allow="cross-origin-isolated" à la balise <iframe> et en remplissant ces conditions. La chaîne complète des documents, y compris les cadres parents et enfants, doit également être isolée multi-origine.

3. Utiliser l'en-tête HTTP COEP Report-Only pour évaluer les ressources intégrées

Avant d'activer complètement COEP, vous pouvez effectuer un dry run à l'aide de l'en-tête Cross-Origin-Embedder-Policy-Report-Only pour vérifier si la règle fonctionne réellement. Vous recevrez des rapports sans bloquer le contenu intégré.

Appliquez cette règle de manière récursive à tous les documents, y compris le document de premier niveau, les iFrames et les scripts de nœud de calcul. Pour en savoir plus sur l'en-tête HTTP Report-Only, consultez Observer les problèmes à l'aide de l'API Reporting.

4. Activer COEP

Cette étape ne peut être effectuée qu'une fois que vous vous êtes assuré que les ressources ont activé CORP ou CORS.

Une fois que vous avez vérifié que tout fonctionne et que toutes les ressources peuvent être chargées, remplacez l'en-tête Cross-Origin-Embedder-Policy-Report-Only par l'en-tête Cross-Origin-Embedder-Policy avec la même valeur pour tous les documents, y compris ceux qui sont intégrés à des iFrames et des scripts de nœud de calcul.

Remarque : Squoosh, une PWA d'optimisation d'images, utilise COOP/COEP pour accéder aux threads Wasm (et au tampon de tableau partagé) et sur Android Chrome.

Attention : Nous étudions comment déployer Cross-Origin-Resource-Policy à grande échelle, car l'isolation multi-origine nécessite que toutes les sous-ressources s'inscrivent explicitement. Une option est le mode sans identifiants COEP, qui permet de charger des ressources sans l'en-tête CORP, en supprimant tous leurs identifiants. Le mode sans identifiants est disponible à partir de Chrome 96 et dans Edge, mais n'est pas encore compatible avec les autres navigateurs.

Déterminer si l'isolation a réussi

La propriété self.crossOriginIsolated renvoie true lorsque la page Web est dans un état d'isolation multi-origine et que toutes les ressources et fenêtres sont isolées dans le même groupe de contexte de navigation. Vous pouvez utiliser cette API pour déterminer si vous avez réussi à isoler le groupe de contextes de navigation et à accéder à des fonctionnalités telles que performance.measureUserAgentSpecificMemory().

Débogage de problèmes

Vous pouvez rencontrer des problèmes avec COOP et COEP. Vous pouvez utiliser les outils pour les développeurs du navigateur ou l'API Reporting pour le débogage.

Déboguer avec les outils de développement Chrome

Pour les ressources affichées à l'écran, comme les images, il est assez facile de détecter les problèmes de COEP, car la requête est bloquée et la page doit indiquer une image manquante. Toutefois, pour les ressources qui n'ont pas nécessairement d'impact visuel, comme les scripts ou les styles, les problèmes de COEP peuvent passer inaperçus. Pour cela, utilisez le panneau "Réseau" des outils de développement.

En cas de problème avec COEP, vous devriez voir (blocked:NotSameOriginAfterDefaultedToSameOriginByCoep) dans la colonne État.

Vous pouvez ensuite cliquer sur l'entrée pour afficher plus de détails.

Vous pouvez également déterminer l'état des iFrames et des fenêtres de dialogue via le panneau Application. Accédez à la section "Frames" sur la gauche et développez "top" pour afficher la répartition de la structure des ressources.

Vous pouvez vérifier l'état de l'iframe, par exemple la disponibilité de SharedArrayBuffer, etc.

Vous pouvez également vérifier l'état de la fenêtre de dialogue, par exemple si elle est isolée de l'origine croisée.

Observer les problèmes à l'aide de l'API Reporting

L'API Reporting est un autre mécanisme permettant de détecter divers problèmes. Vous pouvez configurer l'API Reporting pour indiquer au navigateur de vos utilisateurs d'envoyer un rapport chaque fois que la COEP bloque le chargement d'une ressource ou que la COOP isole une fenêtre de dialogue. Chrome est compatible avec l'API Reporting depuis la version 69 pour diverses utilisations, y compris COEP et COOP.

Remarque : Utilisez-vous déjà l'API Reporting avec l'en-tête Report-To ? Chrome passe à une nouvelle version de l'API Reporting, qui remplace Report-To par Reporting-Endpoints. Envisagez de migrer vers la nouvelle version. Pour en savoir plus, consultez Migrer vers l'API Reporting v1.

Découvrez comment configurer l'API Reporting et configurer un serveur pour recevoir des rapports.

Exemple de rapport COEP

Voici un exemple de charge utile de rapport COEP lorsqu'une ressource interorigine est bloquée :

[{
  "age": 25101,
  "body": {
    "blocked-url": "https://third-party-test.example.org/check.svg?",
    "blockedURL": "https://third-party-test.example.org/check.svg?",
    "destination": "image",
    "disposition": "enforce",
    "type": "corp"
  },
  "type": "coep",
  "url": "https://cross-origin-isolation.example.com/?coep=require-corp&coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4249.0 Safari/537.36"
}]

Attention : blocked-url n'existe que pour des raisons de rétrocompatibilité et sera supprimé.

Exemple de rapport COOP

Voici un exemple de charge utile de rapport COOP lorsqu'une boîte de dialogue est ouverte de manière isolée :

[{
  "age": 7,
  "body": {
    "disposition": "enforce",
    "effectivePolicy": "same-origin",
    "nextResponseURL": "https://third-party-test.example.org/popup?report-only&coop=same-origin&",
    "type": "navigation-from-response"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.example.com/coop?coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
}]

Lorsque différents groupes de contexte de navigation tentent d'accéder les uns aux autres (uniquement en mode "rapport uniquement"), COOP envoie également un rapport. Par exemple, un rapport lorsqu'une tentative de postMessage() est effectuée se présente comme suit :

[{
  "age": 51785,
  "body": {
    "columnNumber": 18,
    "disposition": "reporting",
    "effectivePolicy": "same-origin",
    "lineNumber": 83,
    "property": "postMessage",
    "sourceFile": "https://cross-origin-isolation.example.com/popup.js",
    "type": "access-from-coop-page-to-openee"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.example.com/coop?report-only&coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
},
{
  "age": 51785,
  "body": {
    "disposition": "reporting",
    "effectivePolicy": "same-origin",
    "property": "postMessage",
    "type": "access-to-coop-page-from-openee"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.example.com/coop?report-only&coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
}]

Points à retenir

Utilisez une combinaison d'en-têtes HTTP COOP et COEP pour activer un état d'isolation multi-origine spécial sur une page Web. Vous pouvez examiner self.crossOriginIsolated pour déterminer si une page Web est dans un état d'isolation multi-origine.

Nous mettrons à jour cet article à mesure que de nouvelles fonctionnalités seront disponibles pour cet état isolé multi-origine et que d'autres améliorations seront apportées aux outils de développement concernant COOP et COEP.

Ressources

• Pourquoi vous avez besoin d'une "isolation multi-origine" pour les fonctionnalités puissantes
• Guide pour activer l'isolation multi-origine
• Surveiller l'utilisation totale de la mémoire de votre page Web avec measureUserAgentSpecificMemory()

Mises à jour du document

• 21 juin 2022 : les scripts de nœud de calcul nécessitent également une attention particulière lorsque l'isolation multi-origine est activée. Ajout d'explications
• 5 août 2021 : l'API JS Self-Profiling a été mentionnée comme l'une des API nécessitant une isolation multi-origine, mais elle a été supprimée pour refléter le récent changement de direction.
• 6 mai 2021 : d'après les commentaires et les problèmes signalés, nous avons décidé d'ajuster le calendrier d'utilisation de SharedArrayBuffer sur les sites non isolés multi-origine afin de le restreindre dans Chrome M92.
• 16 avril 2021 : ajout de notes sur le mode sans identifiants COEP et sur COOP same-origin-allow-popups en tant que condition assouplie pour l'isolation multi-origine.
• 5 mars 2021 : suppression des limites pour SharedArrayBuffer, performance.measureUserAgentSpecificMemory() et les fonctionnalités de débogage, qui sont désormais entièrement activées dans Chrome 89. Ajout des fonctionnalités à venir, performance.now() et performance.timeOrigin, qui offriront une plus grande précision.
• 19 février 2021 : ajout d'une note sur la fonctionnalité de règlesallow="cross-origin-isolated" et de débogage dans les outils de développement.
• 15 octobre 2020 : self.crossOriginIsolated est disponible à partir de Chrome 87. Par conséquent, document.domain est immuable lorsque self.crossOriginIsolated renvoie true. performance.measureUserAgentSpecificMemory() met fin à son essai Origin Trial et est activé par défaut dans Chrome 89. SharedArrayBuffer sur Chrome pour Android sera disponible à partir de Chrome 88.