X-Frame-Options

L'en-tête de réponse HTTP X-Frame-Options peut être utilisé afin d'indiquer si un navigateur devrait être autorisé à afficher une page au sein d'un élément <frame>, <iframe>, <embed> ou <object>. Les sites peuvent utiliser cet en-tête afin d'éviter les attaques de clickjacking pour s'assurer que leur contenu ne soit pas embarqués dans d'autres sites.

Ce complément de sécurité est uniquement valable lorsque l'utilisateur final visite le document avec un navigateur prenant en charge X-Frame-Options.

Note : L'en-tête Content-Security-Policy possède une directive frame-ancestors qui supplante cet en-tête pour les navigateurs compatibles.

Type d'en-tête En-tête de réponse
Nom d'en-tête interdit Non

Syntaxe

Il existe deux directives pour X-Frame-Options :

X-Frame-Options: deny
X-Frame-Options: sameorigin

Directives

Si on utilise deny, le chargement de la page dans une frame échouera sur un site tiers mais aussi sur un site de la même origine. En revanche, si on utilise sameorigin, on peut toujours utiliser le document dans une frame si celle-ci partage la même origine.

deny
La page ne peut pas être affichée dans une frame, quand bien même un site tiers tenterait de la charger.
sameorigin
La page ne peut être affichée que dans une frame avec une origine qui est la même que la page elle-même. La spécification laisse le choix au navigateur de décider si cela s'applique au niveau le plus haut, au conteneur parent ou à l'ensemble de la chaîne des frames potentiellement imbriquées. Il est parfois avancé que cette option n'est pas très utile à moins que l'ensemble des ancêtres partage la même origine (cf. bug 725490). Voir aussi le tableau de compatibilité ci-après pour plus de détails sur la prise en charge de cette directive.
allow-from uri (obsolète)
Une directive obsolète qui ne fonctionne plus dans les navigateurs récents et qui ne doit donc plus être utilisée. Pour les navigateurs historiques, cette directive permettait d'indiquer une origine via une URI afin d'autoriser l'affichage du document dans les frames chargées depuis cette origine. Pour les anciennes versions de Firefox, on a le même problème qu'avec sameorigin : il n'y a pas de vérifications des différents ancêtres pour voir s'ils partagent la même origine. À la place, on utilisera la directive frame-ancestors de l'en-tête Content-Security-Policy.

Exemples

Note : La balise <meta> est inutile ici ! <meta http-equiv="X-Frame-Options" content="deny"> n'aura aucun effet et mieux vaut donc ne pas l'utiliser.

Configurer Apache

On peut configurer Apache afin d'envoyer l'en-tête X-Frame-Options pour toutes les pages. Dans la configuration, on ajoutera :

Header always set X-Frame-Options "sameorigin"

Si on veut utiliser la valeur deny, on pourra utiliser ceci dans la configuration :

Header set X-Frame-Options "deny"

Configurer NGINX

Avec NGINX, on pourra ajouter la ligne suivante à la configuration HTTP, serveur ou à la configuration de l'emplacement (location) :

add_header X-Frame-Options sameorigin always;

Configurer IIS

Pour IIS, on complètera le fichier Web.config :

<system.webServer>
  ...

  <httpProtocol>
    <customHeaders>
      <add name="X-Frame-Options" value="sameorigin" />
    </customHeaders>
  </httpProtocol>

  ...
</system.webServer>

Configurer HAProxy

Pour HAProxy, on ajoutera la ligne suivante à la configuration du front, du listen ou du backend :

rspadd X-Frame-Options:\ sameorigin

Dans les versions plus récentes, voici la forme équivalente :

http-response set-header X-Frame-Options sameorigin

Configurer Express / Utiliser frameguard en Node.js

Si on utilise Express, on pourra utiliser le module helmet qui tire parti de frameguard afin de régler cet en-tête :

const helmet = require('helmet');
const app = express();
app.use(helmet.frameguard({ action: "sameorigin" }));

On pourra également utiliser frameguard directement :

const frameguard = require('frameguard')
app.use(frameguard({ action: 'sameorigin' }))

Spécifications

Spécification Titre
RFC 7034 HTTP Header Field X-Frame-Options

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
X-Frame-OptionsChrome Support complet 4Edge Support complet 12Firefox Support complet 3.6.9IE Support complet 8Opera Support complet 10.5Safari Support complet 4WebView Android Support complet OuiChrome Android Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
ALLOW-FROMChrome Aucun support NonEdge Aucun support 12 — 79Firefox Aucun support 18 — 70IE Support complet 8Opera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Support complet 18Opera Android ? Safari iOS Aucun support NonSamsung Internet Android Aucun support Non
SAMEORIGINChrome Support complet Oui
Notes
Support complet Oui
Notes
Notes Starting in Chrome 61, this applies to all of a frame's ancestors.
Edge Support complet 12Firefox Support complet Oui
Notes
Support complet Oui
Notes
Notes Starting in Firefox 59, this applies to all of a frame's ancestors.
IE Support complet 8Opera Support complet Oui
Notes
Support complet Oui
Notes
Notes Starting in Opera 48, this applies to all of a frame's ancestors.
Safari Support complet OuiWebView Android Support complet Oui
Notes
Support complet Oui
Notes
Notes Starting in Chrome 61, this applies to all of a frame's ancestors.
Chrome Android Support complet Oui
Notes
Support complet Oui
Notes
Notes Starting in Chrome 61, this applies to all of a frame's ancestors.
Firefox Android Support complet Oui
Notes
Support complet Oui
Notes
Notes Starting in Firefox 59, this applies to all of a frame's ancestors.
Opera Android Support complet Oui
Notes
Support complet Oui
Notes
Notes Starting in Opera 48, this applies to all of a frame's ancestors.
Safari iOS ? Samsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.

Voir aussi