Rendre votre site Web "cross-origin isolé" en utilisant COOP et COEP

Utilisez COOP et COEP pour configurer un environnement d'origine croisée isolé et activer des fonctionnalités puissantes telles que SharedArrayBuffer, performance.measureMemory()et la API de autoperfilado de JS.

13 avril 2020
Mise à jour 1 septembre 2020

Il apparaît dans:
Sûr et sécurisé

Algunas API la toile aumentan el riesgo de ataques de canal lateral como Spectre. Para mitigar ese riesgo, los navigateurs ofrecen un entorno aislado basado en opt-in llamado aislado de origen cruzado. Con un estado aislado de origen cruzado, la página web podrá utilizar funciones privilegiadas que incluyen:

L'état d'origine croisée isolé empêche également les modifications de
document.domain. (Pouvoir de modifier document.domain permet la communication entre les documents sur le même site et a été considérée comme une faille dans la même politique d'origine).

Para optar por un estado aislado de origen cruzado, debe enviar los siguientes en-têtes HTTP en el documento principal:

 require-corp
même origine

Estos encabezados le indican al le navigateur que bloquee la carga de recursos o iframes que no hayan optado por ser cargados por documentos de origen cruzado y eviten que las ventanas de origen cruzado interactúen directamente con su documento. Esto también significa que los recursos que se cargan en origen cruzado requieren suscripciones.

Vous pouvez déterminer si une page Web est dans un état d'origine croisée isolé en examinant
self.crossOriginIsolated. (Cela fonctionne dans Firefox mais n'a pas encore été implémenté dans Chrome.)

Cet article montre comment utiliser ces nouveaux en-têtes. Dans un article de suivi, je fournirai plus de contexte et de contexte.

Implémentez COOP et COEP pour isoler l'origine croisée de votre site Web

Integra COOP et COEP

Lorsque vous activez COOP dans un document de niveau supérieur, les fenêtres ayant la même origine et les fenêtres ouvertes à partir du document auront un groupe de contexte de navigation distinct à moins qu'elles ne soient dans la même origine avec les mêmes paramètres COOP. Par conséquent, une isolation est appliquée aux fenêtres ouvertes.

Un groupe de contexte de navigation est un groupe d'onglets, de fenêtres ou d'iframes qui partagent le même contexte. Par exemple, si un site Web (https://a.example) ouvre une fenêtre contextuelle (https://b.example), la fenêtre d'ouverture et la fenêtre pop-up partagent le même contexte de navigation et ont accès l'une à l'autre via l'API DOM comme
window.opener.

À partir de Chrome 83, la prise en charge dédiée de DevTools n'est pas encore disponible pour COOP. Cependant, vous pouvez examiner window.opener === null depuis la fenêtre ouverte, ou
openWindow.closed === true dans la fenêtre d'ouverture pour déterminer s'ils se trouvent dans des groupes de contexte de navigation distincts.

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 des en-têtes HTTP CORP ou CORS. Cette étape est requise pour l'étape quatre, qui active COEP.

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

• Si la ressource est censée se charger seulement de la même origine, sélectionnez le Politique de ressources croisées: même origine entête.
• Si la ressource est censée se charger uniquement du même site mais d'origine croisée, sélectionnez le Politique de ressources croisées: même site entête.
• Si la ressource est chargé à partir des origines croisées sous votre contrôle, sélectionnez le
  Cross-Origin-Resource-Policy: cross-origin en-tête si possible.
• Pour les ressources d'origine croisée sur lesquelles vous n'avez aucun contrôle:
  • Utilisez le crossorigin attribut en la etiqueta HTML de carga si el recurso se sirve con CORS.
  • Demandez au propriétaire de la ressource de soutenir CORS ou CORP.
• Pour les iframes, utilisez les en-têtes CORP et COEP comme suit:
  Politique de ressources croisées: même origine y Cross-Origin-Embedder-Policy: require-corp.

Avant d'activer complètement COEP, vous pouvez effectuer un test à l'aide du
Cross-Origin-Embedder-Policy-Report-Only encabezado para examinar si la política realmente funciona. Recibirás informes sin bloquear el Contenu incrustado. Aplique esto de forma recursiva a todos los documentos. Para obtener información sobre el encabezado HTTP solo para informes, consulte Observar problemas con la API de informes.

4. Activer COEP

Une fois que vous avez confirmé que tout fonctionne et que toutes les ressources peuvent être chargées correctement, appliquez le Cross-Origin-Embedder-Policy: require-corp En-tête HTTP à tous les documents, y compris ceux qui sont intégrés à l'aide d'iframes.

Déterminez si l'isolement a réussi avec self.crossOriginIsolated

Les self.crossOriginIsolated retour de propriété vrai lorsque la page Web est dans un état isolé d'origine croisée 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.measureMemory ().

Problèmes de débogage avec Chrome DevTools

Pour les ressources qui sont rendues à l'écran, telles que les images, il est assez facile de repérer les problèmes de COEP car la demande se bloquera et la page indiquera qu'une image est manquante. Cependant, pour les ressources qui n'ont pas nécessairement un impact visuel, comme les scripts ou les styles, les problèmes de COEP peuvent passer inaperçus. Pour ceux-ci, utilisez le panneau Réseau DevTools. S'il y a un problème avec COEP, vous devriez voir
(bloqué: NotSameOriginAfterDefaultedToSameOriginByCoep) dans le État
colonne.

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

Observez les problèmes avec l'API de création de rapports

Les API de rapport c'est un autre mécanisme par lequel vous pouvez détecter divers problèmes. Vous pouvez configurer l'API de création de rapports pour demander au navigateur de vos utilisateurs d'envoyer un rapport chaque fois que COEP bloque le chargement d'une ressource ou que COOP isole une fenêtre contextuelle. Chrome a pris en charge le
Reporte a

en-tête depuis la version 69 pour une variété d'utilisations, y compris COEP et COOP.

1. Activez 2 indicateurs dans chrome://flags 2. Enregistrer un test original

Activer 2 drapeaux dans chrome://flags

• Rapports de politique d'ouverture cross-origin (#ross-origin-opener-policy-reporting)
• Accéder aux rapports sur la politique d'ouverture cross-origine (#ross-origin-open-open-policy-access-reporting)

Enregistrer une preuve d'origine

Les tests d'origine vous permettent de tester de nouvelles fonctionnalités et de fournir des commentaires sur leur convivialité, leur caractère pratique et leur efficacité à la communauté des normes Web. Pour plus d'informations, consultez le Guide de test d'origine pour les développeurs Web. Pour vous inscrire à cette preuve d'origine ou à toute autre preuve d'origine, visitez le page d'inscription.

1. Demander un jeton par votre origine.
2. Ajoutez le jeton à vos pages. Il y a deux façons de le faire:
   • Ajouter un origine-procès balise à l'en-tête de chaque page. Par exemple, cela pourrait ressembler à ceci:
     
   • Si puede configurar su serveur, también puede agregar el token usando un Essai d'origine En-tête HTTP. L'en-tête de réponse qui en résulte doit ressembler à ceci:
     Essai d'origine: TOKEN_GOES_HERE

Mise en garde:
Pour utiliser l'API de création de rapports COOP, le jeton doit être servi comme en-tête HTTP au lieu d'un hashtag.

Pour spécifier où le navigateur doit envoyer les rapports, ajoutez le Reporte a En-tête HTTP à tout document livré avec un en-tête HTTP COEP ou COOP. Les
Reporte a L'en-tête prend également en charge certains paramètres supplémentaires pour configurer les rapports. Par exemple:

 { group: 'coep_report', max_age: 86400, endpoints: [{ URL: 'https://first-party-test.glitch.me/report'}]},{ group: 'coop_report', max_age: 86400, endpoints: [{ url: 'https://first-party-test.glitch.me/report'}]}

L'objet paramètre a trois propriétés:

grouper

Les grouper property nomme vos différents points de terminaison de rapport. Utilisez ces noms pour cibler un sous-ensemble de vos rapports. Par exemple, dans le
Politique Cross-Origin-Embedder y Politique d'ouverture des origines croisées directives, vous pouvez spécifier le point de terminaison pertinent en fournissant le nom du groupe à rapport à =. Par exemple:

 require-corp; report-to="coep_report"
same-origin; report-to="coop_report"

Lorsque le navigateur rencontre cela, il va croiser le reporte a valeur avec grouper propriété dans le Reporte a en-tête pour trouver le point final. Cet exemple de références croisées coep_report y coop_report pour trouver le point final https://first-party-test.glitch.me/report.

Si vous préférez recevoir des rapports sans bloquer aucun contenu intégré ou isoler une fenêtre contextuelle, ajoutez -Rapport uniquement aux rubriques respectives: c.-à-d. Cross-Origin-Embedder-Policy-Report-Only y
Cross-Origin-Opener-Policy-Report-Only. Par exemple:

 require-corp; report-to="coep_report"
same-origin; report-to="coop_report"

En faisant cela, lorsque le navigateur détecte des ressources d'origine croisée qui n'ont pas CORP ou CORS, il envoie un rapport à l'aide de l'API de création de rapports sans bloquer ces ressources en raison de COEP.

De même, lorsque le navigateur ouvre une fenêtre contextuelle d'origine croisée, il envoie un rapport sans réellement isoler la fenêtre en raison de COOP. Il signale également lorsque différents groupes de contexte de navigation tentent de s’accéder, mais uniquement en mode "rapport uniquement".

max_age

Les max_age La propriété spécifie la durée en secondes après laquelle les rapports non envoyés seront supprimés. Le navigateur n'envoie pas les rapports immédiatement. Au lieu de cela, il les diffuse hors bande tant qu'il n'y a pas d'autres tâches de priorité plus élevée. Les max_age empêche le navigateur d'envoyer des rapports trop obsolètes pour être utiles. Par exemple, max_age: 86400 signifie que pas plus de vingt-quatre heures de rapports seront envoyés.

points de terminaison

Les points de terminaison propiedad especifica las URL de uno o más puntos finales de informes. El punto final debe aceptar CORS si está alojado en un origen diferente. El navegador enviará informes con un type de contenu de application / rapports + json.

Un exemple de la charge utile du rapport COEP lorsqu'une ressource d'origine croisée se bloque ressemble à ceci:

[{
"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://first-party-test.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"
}]

Un exemple de charge utile de rapport COOP lorsqu'une fenêtre contextuelle isolée est ouverte ressemble à ceci:

[{
"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://first-party-test.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 (uniquement en mode "rapport uniquement"), COOP envoie également un rapport. Par exemple, un rapport lorsque
postMessage () vous essayez cela ressemblerait à ceci:

[{
"age": 51785,
"body": {
"columnNumber": 18,
"disposition": "reporting",
"effectivePolicy": "same-origin",
"lineNumber": 83,
"property": "postMessage",
"sourceFile": "https://first-party-test.glitch.me/popup.js",
"type": "access-from-coop-page-to-openee"
},
"type": "coop",
"url": "https://first-party-test.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://first-party-test.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 opter pour une page Web dans un état isolé spécial d'origine croisée. Vous pourrez examiner
self.crossOriginIsolated pour déterminer si une page Web est dans un état d'origine croisée isolé.

Dans les futures versions de Chrome, cet état isolé d'origine croisée empêchera
altérant
document.domain

et il vous donnera accès à des fonctionnalités puissantes telles que:

Nous garderons cet article à jour au fur et à mesure que de nouvelles fonctionnalités seront disponibles pour cet état isolé d'origine croisée et que d'autres améliorations seront apportées à DevTools autour de COOP et COEP.