Le règlement d'origine identique est une fonctionnalité de sécurité du navigateur qui limite la façon 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. Si aucune restriction n'est appliquée aux interactions entre ces ressources et qu'un script est compromis par un pirate informatique, il peut exposer tout ce qui se trouve dans le navigateur d'un utilisateur.
La règle d'origine commune empêche cela en bloquant l'accès en lecture aux ressources chargées à partir d'une autre origine. "Mais attendez," vous dites, "je charge des images et des scripts à partir d'autres origines tout le temps." Les navigateurs autorisent quelques balises à intégrer des ressources d'une autre origine. Cette règle est principalement un artefact historique et peut exposer votre site à des failles telles que le détournement de clic à l'aide d'iFrames. Vous pouvez limiter la lecture inter-origine de ces balises à l'aide d'une stratégie de sécurité du contenu.
Qu'est-ce qu'un élément de 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 les trois valeurs sont identiques pour deux URL, elles sont considérées comme de même origine. Par exemple, http://www.example.com/foo a 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 ce qui est bloqué ?
En général, l'intégration d'une ressource inter-origine est autorisée, tandis que la lecture d'une ressource inter-origine est bloquée.
| iFrames |
L'intégration inter-origine est généralement autorisée (selon la directive X-Frame-Options), mais la lecture inter-origine (par exemple, l'utilisation de JavaScript pour accéder à un document dans un iframe) ne l'est pas.
|
| CSS |
Le CSS inter-origine 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 inter-origines 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 multi-origine.
|
| images | L'intégration d'images multi-origines est autorisée. Toutefois, la lecture de données d'image intersites (telle que la récupération de données binaires à partir d'une image intersites à l'aide de JavaScript) est bloquée. |
| multimédia |
Vous pouvez intégrer des éléments vidéo et audio cross-origin à l'aide des éléments <video> et <audio>.
|
| écriture | Les scripts multi-origines peuvent être intégrés. Toutefois, l'accès à certaines API (telles que les requêtes de récupération multi-origines) peut être bloqué. |
À FAIRE: DevSite - Évaluation "Penser et vérifier"
Comment éviter le hameçonnage par clic
Une attaque appelée "détournement de clic" consiste à intégrer un site dans une iframe et à superposer des boutons transparents qui redirigent vers une autre destination. Les utilisateurs sont trompés en leur faisant croire qu'ils accèdent à votre application alors qu'ils envoient des données aux pirates informatiques.
Pour empêcher d'autres sites d'intégrer votre site dans un iframe, ajoutez une stratégie de sécurité du contenu avec la directive frame-ancestors aux en-têtes HTTP.
Vous pouvez également ajouter X-Frame-Options aux en-têtes HTTP. Consultez la liste des options sur le site MDN.
Conclusion
J'espère que vous êtes un peu soulagé de savoir que les navigateurs s'efforcent de jouer le rôle de gardiens de la sécurité sur le Web. Même si les navigateurs tentent d'être sécurisés en bloquant l'accès aux ressources, vous souhaitez parfois accéder à des ressources multi-origines dans vos applications. Dans le guide suivant, vous allez découvrir le partage de ressources entre origines (CORS) et apprendre à indiquer au navigateur que le chargement de ressources entre origines est autorisé à partir de sources fiables.