# 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, la défense d'origine contre le clickjacking. Il prend
l'une de 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
contrôle 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 honorée par les navigateurs modernes. Pour autoriser des origines précises à encadrer votre page, utilisez plutôt la directive CSP `frame-ancestors`, qui prend une liste de sources.
</Callout>

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

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

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

`SAMEORIGIN` ne laisse 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 davantage.

```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 chaque cas que le header ne peut pas couvrir.

## 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 compte dessus pour sa protection n'est en réalité pas protégée. N'envoyer
aucun contrôle d'encadrement du tout est l'autre faille. 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 capture des
clics destinés à sa page comme des 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 directement :

| 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` gouverne les navigateurs
modernes, et `X-Frame-Options` couvre tout vieux client qui n'honore 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. Notez que `frame-ancestors`, contrairement à la
plupart des directives CSP, ne peut pas être défini via une balise `<meta>`, donc
le contrôle d'encadrement est toujours 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
l'écartent. 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` à côté 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. Envoyez éventuellement `X-Frame-Options` en plus, 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)