Pourquoi avez-vous besoin d'un modèle isolé multi-origine pour bénéficier de fonctionnalités performantes ?

Découvrez pourquoi l'isolation multi-origine est nécessaire pour utiliser des fonctionnalités puissantes telles que SharedArrayBuffer, performance.measureUserAgentSpecificMemory() et un minuteur haute résolution avec une meilleure précision.

Introduction

Dans la section Rendre votre site Web isolé multi-origine avec COOP et COEP, nous vous avons expliqué comment adopter le "cross-origin", isolés" à l’aide de COOP et COEP. Cet article d'accompagnement explique pourquoi l'isolation multi-origine est nécessaire pour activer des fonctionnalités puissantes dans le navigateur.

Contexte

Le Web est basé sur la même origine "policy": il s'agit d'une fonctionnalité de sécurité qui limite comment les documents et les scripts peuvent interagir avec des ressources d’une autre origine. Ce limite les façons dont les sites Web peuvent accéder aux ressources multi-origines. Pour exemple, un document provenant de https://a.example n'a pas accès aux données hébergé à https://b.example.

Cependant, la règle d'origine commune présente des exceptions historiques. Tout site Web peut:

  • Intégrer des iFrames multi-origines
  • Inclure des ressources multi-origines telles que des images ou des scripts
  • Ouvrir des fenêtres pop-up multi-origines avec une référence DOM

Si le Web pouvait être conçu à partir de zéro, ces exceptions n'existeraient pas. Malheureusement, lorsque la communauté Web a réalisé les principaux avantages d'une très stricte, le Web s'appuyait déjà sur ces exceptions.

Les effets secondaires sur la sécurité d'une telle politique laxiste de même origine ont été corrigés dans deux de différentes manières. L'une d'elles a été l'introduction d'un nouveau protocole appelé Cross-Cross Partage des ressources de l'origine (CORS) dont le but est de s'assurer que le serveur autorise le partage d'une ressource avec une origine donnée. L'autre méthode consiste à supprimer implicitement l'accès direct au script les ressources multi-origines tout en préservant la rétrocompatibilité. Telles les ressources multi-origines sont appelées "opaques" ressources. Par exemple, c’est pourquoi manipuler les pixels d'une image multi-origine via CanvasRenderingContext2D ; échoue, sauf si CORS est appliqué à l'image.

Toutes ces décisions concernant les règles sont prises au sein d'un groupe de contexte de navigation.

Groupe de contexte de navigation

Pendant longtemps, la combinaison du CORS et des ressources opaques a suffi pour la sécurité des navigateurs. Parfois, les cas particuliers (JSON failles) ont été découvertes et devaient faire l'objet de correctifs, mais dans l'ensemble, le principe l'accès direct en lecture aux octets bruts des ressources multi-origines était réussi.

Tout a changé avec Spectre, qui toutes les données chargées dans le même groupe de contexte de navigation que votre code potentiellement lisibles. En mesurant le temps nécessaire à certaines opérations, les attaquants de deviner le contenu des caches CPU qui permet de déterminer le contenu processus" mémoire. De telles attaques temporelles sont possibles avec des minuteurs à faible précision disponibles sur la plate-forme, mais qui peuvent être accélérées grâce à des minuteurs très précis, à la fois explicites (comme performance.now()) et implicites (comme SharedArrayBuffer). Si evil.com intègre une image multi-origine, il peut utiliser un Spectre pour lire ses données de pixels. Les protections s'appuient donc sur "opacité" inefficaces.

Spectr

Idéalement, toutes les requêtes multi-origines doivent être explicitement approuvées par le serveur qui possède la ressource. Si l'évaluation n'est pas assurée par propriétaire des ressources, alors les données n'arriveront jamais dans la d'un acteur malintentionné, et donc hors de portée de tout Spectre attaques qu'une page Web pourrait mener. C'est ce que nous appelons un état isolé multi-origine. C'est exactement le sujet de COOP+COEP.

Dans un état isolé multi-origine, le site à l'origine de la demande est considéré comme étant moins dangereux, ce qui débloque des fonctionnalités puissantes comme SharedArrayBuffer, performance.measureUserAgentSpecificMemory() et haute résolution des minuteurs avec une meilleure précision, ou pour des attaques de type Spectre. Elle empêche également de modifier document.domain

Règlement de l'intégrateur multi-origine

