# X-Frame-Options (/fr/docs/web-security/security-headers/x-frame-options)



Le header `X-Frame-Options` indique au navigateur si une page peut être chargée à
l'intérieur d'une frame. C'est la première défense qui ait existé contre le
clickjacking. Il accepte deux valeurs, `DENY` ou `SAMEORIGIN`. La directive
[`frame-ancestors`](/fr/docs/web-security/policies/content-security-policy/directives/frame-ancestors)
de la politique de sécurité du contenu (CSP) fait le même travail avec plus de
finesse et le remplace.

<Callout type="warn" title="ALLOW-FROM est obsolète">
  L'ancienne valeur `ALLOW-FROM uri` est obsolète et n'est plus prise en compte par les navigateurs modernes. Pour autoriser des origines précises à encadrer votre page, utilisez plutôt la directive CSP `frame-ancestors`, qui accepte une liste de sources.
</Callout>

Le réglage sûr par défaut, qui bloque tout encadrement :

```http
X-Frame-Options: DENY
```

## Aperçu rapide [#aperçu-rapide]

`SAMEORIGIN` n'autorise que les pages de votre propre origine à vous encadrer ;
`DENY` bloque tout encadrement.

```http
X-Frame-Options: SAMEORIGIN
```

Pour les nouvelles politiques, préférez
[`frame-ancestors`](/fr/docs/web-security/policies/content-security-policy/directives/frame-ancestors),
qui exprime la même intention et va plus loin.

```http
Content-Security-Policy: frame-ancestors 'self'
```

## Valeurs [#valeurs]

| Valeur           | Statut      | Ce que ça fait                                                                 |
| ---------------- | ----------- | ------------------------------------------------------------------------------ |
| `DENY`           | ✅ Bon       | Aucun site ne peut encadrer la page, y compris sa propre origine.              |
| `SAMEORIGIN`     | ✅ Bon       | Seules les pages de la même origine peuvent encadrer la page.                  |
| `ALLOW-FROM uri` | ⚠️ Déprécié | Obsolète et ignorée par les navigateurs modernes ; utilisez `frame-ancestors`. |

Le header prend une seule valeur, pas une liste. Cette limite à une seule origine
est la raison de l'échec d'`ALLOW-FROM` : il n'y avait aucun moyen d'autoriser
plus d'une origine parente. `frame-ancestors` accepte une liste de sources
complète, donc il couvre tous les cas que le header laisse de côté.

## Valeurs non sûres à éviter [#valeurs-non-sûres-à-éviter]

La valeur à éviter est `ALLOW-FROM`, parce que les navigateurs l'ignorent : une
page qui s'y fie n'est en réalité pas protégée. L'autre faille, c'est de
n'envoyer aucun contrôle d'encadrement du tout. Cela laisse la page
intégrable par n'importe quel site et exposée au clickjacking. Définissez `DENY`
ou `SAMEORIGIN`, ou mieux, `frame-ancestors`.

## Pourquoi ce header existe [#pourquoi-ce-header-existe]

`X-Frame-Options` est antérieur à la CSP et a été le premier mécanisme du
navigateur pour stopper le clickjacking, où un attaquant encadre votre page de
façon invisible et pousse un utilisateur à cliquer dessus. Il fonctionne, mais il
est grossier : une valeur, une origine, pas de liste de sources. La CSP a ensuite
intégré la même protection dans la directive `frame-ancestors` avec une vraie
liste de sources, ce qui explique que le header soit désormais considéré comme
historique.

## Contre quoi cela protège [#contre-quoi-cela-protège]

Le clickjacking, aussi appelé UI redressing. Un attaquant charge votre page dans
une frame transparente ou déguisée par-dessus son propre contenu, et transforme des
clics destinés à sa page en actions sur la vôtre. Restreindre qui peut
encadrer la page supprime la superposition.

## Relation avec frame-ancestors [#relation-avec-frame-ancestors]

[`frame-ancestors`](/fr/docs/web-security/policies/content-security-policy/directives/frame-ancestors)
remplace `X-Frame-Options`. Lorsque les deux sont présents et que le navigateur
prend en charge le `frame-ancestors` de la CSP, la directive prime et le header
est ignoré. Les valeurs se correspondent une à une :

