En-tête de sécurité X-Frame-Options et outils de test responsive

Vous essayez de tester le responsive d'un site Web via des outils en ligne et celui-ci ne s'affiche pas ? C'est sûrement dû à l'en-tête de sécurité X-Frame-Options implémenté sur le site.

En effet, ce n'est pas l'outil en question qui ne fonctionne pas. C'est juste que la plupart de ces outils tels que XRespond, Screenfly ou autres chargent le site Web dans un iframe pour tester sa réactivité.

Ainsi, si l'en-tête de sécurité X-Frame-Options a pour paramètre DENY ou SAMEORIGIN, le navigateur refusera d'intégrer la page Web dans un iframe.

Dans cet article, je vous explique donc dans les grandes lignes :

• Ce qu'est un iframe et le clickjacking
• À quoi sert l'en-tête de sécurité X-Frame-Options
• Comment faire en sorte que le site s'affiche dans un iframe lorsqu'il est protégé par cet en-tête

Qu'est-ce qu'un iframe et en quoi peut-il être dangereux

En bref, un iframe est une balise servant à afficher le contenu d'une autre page Web sur une page Web. Il est souvent utilisé pour intégrer des vidéos, des cartes et d'autres médias. Le problème est que certaines personnes l'emploient à des fins malveillantes.

En effet, un hacker peut se servir d'un iframe pour embarquer une page web et en modifier le comportement. C'est ce que l'on appelle communément une attaque par détournement de clic ou clickjacking.

Techniquement, l'attaquant crée un site Web d'apparence légitime et y intègre un site Web malveillant via un iframe. L'iframe est invisible et sert à superposer du contenu caché au-dessus des éléments cliquables du site Web légitime. Le visiteur croit alors cliquer sur un contenu sur la page visible. Mais en fait, il clique sur un élément invisible de la page superposée.

Cela peut amener les utilisateurs à :

• Télécharger involontairement des logiciels malveillants
• Fournir des informations d'identification ou des informations sensibles
• Visiter des pages Web malveillantes
• Transférer de l'argent
• Acheter des produits en ligne

Comme vous pouvez le constater, autoriser les iframes sur votre site peut être dangereux. Pour contrer cela, il existe une solution : implémenter l'en-tête de sécurité X-Frame-Options.

À quoi sert l'en-tête de sécurité X-Frame-Options

L'en-tête de sécurité X-Frame-Options aussi appelé en-tête de réponse HTTP est une fonctionnalité de sécurité assez ancienne. Son but est d'aider à lutter contre les attaques par détournement de clic. Globalement, il indique à un navigateur s'il est autorisé ou non à afficher une page dans un iframe.

Il existe trois paramètres possibles pour l'en-tête X-Frame-Options :

• DENY qui interdit le chargement d'une page dans un iframe, quel que soit le site
• SAMEORIGIN qui permet de charger la page dans un iframe uniquement si elle est affichée sur une page du même domaine
• ALLOW-FROM qui permet à la page d'être chargée uniquement dans un iframe du domaine d'origine et/ou un domaine spécifié

Sur mes sites metaforweb.com et metaforweb.fr, cet en-tête de sécurité est présent dans le fichier .htaccess et défini sur SAMEORIGIN :

<IfModule mod_headers.c>
Header set X-Frame-Options "SAMEORIGIN"
</IfModule>

On peut constater dans les ChromeDevtools que le navigateur le voit :

Voilà ce qu'il se passe lorsque je veux tester le responsive de mon site metaforweb.fr avec XRespond :

• 1. XRespond essaie de charger le site dans un iframe.
• 2. Le navigateur ausculte le site et voit qu'il existe des directives d'en-tête de sécurité.
• 3. X-Frame-Options lui signale que le site n'est autorisé à être chargé dans un iframe que sur le domaine metaforweb.fr (SAMEORIGIN).
• 4. Le navigateur obéit à la règle et n'affiche pas le site dans l'iframe. Au survol de la souris, on peut voir "metaforweb.fr n'autorise pas la connexion".

Vous l'avez compris, X-Frame-Options protège mes sites, mais il m'est impossible d'utiliser les outils en ligne de test responsive ou autres. Alors, pour contourner ce problème, j'utilise une technique pour désactiver l'en-tête X-Frame-Options temporairement...

Résoudre le problème d'affichage d'un site dans un iframe en désactivant l'en-tête de sécurité X-Frame-Options

Afin de pouvoir afficher un site dans un iframe lorsqu'un en-tête de sécurité X-Frame-Options est en place, c'est simple.

Installez l'extension de navigateur Chrome Ignore X-Frame headers.

Il s'agit d'une extension qui supprime les en-têtes de réponse HTTP X-Frame-Options et Content-Security-Policy. Elle permet donc d'afficher n'importe quelle page d'un site dans un iframe.

Activez l'extension en cliquant sur "Tous les sites". Cela supprimera l'en-tête X-frame-options pour tous les onglets ouverts.

Vous pourrez donc dorénavant tester le responsive d'un site ou générer un mockup multi-appareils (multi device website generator) sans problème.

Pour exemple, voici le résultat pour le test responsive de metaforweb.fr avec XRespond lorsque l'extension est active :

Réflexion finale sur l'en-tête de sécurité X-Frame-Options

Dans cet article, je vous ai expliqué ce qu'est un iframe, à quoi il sert et aussi la vulnérabilité qu'il peut occasionner à un site.

Je vous ai également parlé de l'en-tête de sécurité X-Frame-Options et de la façon de le désactiver pour pouvoir utiliser certains outils en ligne.

Désormais, avec cette astuce, vous n'aurez plus aucun problème pour générer des mockups de site Web multi-appareils ou encore tester le responsive d'un site Web. 😉