Intégration multi-origine (COEP, Policy Controller) empêche de charger des ressources multi-origines qui n'accordent pas explicitement l'autorisation du document (à l'aide de CORP ou CORS). Cette fonctionnalité vous permet de déclarer qu'un document ne peut pas charger de telles ressources.

Fonctionnement du COEP

Pour activer cette règle, ajoutez l'en-tête HTTP suivant au document:

Cross-Origin-Embedder-Policy: require-corp

Le mot clé require-corp est la seule valeur acceptée pour COEP. Cela applique la règle indiquant que le document ne peut charger que des ressources de même origine ; ou ressources explicitement marquées comme pouvant être chargées à partir d'une autre origine.

Pour que les ressources puissent être chargées à partir d'une autre origine, elles doivent être compatibles avec CORS (Cross-Origin Resource Sharing) ou CORP (Cross-Origin Resource Policy)

Partage des ressources entre origines multiples

Si une ressource multi-origine est compatible avec le partage des ressources entre origines multiples, (CORS), vous pouvez utiliser crossorigin attribut pour le charger sur votre page Web sans être bloqué par COEP.

<img src="https://third-party.example.com/image.jpg" crossorigin>

Par exemple, si cette ressource d'image est diffusée avec des en-têtes CORS, utilisez crossorigin afin que la requête d'extraction de la ressource utilise CORS mode. De plus, empêche le chargement de l'image, sauf s'il définit des en-têtes CORS.

De même, vous pouvez récupérer des données multi-origines via la méthode fetch(), qui ne nécessite pas de manipulation particulière tant que le serveur répond avec la bonne réponse. HTTP en-têtes.

Règle de ressource multi-origine

Règle de ressources multi-origines (CORP) a été introduit pour empêcher l'accès à vos ressources chargées par une autre origine. Dans le contexte de COEP, CORP peut spécifier la ressource la règle du propriétaire pour savoir qui peut charger une ressource.

L'en-tête Cross-Origin-Resource-Policy peut avoir trois valeurs:

Cross-Origin-Resource-Policy: same-site

Les ressources marquées comme same-site ne peuvent être chargées qu'à partir du même site.

Cross-Origin-Resource-Policy: same-origin

Les ressources marquées comme same-origin ne peuvent être chargées qu'à partir de la même origine.

Cross-Origin-Resource-Policy: cross-origin

Les ressources portant la mention cross-origin peuvent être chargées par n'importe quel site Web. (Ce CORP et COEP.)

Règle d'ouverture multi-origine

Règle d'ouverture multi-origine (COOP) vous permet de vérifier qu'une fenêtre racine est isolée des autres documents en les plaçant dans une un groupe de contexte de navigation différent, de sorte qu'ils ne puissent pas interagir directement avec fenêtre racine. Par exemple, si un document avec COOP ouvre un pop-up, son La propriété window.opener sera null. De plus, la propriété .closed de la référence d'opener à celui-ci renverra true.

COOP

L'en-tête Cross-Origin-Opener-Policy peut avoir trois valeurs:

Cross-Origin-Opener-Policy: same-origin

Les documents marqués same-origin peuvent partager le même contexte de navigation groupe contenant des documents d'origine identique qui sont également explicitement marqués same-origin.

COOP

Cross-Origin-Opener-Policy: same-origin-allow-popups

Un document de premier niveau avec same-origin-allow-popups conserve les références aux de ses fenêtres pop-up qui ne définissent pas de mode COOP ou qui désactivent l'isolation en en définissant un COOP de unsafe-none.

COOP

Cross-Origin-Opener-Policy: unsafe-none

unsafe-none est le paramètre par défaut et permet d'ajouter le document au fichier d'ouverture de son le groupe de contexte de navigation, sauf si l'ouverture elle-même a un COOP de same-origin.

Résumé

Pour bénéficier d'un accès garanti à des fonctionnalités performantes comme SharedArrayBuffer, performance.measureUserAgentSpecificMemory() ou haute résolution des minuteurs avec une meilleure précision, n'oubliez pas que votre document doit utiliser à la fois COEP avec la valeur require-corp et COOP avec la valeur de same-origin. En l'absence de l'un ou de l'autre, le navigateur ne garantissent pas une isolation suffisante pour activer ces fonctionnalités puissantes en toute sécurité. Toi peut déterminer la situation de votre page en vérifiant self.crossOriginIsolated renvoie true.

Découvrez la procédure à suivre dans la section Rendre votre site Web multi-origine isolés" avec COOP et COEP.

Ressources