| X-Frame-Options                | Équivalent frame-ancestors          |
| ------------------------------ | ----------------------------------- |
| `DENY`                         | `frame-ancestors 'none'`            |
| `SAMEORIGIN`                   | `frame-ancestors 'self'`            |
| `ALLOW-FROM https://a.example` | `frame-ancestors https://a.example` |

Envoyer les deux reste raisonnable : `frame-ancestors` s'applique aux navigateurs
modernes, et `X-Frame-Options` couvre tout vieux client qui n'applique pas la
directive.

```http
X-Frame-Options: SAMEORIGIN
```

```http
Content-Security-Policy: frame-ancestors 'self'
```

## Contournements et limitations connus [#contournements-et-limitations-connus]

`X-Frame-Options` ne contrôle que l'encadrement de premier niveau de la réponse
sur laquelle il est envoyé ; il ne peut pas exprimer une liste de parents
autorisés (`ALLOW-FROM` est mort), et il ne signale rien. `frame-ancestors` n'a
aucune de ces deux limites. Attention toutefois : contrairement à la plupart des
directives CSP, `frame-ancestors` ne peut pas être défini via une balise
`<meta>`, donc le contrôle d'encadrement passe toujours par un header de réponse
HTTP.

## Risques d'une mauvaise configuration [#risques-dune-mauvaise-configuration]

Compter sur `ALLOW-FROM` laisse la page sans protection parce que les navigateurs
n'en tiennent pas compte. Omettre à la fois le header et `frame-ancestors` laisse la page
encadrable par n'importe qui. Choisissez `DENY` quand la page ne doit jamais être
intégrée, `SAMEORIGIN` (ou `frame-ancestors 'self'`) quand seule votre propre
application l'intègre.

## Recommandation [#recommandation]

Envoyez `X-Frame-Options: DENY` en plus d'une directive `frame-ancestors`, sauf si
la page a réellement besoin d'être intégrée.

```http
X-Frame-Options: DENY
```

```http
Content-Security-Policy: frame-ancestors 'none'
```

C'est la recommandation de la
[cheat sheet HTTP Headers de l'OWASP](https://cheatsheetseries.owasp.org/cheatsheets/HTTP_Headers_Cheat_Sheet.html) :
`frame-ancestors` prime dans les navigateurs qui le prennent en charge, et le
header couvre tout vieux client qui ne le fait pas.

## Comment le mettre en place [#comment-le-mettre-en-place]

1. Ajoutez `frame-ancestors` à votre CSP avec les parents que vous autorisez
   (`'none'`, `'self'` ou des origines précises).
2. Au besoin, envoyez aussi `X-Frame-Options`, pour les navigateurs
   antérieurs au `frame-ancestors` de la CSP.

```http
Content-Security-Policy: frame-ancestors 'self'
```

```http
X-Frame-Options: SAMEORIGIN
```

3. Vérifiez les deux headers sur votre site avec le
   [scanner de headers de sécurité](/tools/security-headers).

## Prise en charge par les navigateurs [#prise-en-charge-par-les-navigateurs]

Largement pris en charge. `DENY` et `SAMEORIGIN` fonctionnent dans les navigateurs
modernes ; `ALLOW-FROM` est obsolète et ignoré. Le `frame-ancestors` de la CSP est
lui aussi largement pris en charge et constitue le contrôle à privilégier.

## Voir aussi [#voir-aussi]

* [Directive frame-ancestors](/fr/docs/web-security/policies/content-security-policy/directives/frame-ancestors)
* [Content-Security-Policy](/fr/docs/web-security/policies/content-security-policy)
* [Vue d'ensemble des headers de sécurité](/fr/docs/web-security/security-headers)
* [X-Frame-Options vs frame-ancestors, lequel utiliser](/fr/blog/x-frame-options-vs-frame-ancestors)
* [Headers de sécurité historiques à retirer](/fr/blog/legacy-security-headers-to-retire)
* [frame-ancestors sans header CSP](/fr/blog/frame-ancestors-without-csp-header)

## Sources [#sources]

* [MDN, X-Frame-Options](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/X-Frame-Options)
* [W3C, Content Security Policy Level 3](https://www.w3.org/TR/CSP3/)
* [RFC 7034, HTTP Header Field X-Frame-Options](https://www.rfc-editor.org/rfc/rfc7034)
* [OWASP, HTTP Headers cheat sheet](https://cheatsheetseries.owasp.org/cheatsheets/HTTP_Headers_Cheat_Sheet.html)