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

Mises à jour

  • 21 juin 2022: les scripts de nœud de calcul doivent également faire l'objet d'une attention particulière lors de l'isolation multi-origine. est activé. Ajout d'explications.
  • 5 août 2021: l'API JS Self-Profiling fait partie des API qui nécessitent une isolation multi-origine, mais pour refléter une modification récente direction, il est supprimé.
  • 6 mai 2021: compte tenu des commentaires que nous avons reçus et des problèmes signalés, nous avons décidé de procéder à des ajustements. le calendrier d'utilisation de SharedArrayBuffer sur aucun site isolé multi-origine être restreintes dans Chrome M92.
  • 16 avril 2021: ajout de notes sur un nouvel identifiant COEP sans identifiants mode et COOP les pop-ups de même origine autorisant les pop-ups à créer un cadre détendu condition pour les données multi-origines l'isolation.
  • 5 mars 2021: suppression des limitations pour SharedArrayBuffer, performance.measureUserAgentSpecificMemory() et les fonctionnalités de débogage, qui sont désormais entièrement activés dans Chrome 89. Ajout de fonctionnalités à venir, performance.now() et performance.timeOrigin, dont la valeur sera plus élevée précision.
  • 19 février 2021: ajout d'une remarque sur les règles relatives aux fonctionnalités. allow="cross-origin-isolated" et la fonctionnalité de débogage dans les outils de développement.
  • 15 octobre 2020: self.crossOriginIsolated est disponible à partir de Chrome 87. Cela signifie que 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. Le tampon de tableau partagé dans Chrome pour Android seront disponibles à partir de Chrome 88.

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

API Description
SharedArrayBuffer Obligatoire pour les threads WebAssembly. Disponible sur Android Chrome 88. La version pour ordinateur de bureau est actuellement activée par défaut aide de Isolation de sites, mais nécessite un état isolé multi-origine et sera désactivé par défaut dans Chrome 92.
performance.measureUserAgentSpecificMemory() Disponible à partir de Chrome 89.
<ph type="x-smartling-placeholder"></ph> performance.now() et 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.
Fonctionnalités qui seront disponibles derrière un isolement multi-origine de l'état.

L'état isolé multi-origine empêche également la modification document.domain (Pouvoir modifier document.domain permet de communiquer entre des documents sur un même site et a été considérée comme une faille dans le règle d'origine commune.)

Pour activer un état isolé multi-origine, vous devez envoyer les éléments suivants : En-têtes HTTP 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 dont le chargement n'est pas activé par des documents d'origine différente, et empêchent d'interagir directement avec votre document. De plus, signifie que les ressources chargées en multi-origines nécessitent des activations.

Pour déterminer si une page Web se trouve dans un état isolé multi-origine, procédez comme suit : en train d'examiner self.crossOriginIsolated

Cet article explique comment utiliser ces nouveaux en-têtes. Dans un suivi Je vous fournirai plus de contexte.

Déployez COOP et COEP pour rendre votre site Web isolé multi-origine.

Intégrer COOP et COEP

1. Définir l'en-tête 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 ayant le même l'origine et les fenêtres ouvertes depuis le document, ont un mode de navigation de contexte, sauf s'ils ont la même origine et 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 sont désactivées.

Un groupe de contexte de navigation est un ensemble de fenêtres qui peuvent se référencer les unes les autres. Pour 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), la fenêtre d'ouverture et la fenêtre pop-up partagent le même contexte de navigation. Par conséquent, ils ont accès les uns aux autres via des API DOM telles que window.opener.

Groupe de contexte de navigation

Vous pouvez vérifier si l'ouverture et l'ouverture de la fenêtre se trouvent dans une navigation distincte. dans les outils de développement.

2. Assurez-vous que CORP ou CORS est activé sur les ressources

Assurez-vous que toutes les ressources de la page sont chargées avec le protocole HTTP CORP ou CORS en-têtes. Cette étape est nécessaire à l'étape 4, Activer le protocole COEP.

