Règle pour la même origine

Mariko Kosaka

La règle d'origine commune est une fonctionnalité de sécurité du navigateur qui limite la façon dont les documents et scripts d'une origine peuvent interagir avec les ressources sur une autre origine.

Un navigateur peut charger et afficher simultanément des ressources de plusieurs sites. Vous avez peut-être plusieurs onglets ouverts en même temps, ou un site peut intégrer plusieurs iFrames différents sites. S'il n'existe aucune restriction concernant les interactions entre ces ressources et qu'un script est compromis par un attaquant, il pourrait exposer tout dans le navigateur d'un utilisateur.

La règle d'origine commune empêche cela en bloquant l'accès en lecture chargées depuis une origine différente. « Mais attendez », vous dites : "Je charge des images et des scripts d'autres origines tout le temps." Les navigateurs autorisent quelques tags pour d'intégrer des ressources d'origine différente. Il s'agit principalement d'une et peut exposer votre site à des failles telles que le détournement de clic via iFrame. Vous pouvez limiter la lecture multi-origines de ces balises à l'aide d'un module Content Security Règlement.

Qu'est-ce qui est considéré comme provenant de la même origine ?

Une origine est définie par le schéma (également appelé protocole), par exemple HTTP ou HTTPS), le port (si spécifié) et l'hôte. Lorsque les trois sont identiques pour deux URL, elles sont considérées comme ayant la 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 qu'est-ce qui est bloqué ?

En règle générale, l'intégration d'une ressource multi-origine est autorisée lors de la lecture d'une la ressource multi-origines est bloquée.

iFrames L'intégration multi-origine est généralement autorisée (selon la directive X-Frame-Options), mais ce n'est pas le cas de la lecture multi-origine (par exemple, l'utilisation de JavaScript pour accéder à un document dans un iFrame).
CSS Le CSS multi-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 correct peut être nécessaire.
formulaires Les URL multi-origines peuvent être utilisées comme valeur de l'attribut action des éléments du 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 des données d'image multi-origines (comme la récupération de données binaires à partir d'une image multi-origine à l'aide de JavaScript) est bloquée.
multimédia Les contenus audio et vidéo d'origine différente peuvent être intégrés à l'aide d'éléments <video> et <audio>.
écriture Les scripts multi-origines peuvent être intégrés. Toutefois, l'accès à certaines API (comme les requêtes de récupération multi-origines) peut être bloqué.

À FAIRE: DevSite – Évaluation "Think and Check"

Comment éviter le détournement de clic ?

détournement de clic
Figure: Mécanisme de détournement de clic illustré en trois couches distinctes (site de base, (site encadré, bouton transparent, etc.).

Une attaque appelée « détournement de clic » intègre un site dans une iframe et la superpose des boutons transparents liés à une destination différente. Les utilisateurs sont trompés à penser qu'ils accèdent à votre application tout en envoyant des données à contre les pirates informatiques.

Pour empêcher d'autres sites d'intégrer votre site dans un iFrame, ajoutez un contenu stratégie de sécurité avec frame-ancestors directive aux en-têtes HTTP.

Vous pouvez également ajouter X-Frame-Options aux en-têtes HTTP, MDN pour afficher la liste des options.

Conclusion

J’espère que vous vous sentez un peu soulagé que les navigateurs travaillent dur pour être gardiens de la sécurité sur le Web. Même si les navigateurs essaient d'être sécurisés en bloquant l'accès aux ressources. Parfois, vous pouvez avoir besoin d'accéder à des ressources multi-origines applications. Dans le prochain guide, découvrez le partage des ressources entre origines multiples (CORS) et comment indiquer au navigateur que le chargement de ressources multi-origines autorisées provenant de sources fiables.