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.
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()
etperformance.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 lorsqueself.crossOriginIsolated
renvoietrue
.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:
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.
Déployez les programmes COOP et COEP pour isoler plusieurs origines multiples de votre site Web.
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.
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.
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.
- Utilisez l'attribut
- Pour les iFrames, suivez les mêmes principes que ci-dessus et définissez
Cross-Origin-Resource-Policy: cross-origin
(ousame-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êteCross-Origin-Resource-Policy: cross-origin
pour accepter l'intégration. Par exemple, cela s'applique à<script>
,importScripts
,<link>
,<video>
,<iframe>
, etc.
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.
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).
![des problèmes COEP dans la colonne État du panneau "Réseau".](https://web.dev/static/articles/coop-coep/image/coep-issues-the-status-c-9f8040461053.jpg?authuser=5&hl=fr)
Vous pouvez ensuite cliquer sur l'entrée pour afficher plus de détails.
![Les détails du problème COEP s'affichent dans l'onglet En-têtes lorsque vous cliquez sur une ressource réseau dans le panneau "Network".](https://web.dev/static/articles/coop-coep/image/details-the-coep-issue-a-7483b46211d45.jpg?authuser=5&hl=fr)
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.
![Outil d'inspection iFrame des outils pour les développeurs Chrome](https://web.dev/static/articles/coop-coep/image/chrome-devtools-iframe-in-7b22ff613fbeb.png?authuser=5&hl=fr)
Vous pouvez également vérifier l'état des fenêtres pop-up, par exemple pour vérifier si elles sont isolées multi-origines.
![Inspecteur de la fenêtre pop-up des outils pour les développeurs Chrome](https://web.dev/static/articles/coop-coep/image/chrome-devtools-popup-win-191023386b4a8.png?authuser=5&hl=fr)
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.
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"
}]
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()