Sécurité des `iframe` : détournement de clics et `X-Frame-Options`

Le détournement de clics (détournement d’interface) intègre un site cible dans un cadre intégré transparent placé au-dessus d’une page leurre. L’utilisateur pense cliquer sur le leurre, mais clique en réalité sur la page authentifiée et masquée située en dessous — ce qui exécute des actions sur le site cible à son insu.

L’attaquant charge victim.com dans un cadre intégré transparent positionné au-dessus d’un bouton « Cliquez pour gagner ! ». Lorsque l’utilisateur clique, il clique en réalité sur le bouton « Supprimer le compte » de victim.com — en étant authentifié comme lui-même grâce au cookie de session de victim.com. Aucun hameçonnage n’est nécessaire.

X-Frame-Options: DENY empêche le chargement de la page dans n’importe quel cadre intégré. X-Frame-Options: SAMEORIGIN autorise l’intégration uniquement par des pages de la même origine. Définissez cet en-tête côté serveur sur toutes les pages authentifiées afin d’empêcher le détournement de clics.

Content-Security-Policy: frame-ancestors 'none' est le remplacement moderne et plus flexible de X-Frame-Options: DENY. frame-ancestors 'self' remplace SAMEORIGIN. frame-ancestors peut également autoriser des origines de confiance précises : frame-ancestors https://trusted.example.com.

Les anciens mécanismes de sortie de cadre utilisaient JavaScript pour sortir des cadres. Ils sont facilement neutralisés par l’attribut sandbox, qui bloque le script de sortie du cadre. Utilisez toujours des en-têtes côté serveur (X-Frame-Options ou CSP frame-ancestors) — la sortie des cadres par JavaScript n’est pas fiable.

Cas d’utilisation légitimes de l’intégration dans un cadre : intégrer votre propre contenu sur votre propre origine (SAMEORIGIN), ou autoriser un partenaire précis à intégrer votre module (frame-ancestors avec une origine précise). Concevez la politique pour autoriser ces cas tout en refusant tous les autres.

Définissez à la fois X-Frame-Options (pour les anciens navigateurs) et CSP frame-ancestors (pour les navigateurs modernes) afin de maximiser la couverture. Lorsque les deux sont présents, frame-ancestors est prioritaire dans les navigateurs qui prennent en charge CSP. L’envoi des deux garantit une protection contre le détournement de clics avec tous les agents utilisateurs.

Même les cadres intégrés de même origine peuvent présenter des risques : une XSS persistante dans une page intégrée pourrait accéder à la page parente via parent.document si elles sont de même origine. Utilisez sandbox sans allow-same-origin pour les cadres intégrés de même origine qui n’ont pas besoin d’accéder à la page parente, afin de limiter les dommages causés par les vulnérabilités du contenu intégré.

Vérifiez la protection contre le détournement de clics : utilisez l’onglet réseau du navigateur pour contrôler la présence de X-Frame-Options ou de CSP frame-ancestors dans les en-têtes de réponse. Des outils comme securityheaders.com analysent les en-têtes. Créez une page HTML de test contenant un cadre intégré pointant vers votre site et vérifiez que son chargement échoue.

Lorsque vous intégrez du contenu tiers (YouTube, Google Maps), c’est vous qui contrôlez le site intégrateur — assurez-vous que le service intégré autorise l’intégration dans sa propre politique X-Frame-Options. Vous ne pouvez pas intégrer un site qui empêche l’intégration — c’est intentionnel et cela protège les utilisateurs du service intégré.

Contrairement à la plupart des directives CSP, frame-ancestors ne peut pas être défini via une balise meta HTTP-equiv — il doit être transmis comme en-tête de réponse HTTP. Cela garantit que les attaquants ne peuvent pas supprimer la protection en manipulant le HTML intégré avant que le navigateur ne lise les balises meta.

Le détournement de clics intègre des pages authentifiées dans des cadres intégrés transparents afin de détourner les clics. Défense : en-têtes côté serveur X-Frame-Options: DENY ou CSP frame-ancestors: none. Définissez les deux pour assurer la compatibilité entre navigateurs. La sortie des cadres par JavaScript n’est pas fiable — utilisez toujours des en-têtes HTTP. frame-ancestors permet une liste précise d’origines de confiance, contrairement à X-Frame-Options.