Voici ce que vous devez faire selon 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 dans plusieurs origin, définissez l'en-tête Cross-Origin-Resource-Policy: same-site.
  • Si la ressource est chargée à partir de plusieurs origines sous votre contrôle, définissez la valeur Cross-Origin-Resource-Policy: cross-origin si possible.
  • Pour les ressources multi-origines sur lesquelles vous n'avez aucun contrôle: <ph type="x-smartling-placeholder">
      </ph>
    • Utilisez l'attribut crossorigin dans la balise HTML de chargement si la ressource est à l'aide du CORS. (Par exemple, <img src="***" crossorigin>.)
    • Demandez au propriétaire de la ressource d'assurer la compatibilité avec CORS ou CORP.
  • Pour les cadres iFrame, suivez les mêmes principes 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 depuis 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, multi-origine Les sous-ressources chargées sans CORS doivent définir l'en-tête Cross-Origin-Resource-Policy: cross-origin pour activer leur intégration. Cela s'applique par exemple <script>, importScripts, <link>, <video>, <iframe>, etc.

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 une simulation en utilisant 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 option de manière récursive à tous les documents, y compris le document de premier niveau. iFrame et les scripts de nœud de calcul. Pour plus d'informations sur l'en-tête HTTP Report-Only, Observer les problèmes à l'aide de la création de rapports API.

4. Activer COEP

Une fois que vous avez confirmé que tout fonctionne et que toutes les ressources peuvent être chargé correctement, remplacez Cross-Origin-Embedder-Policy-Report-Only à l'en-tête Cross-Origin-Embedder-Policy avec la même valeur pour tous des documents, y compris ceux qui sont 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 se trouve dans une un état isolé multi-origine, et toutes les ressources et fenêtres sont isolées dans le même groupe de contexte de navigation. Cette API vous permet de déterminer ont isolé le groupe de contexte de navigation et obtenu l'accès fonctionnalités performantes comme performance.measureUserAgentSpecificMemory().

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

Pour les ressources affichées à l'écran, comme les images, il est assez facile pour détecter les problèmes COEP, car la demande sera bloquée et la page indiquent une image manquante. Toutefois, pour les ressources n'ont pas nécessairement un impact visuel, comme des scripts ou des styles, les problèmes COEP peuvent sont passées inaperçues. Pour ceux-ci, utilisez le panneau DevTools Network. Si il y a un problème avec COEP, vous devriez voir (blocked:NotSameOriginAfterDefaultedToSameOriginByCoep) dans l'état .

les problèmes COEP dans la colonne État du panneau Réseau.

Vous pouvez ensuite cliquer sur l'entrée pour en savoir plus.

Les détails du problème COEP s&#39;affichent dans l&#39;onglet &quot;En-têtes&quot; après avoir cliqué sur une ressource réseau dans le panneau &quot;Network&quot;.

Vous pouvez également déterminer l'état des iFrames et des fenêtres pop-up via la Application. Accédez à la section "Cadres". sur le côté gauche et développer "haut" pour voir la répartition de la structure des ressources.

<ph type="x-smartling-placeholder"></ph> Vous pouvez vérifier l'état de l'iFrame, comme la disponibilité de SharedArrayBuffer, etc.

Inspecteur iFrame des outils pour les développeurs Chrome

<ph type="x-smartling-placeholder"></ph> Vous pouvez également vérifier l'état des fenêtres pop-up, par exemple si elles sont multi-origines. isolés.

Outil d&#39;inspection des fenêtres pop-up des outils pour les développeurs Chrome

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

L'API Reporting est un autre mécanisme qui vous permet détecter divers problèmes. Vous pouvez configurer l'API Reporting pour indiquer à vos des utilisateurs navigateur pour envoyer un rapport chaque fois que COEP bloque le chargement d'une ressource ou COOP isole une fenêtre pop-up. Chrome accepte l'API Reporting depuis version 69 pour divers usages, y compris COEP et COOP.

Pour savoir comment configurer l'API Reporting et configurer un serveur pour recevoir consultez la page Utilisation des rapports API.

Exemple de rapport COEP

Par exemple, COEP rapport Lorsque la ressource multi-origine est bloquée, la charge utile 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

Par exemple, COOP rapport charge utile Lorsqu'une fenêtre pop-up est ouverte, son isolation se présente comme suit:

[{
  "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 contextes de navigation tentent de s'accéder les uns aux autres (uniquement sur "report-only" (rapport uniquement) mode), COOP envoie également un rapport. Par exemple, un rapport La tentative de postMessage() 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 l'inclusion d'une page Web dans un un état isolé multi-origine. Vous pourrez examiner self.crossOriginIsolated pour déterminer si une page Web est d'origine multi-origine un état isolé.

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

Ressources