La règle d'origine identique est une fonctionnalité de sécurité du navigateur qui limite la manière dont les documents et les scripts d'une origine peuvent interagir avec les ressources d'une autre origine.
Un navigateur peut charger et afficher des ressources provenant de plusieurs sites à la fois. Vous pouvez avoir plusieurs onglets ouverts en même temps, ou un site peut intégrer plusieurs iFrames provenant de différents sites. S'il n'y a aucune restriction sur les interactions entre ces ressources et qu'un script est compromis par un pirate informatique, le script pourrait exposer tout ce qui se trouve dans le navigateur d'un utilisateur.
La règle d'origine identique empêche cela en bloquant l'accès en lecture aux ressources chargées depuis une autre origine. "Mais attendez", me direz-vous, "je charge des images et des scripts d'autres origines tout le temps." Les navigateurs autorisent quelques balises à intégrer des ressources provenant d'une autre origine. Cette règle est principalement un artefact historique et peut exposer votre site à des failles telles que le clickjacking à l'aide d'iframes. Vous pouvez limiter la lecture interorigine de ces balises à l'aide d'une Content Security Policy.
Qu'est-ce qui est considéré comme une même origine ?
Une origine est définie par le schéma (également appelé protocole, par exemple HTTP ou HTTPS), le port (s'il est spécifié) et l'hôte. Lorsque ces trois éléments sont identiques pour deux URL, elles sont considérées comme ayant la même origine. Par exemple, http://www.example.com/foo est la même origine que http://www.example.com/bar, mais pas https://www.example.com/bar, car le schéma est différent.
Qu'est-ce qui est autorisé et qu'est-ce qui est bloqué ?
En règle générale, l'intégration d'une ressource interorigine est autorisée, tandis que la lecture d'une ressource interorigine est bloquée.
| iFrames |
L'intégration interorigine est généralement autorisée (en fonction de la directive X-Frame-Options), mais pas la lecture interorigine (par exemple, l'utilisation de JavaScript pour accéder à un document dans un iframe).
|
| CSS |
Le CSS interorigine peut être intégré à l'aide d'un élément <link> ou d'un @import dans un fichier CSS. L'en-tête Content-Type approprié peut être requis.
|
| formulaires |
Les URL interorigines peuvent être utilisées comme valeur de l'attribut action des éléments de formulaire. Une application Web peut écrire des données de formulaire dans une destination interorigine.
|
| images | L'intégration d'images interorigines est autorisée. Toutefois, la lecture de données d'image interorigine (par exemple, la récupération de données binaires à partir d'une image interorigine à l'aide de JavaScript) est bloquée. |
| multimédia |
Les contenus vidéo et audio interorigines peuvent être intégrés à l'aide des éléments <video> et <audio>.
|
| écriture | Les scripts interorigines peuvent être intégrés, mais l'accès à certaines API (comme les requêtes de récupération interorigines) peut être bloqué. |
TODO: DevSite - Think and Check assessment
Comment empêcher le détournement de clic
Une attaque appelée "clickjacking" intègre un site dans un iframe et superpose des boutons transparents qui renvoient vers une autre destination. Les utilisateurs sont amenés à penser qu'ils accèdent à votre application alors qu'ils envoient des données à des pirates informatiques.
Pour empêcher d'autres sites d'intégrer votre site dans un iframe, ajoutez une Content Security Policy avec la directive frame-ancestors aux en-têtes HTTP.
Vous pouvez également ajouter X-Frame-Options aux en-têtes HTTP. Consultez la page MDN pour obtenir la liste des options.
Conclusion
Vous êtes sans doute un peu rassuré de savoir que les navigateurs s'efforcent de protéger la sécurité sur le Web. Même si les navigateurs essaient d'être sécurisés en bloquant l'accès aux ressources, vous souhaitez parfois accéder à des ressources interorigines dans vos applications. Dans le guide suivant, découvrez le partage des ressources interorigines (CORS) et comment indiquer au navigateur que le chargement de ressources interorigines est autorisé à partir de sources fiables.