La règle d'origine commune 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 simultanément les ressources de plusieurs sites. Vous pouvez avoir plusieurs onglets ouverts en même temps ou un site peut intégrer plusieurs iFrames de différents sites. S'il n'existe aucune restriction sur les interactions entre ces ressources et qu'un script est compromis par un pirate informatique, il peut tout exposer 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 depuis une origine différente. "Mais attendez" : "je charge tout le temps des images et des scripts d'autres origines". Les navigateurs autorisent quelques tags à intégrer des ressources d'origines différentes. 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 multi-origine de ces balises à l'aide d'une règle Content Security Policy.
Qu'est-ce qui est considéré comme étant 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 URL 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, tandis que la lecture d'une ressource multi-origine est bloquée.
| iFrames |
L'intégration multi-origine est généralement autorisée (selon la directive X-Frame-Options), mais pas la lecture multi-origine (par exemple, l'utilisation de JavaScript pour accéder à un document dans un iFrame).
|
| CSS |
Les CSS multi-origines peuvent être intégrés à l'aide d'un élément <link> ou @import dans un fichier CSS. L'en-tête Content-Type approprié peut être requis.
|
| formulaires |
Les URL multi-origines peuvent être utilisées comme valeur d'attribut action des éléments du formulaire. Une application Web peut écrire des données de formulaire sur une destination multi-origine.
|
| images | L'intégration d'images multi-origines est autorisée. Toutefois, la lecture de données d'image multi-origines (par exemple, 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'origines multiples peuvent être intégrés à l'aide d'éléments <video> et <audio>.
|
| écriture | Des scripts multi-origines peuvent être intégrés. Toutefois, l'accès à certaines API (comme les requêtes d'extraction multi-origine) risque d'être bloqué. |
À FAIRE: Site DevSite – Évaluation Think and Check
Comment éviter le détournement de clic ?
Une attaque appelée "détournement de clic" intègre un site dans un iframe et superpose des boutons transparents qui renvoient vers une destination différente. Les utilisateurs sont amenés à penser qu'ils accèdent à votre application lorsqu'ils envoient des données à des pirates informatiques.
Pour empêcher d'autres sites d'intégrer votre site dans un iFrame, ajoutez une règle de sécurité du contenu avec l'instruction 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
Nous espérons que vous vous sentez soulagé, car les navigateurs font tout leur possible pour assurer la sécurité sur le Web. Même si les navigateurs tentent de se protéger en bloquant l'accès aux ressources, vous souhaiterez parfois accéder à des ressources multi-origines dans vos applications. Dans le guide suivant, vous découvrirez le partage des ressources entre origines multiples (CORS, Cross-Origin Resource Sharing) et comment indiquer au navigateur que le chargement de ressources multi-origines est autorisé à partir de sources fiables.