X-Frame-Options

Utilisation

Les attaques de clickjacking amènent les utilisateurs à cliquer sur des éléments masqués superposés à une page légitime. Un attaquant intègre le site cible dans une iframe transparente, place une interface trompeuse par-dessus et capture les clics destinés au contenu encadré. X-Frame-Options l’empêche en indiquant au navigateur si la réponse est autorisée à apparaître à l’intérieur d’une frame.

Remarque

X-Frame-Options est obsolète au profit de CSP frame-ancestors. Tous les navigateurs modernes prennent en charge frame-ancestors, qui offre un contrôle plus fin, incluant plusieurs origines et la correspondance de schéma. X-Frame-Options reste largement déployé pour assurer la compatibilité avec les navigateurs plus anciens.

L’en-tête accepte deux valeurs actives : DENY et SAMEORIGIN. Une troisième valeur, ALLOW-FROM, était définie dans les implémentations antérieures mais est aujourd’hui obsolète et ignorée par les navigateurs modernes.

DENY

La valeur DENY interdit l’affichage de la page dans toute frame, quel que soit le site demandeur. Aucune mise en frame n’est permise, en aucune circonstance.

SAMEORIGIN

La valeur SAMEORIGIN autorise la mise en frame de la page uniquement par des pages partageant la même origine. Une page sur https://example.re est autorisée à encadrer une autre page de https://example.re, mais une page d’une origine différente est bloquée.

ALLOW-FROM (obsolète)

La valeur ALLOW-FROM uri indiquait autrefois au navigateur de n’autoriser la mise en frame que depuis l’URI spécifiée. Les navigateurs modernes ne prennent plus en charge cette directive. La fonctionnalité équivalente est disponible via la directive CSP frame-ancestors :

Content-Security-Policy: frame-ancestors https://trusted.example.re

Exemple

Bloquer toute mise en frame d’une page, la protection la plus stricte contre le clickjacking :

X-Frame-Options: DENY

Autoriser la mise en frame par la même origine tout en empêchant les sites externes d’intégrer la page :

X-Frame-Options: SAMEORIGIN

Une configuration de défense en profondeur combinant X-Frame-Options et la directive CSP frame-ancestors pour une large couverture des navigateurs :

X-Frame-Options: SAMEORIGIN
Content-Security-Policy: frame-ancestors 'self'

Dépannage

Les problèmes de mise en frame se manifestent par des iframes vides ou des erreurs de console lorsqu’une page refuse de s’afficher à l’intérieur d’un autre document.

Erreur de console « Refused to display in a frame ». Le navigateur bloque la page encadrée et journalise Refused to display ‘https://example.re/’ in a frame because it set ‘X-Frame-Options’ to ‘DENY’ (ou ‘SAMEORIGIN’). Vérifiez les en-têtes de réponse de l’URL encadrée dans l’onglet Network des DevTools. Si la page doit être intégrée, remplacez la valeur de l’en-tête DENY par SAMEORIGIN, ou supprimez complètement l’en-tête et utilisez CSP frame-ancestors pour un contrôle plus fin.

ALLOW-FROM ne fonctionne pas dans les navigateurs modernes. La directive ALLOW-FROM est obsolète. Chrome, Firefox et Safari l’ignorent entièrement et traitent l’en-tête comme si aucune valeur valide n’était définie. Remplacez ALLOW-FROM par la directive CSP frame-ancestors, qui prend en charge plusieurs origines : Content-Security-Policy: frame-ancestors https://trusted.example.re https://other.example.re.

Conflit entre X-Frame-Options et CSP frame-ancestors. Lorsque les deux en-têtes sont présents, les navigateurs qui prennent en charge CSP Level 2 et ultérieur ignorent X-Frame-Options et suivent uniquement frame-ancestors. Les navigateurs plus anciens, dépourvus de prise en charge de CSP, se rabattent sur X-Frame-Options. Vérifiez que la politique visée est cohérente entre les deux en-têtes. Envoyer X-Frame-Options: DENY en même temps que frame-ancestors ‘self’ crée une incohérence où les navigateurs modernes autorisent la mise en frame par la même origine alors que les navigateurs hérités bloquent toute mise en frame.

Intégration légitime bloquée (formulaires de paiement, widgets, applications intégrées). Les services tiers nécessitant une intégration en iframe échouent lorsque la page hôte envoie X-Frame-Options: DENY. Utilisez CSP frame-ancestors pour autoriser explicitement les origines spécifiques qui ont besoin d’un accès en intégration : Content-Security-Policy: frame-ancestors ‘self’ https://payments.provider.example.re.

Migrer de X-Frame-Options vers CSP frame-ancestors. Déployez les deux en-têtes pendant la période de transition. Définissez frame-ancestors conformément à la politique de mise en frame visée. Conservez X-Frame-Options pour les navigateurs sans prise en charge de CSP. Une fois le trafic des navigateurs hérités descendu sous des seuils acceptables, supprimez X-Frame-Options et appuyez-vous uniquement sur frame-ancestors. Testez la migration en intégrant la page dans une iframe depuis une origine autorisée et en vérifiant que la frame se charge dans plusieurs navigateurs.