isoler votre site Web 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

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

régulières

• 21 juin 2022: les scripts de nœuds 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 reflétant un changement de direction récent, elle a été supprimée.
• 6 mai 2021: en fonction des commentaires et des problèmes signalés, nous avons décidé d'ajuster le calendrier d'utilisation de SharedArrayBuffer dans Chrome M92 sur aucun site isolé multi-origine.
• 16 avril 2021: ajout de notes sur un nouveau mode sans identifiant COEP et sur l'option COOP same-origin-allow-popups pour être une condition flexible pour l'isolation multi-origine.
• 5 mars 2021: suppression des limites concernant SharedArrayBuffer, performance.measureUserAgentSpecificMemory() et les fonctionnalités de débogage, qui sont désormais entièrement activées dans Chrome 89. Ajout de fonctionnalités à venir, performance.now() et performance.timeOrigin, qui seront plus précises.
• 19 février 2021: ajout d'une remarque sur la règle de fonctionnalité allow="cross-origin-isolated" et la fonctionnalité de débogage des outils de développement.
• 15 octobre 2020: self.crossOriginIsolated est disponible depuis Chrome 87. Ainsi, document.domain est immuable lorsque self.crossOriginIsolated renvoie true. performance.measureUserAgentSpecificMemory() met fin à sa phase d'évaluation et est activé par défaut dans Chrome 89. Shared Array Buffer dans Chrome pour Android sera disponible à partir de Chrome 88.

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

Fonctionnalités qui seront disponibles derrière un état isolé multi-origine.

API	Description
SharedArrayBuffer	Obligatoire pour les threads WebAssembly. Cette fonctionnalité est disponible dans Chrome 88 pour Android. La version classique est actuellement activée par défaut à l'aide de l' isolation de sites, mais elle nécessitera l'état isolé multi-origine et sera désactivée par défaut dans Chrome 92.
performance.measureUserAgentSpecificMemory()	Disponible à partir de Chrome 89.
performance.now() performance.timeOrigin	Actuellement 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 la modification de document.domain. (Pouvoir modifier document.domain permet la communication entre des documents sur le même site et a été considéré comme une faille dans la règle d'origine identique.)

Pour activer un état isolé multi-origine, vous devez envoyer les en-têtes HTTP suivants dans 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 multi-origines, et empêchent les fenêtres multi-origines d'interagir directement avec votre document. Cela signifie également que les ressources chargées en multi-origine nécessitent des activations.

Vous pouvez déterminer si une page Web se trouve dans un état isolé multi-origine en examinant self.crossOriginIsolated.

Cet article explique comment utiliser ces nouveaux en-têtes. Je vous fournirai plus de contexte dans un article complémentaire.

Remarque : Cet article s'adresse aux personnes qui souhaitent préparer leurs sites Web à l'utilisation de SharedArrayBuffer, de threads WebAssembly, d'performance.measureUserAgentSpecificMemory() ou d'un minuteur haute résolution avec une meilleure précision et de manière plus robuste sur différentes plates-formes de navigateur.

Terme clé : cet article utilise de nombreuses terminologies similaires. Pour clarifier les choses, commençons par les définir: * COEP: Règle de l'intégrateur multi-origine * COOP: Règle d'ouverture multi-origine * CORP: Règle de ressource multi-origine * CORS: Partage des ressources entre origines multiples * CORB: Blocage de lecture multi-origine

Déployez les programmes COOP et COEP pour isoler plusieurs origines multiples de votre site Web.

Remarque : Pour découvrir comment activer l'isolation multi-origine, consultez le guide pour activer l'isolation multi-origine.

Intégrer COOP et COEP

1. Définissez l'en-tête Cross-Origin-Opener-Policy: same-origin sur le document de premier niveau.

Si vous activez COOP: same-origin sur un document de niveau supérieur, les fenêtres de même origine et les fenêtres ouvertes à partir du document seront associées à un groupe de contexte de navigation distinct, sauf si elles se trouvent dans la même origine et avec le même paramètre COOP. Ainsi, l'isolation est appliquée pour les fenêtres ouvertes et la communication mutuelle entre les deux fenêtres est désactivée.

Attention : Cela endommagera les intégrations qui nécessitent des interactions de fenêtre multi-origines, comme OAuth et les paiements. Pour atténuer ce problème, nous cherchons à 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 ce problème, nous vous recommandons de vous inscrire à une phase d'évaluation et d'attendre que la nouvelle condition soit disponible. Nous ne prévoyons pas de mettre fin à la phase d'évaluation tant que ce problème n'aura pas été résolu.

Un groupe de contexte de navigation est un ensemble de fenêtres pouvant faire référence les unes aux autres. Par exemple, un document de premier niveau et ses documents enfants intégrés via <iframe>. Si un site Web (https://a.example) ouvre une fenêtre pop-up (https://b.example), celle-ci et la fenêtre pop-up partagent le même contexte de navigation. Par conséquent, elles ont accès l'un à l'autre via des API DOM telles que window.opener.

Vous pouvez vérifier si l'ouverture de la fenêtre et son ouverture se trouvent dans des groupes de contexte de navigation distincts dans les outils de développement.

À vous de jouer : Découvrez l'impact de différents paramètres COOP.

2. Assurez-vous que CORP ou CORS est activé pour 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 nécessaire à l'étape 4 : 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 multi-origine, définissez l'en-tête Cross-Origin-Resource-Policy: same-site.
• Si la ressource est chargée depuis plusieurs origines sous votre contrôle, définissez l'en-tête Cross-Origin-Resource-Policy: cross-origin si possible.
• Pour les ressources multi-origines 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 d'accepter le CORS ou le CORP.
• Pour les iFrames, suivez les mêmes principes que ci-dessus 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 nœud de calcul diffusé avec COEP: require-corp, les sous-ressources multi-origines chargées sans CORS doivent définir l'en-tête Cross-Origin-Resource-Policy: cross-origin pour accepter l'intégration. Par exemple, cela s'applique à <script>, importScripts, <link>, <video>, <iframe>, etc.

Vous pouvez activer l'isolation multi-origine sur un document intégré dans un iFrame en appliquant une règle d'autorisation allow="cross-origin-isolated" au tag <iframe> et en remplissant les conditions décrites dans ce document. Notez que toute la chaîne des documents, y compris les cadres parents et enfants, doit également être isolée multi-origine.

Terme clé : il est important que vous compreniez la différence entre "même site" et "même origine". Pour en savoir plus sur les différences entre les deux types de propriétés, consultez l'article Comprendre les méthodes "same-site" et "same-origin".

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

Avant d'activer complètement COEP, vous pouvez effectuer une simulation à 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-le de manière récursive à tous les documents, y compris le document de premier niveau, les cadres iFrame et les scripts de nœud de calcul. Pour en savoir plus sur l'en-tête HTTP "Report-Only", consultez la page Observer les problèmes à l'aide de l'API Reporting.

4. Activer COEP

Après avoir 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 intégrés via des iFrames et des scripts de nœud de calcul.

À vous d'essayer : Découvrez l'impact de différents paramètres COEP / CORP.

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

Attention : Nous avons étudié des moyens de déployer Cross-Origin-Resource-Policy à grande échelle, car l'isolation multi-origine nécessite l'activation explicite de toutes les sous-ressources. 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. Toutefois, étant donné que le mode credentialless est disponible sur Chrome à partir de la version 96, mais qu'il n'est pas encore pris en charge par d'autres navigateurs, certains développeurs peuvent avoir du mal à déployer COOP ou COEP. Si vous préférez ne pas encore activer l'isolation multi-origine, nous vous recommandons de vous inscrire à une phase d'évaluation et d'attendre que credentialless soit disponible dans d'autres navigateurs.

Déterminer si l'isolation a réussi avec self.crossOriginIsolated

La propriété self.crossOriginIsolated renvoie true lorsque la page Web est dans un état isolé 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 contexte de navigation et à accéder à des fonctionnalités puissantes telles que performance.measureUserAgentSpecificMemory().

Résoudre les problèmes à l'aide des outils pour les développeurs Chrome

Pour les ressources affichées à l'écran, telles que les images, il est assez facile de détecter les problèmes COEP, car la requête sera bloquée et la page indiquera une image manquante. Toutefois, pour les ressources qui n'ont pas nécessairement un impact visuel, telles que les scripts ou les styles, les problèmes COEP peuvent passer inaperçus. Pour cela, utilisez le panneau DevTools Network. En cas de problème avec COEP, (blocked:NotSameOriginAfterDefaultedToSameOriginByCoep) doit s'afficher dans la colonne Status (É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 pop-up via le panneau Application. Accédez à la section "Frames" sur la gauche, puis développez la section "Haut" pour afficher la répartition de la structure des ressources.

Vous pouvez vérifier l'état de l'iFrame, comme la disponibilité de SharedArrayBuffer, etc.

Vous pouvez également vérifier l'état des fenêtres pop-up, par exemple pour vérifier si elles sont isolées multi-origines.

Observer les problèmes liés à l'utilisation de l'API Reporting

L'API Reporting est un autre mécanisme vous permettant de détecter divers problèmes. Vous pouvez configurer l'API Reporting pour demander au navigateur de vos utilisateurs d'envoyer un rapport chaque fois que COEP bloque le chargement d'une ressource ou lorsque COOP isole une fenêtre pop-up. 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 ? Une nouvelle version de l'API Reporting, qui remplace Report-To par Reporting-Endpoints est en cours de transition dans Chrome. Nous vous conseillons de passer à la nouvelle version. Pour en savoir plus, consultez Migrer vers la version 1 de l'API Reporting.

Pour savoir comment configurer l'API Reporting et un serveur afin de recevoir des rapports, consultez la page Utiliser l'API Reporting.

Exemple de rapport COEP

Un exemple de charge utile de rapport COEP lorsque une ressource multi-origine est bloquée se présente comme suit:

[{
  "age": 25101,
  "body": {
    "blocked-url": "https://third-party-test.glitch.me/check.svg?",
    "blockedURL": "https://third-party-test.glitch.me/check.svg?",
    "destination": "image",
    "disposition": "enforce",
    "type": "corp"
  },
  "type": "coep",
  "url": "https://cross-origin-isolation.glitch.me/?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'est disponible que pour assurer la rétrocompatibilité. Il sera bientôt supprimé.

Exemple de rapport COOP

Voici un exemple de charge utile de rapport COOP lorsqu'une fenêtre pop-up est ouverte:

[{
  "age": 7,
  "body": {
    "disposition": "enforce",
    "effectivePolicy": "same-origin",
    "nextResponseURL": "https://third-party-test.glitch.me/popup?report-only&coop=same-origin&",
    "type": "navigation-from-response"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.glitch.me/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, en cas de tentative de postMessage(), un rapport se présente comme suit:

[{
  "age": 51785,
  "body": {
    "columnNumber": 18,
    "disposition": "reporting",
    "effectivePolicy": "same-origin",
    "lineNumber": 83,
    "property": "postMessage",
    "sourceFile": "https://cross-origin-isolation.glitch.me/popup.js",
    "type": "access-from-coop-page-to-openee"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.glitch.me/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.glitch.me/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"
}]

Conclusion

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

Cet article sera tenu à jour à mesure que de nouvelles fonctionnalités seront disponibles dans 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 est-il nécessaire d'être isolé multi-origine pour bénéficier de fonctionnalités puissantes ?
• Guide pour activer l'isolation multi-origine
• Mises à jour de SharedArrayBuffer dans Android 88 et Chrome pour ordinateur 92
• Contrôler l'utilisation totale de la mémoire de votre page Web avec measureUserAgentSpecificMemory()