# frame-ancestors (/fr/docs/web-security/policies/content-security-policy/directives/frame-ancestors)



La directive `frame-ancestors` contrôle quelles origines sont autorisées à
intégrer la page courante dans un élément
[`<frame>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/frame),
[`<iframe>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/iframe),
`<object>` ou `<embed>`. C'est la défense moderne contre le clickjacking, où un
attaquant charge votre page dans une frame cachée sur son propre site et pousse
un utilisateur à cliquer sur quelque chose qu'il ne voit pas.

Notez que cette directive concerne qui peut vous mettre en frame, l'inverse de
[`frame-src`](/fr/docs/web-security/policies/content-security-policy/directives/frame-src),
qui contrôle ce que votre page est autorisée à charger dans ses propres frames.

Empêcher tout site, y compris le vôtre, de mettre la page en frame :

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

## Chaîne de repli [#chaîne-de-repli]

`frame-ancestors` n'a pas de repli.
[`default-src`](/fr/docs/web-security/policies/content-security-policy/directives/default-src)
ne la couvre pas, donc une page sans `frame-ancestors` peut être mise en frame
par n'importe qui.

## Valeurs [#valeurs]

`frame-ancestors` prend une liste de sources d'origines. Les nonces et les hashes
ne s'appliquent pas, ils décrivent du contenu, pas une origine d'intégration.

| Valeur                     | Statut | Description                                                                                                                                                                                                                                                                     |
| -------------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `'none'`                   | ✅ Bon  | Aucune origine ne peut intégrer la page, même origine comprise.                                                                                                                                                                                                                 |
| `'self'`                   | ✅ Bon  | Seule l'origine de la page peut l'intégrer.                                                                                                                                                                                                                                     |
| Source d'hôte ou de schéma | ✅ Bon  | Autorise la [source d'hôte](/fr/docs/web-security/policies/content-security-policy/values/csp-host-source) ou [source de schéma](/fr/docs/web-security/policies/content-security-policy/values/csp-scheme-source) listée à intégrer la page, par exemple un domaine partenaire. |

Vous pouvez lister plusieurs ancêtres. Quand la chaîne d'intégration ne
correspond pas, le navigateur refuse d'afficher la page dans la frame. Évitez un
joker ou un schéma nu comme `https:`, qui laisse n'importe quel site mettre votre
page en frame et rouvre le risque de clickjacking ; ne listez que les origines
précises qui ont une vraie raison de vous intégrer.

### Relation avec X-Frame-Options [#relation-avec-x-frame-options]

`frame-ancestors` est le successeur du header historique
[`X-Frame-Options`](/fr/docs/web-security/security-headers/x-frame-options),
et elle est plus expressive. La correspondance est directe :

| X-Frame-Options             | Équivalent frame-ancestors                |
| --------------------------- | ----------------------------------------- |
| `DENY`                      | `frame-ancestors 'none'`                  |
| `SAMEORIGIN`                | `frame-ancestors 'self'`                  |
| `ALLOW-FROM uri` (obsolète) | `frame-ancestors https://partner.example` |

Là où un navigateur prend en charge les deux, `frame-ancestors` a priorité sur
`X-Frame-Options`. `X-Frame-Options` n'a jamais pu lister plus d'une origine
autorisée et sa forme `ALLOW-FROM` a été abandonnée, donc `frame-ancestors` la
remplace. Vous pouvez toujours envoyer `X-Frame-Options` en parallèle pour les
très vieux clients, mais `frame-ancestors` est le contrôle qui compte
aujourd'hui. Nous expliquons quand retirer le header historique dans
[la protection contre le clickjacking sans header CSP](/fr/blog/frame-ancestors-without-csp-header)
et dans [les headers de sécurité historiques à retirer](/fr/blog/legacy-security-headers-to-retire).

## Exemples [#exemples]

N'autoriser que la mise en frame same-origin :

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

Autoriser un partenaire précis à intégrer la page :

```http
Content-Security-Policy: frame-ancestors 'self' https://partner.example.com
```

## Notes de sécurité [#notes-de-sécurité]

`frame-ancestors` ne fonctionne que comme header de réponse HTTP. Une CSP en
`<meta http-equiv>` ne peut pas la porter, le navigateur l'y ignore. Il en va de
même pour
[`sandbox`](/fr/docs/web-security/policies/content-security-policy/directives/sandbox)
et les directives de reporting. Définissez `frame-ancestors` dans la
configuration de votre serveur ou de votre edge, pas dans le balisage.

La directive bloque le clickjacking. Dans une attaque de clickjacking, le
navigateur de la victime charge votre vraie page, avec sa session, dans une frame
transparente superposée au contenu de l'attaquant, de sorte qu'un clic que
l'utilisateur croit poser sur le bouton de l'attaquant atterrit en réalité sur
votre page (confirmer un virement, changer un paramètre, accorder une
permission). En restreignant qui peut mettre la page en frame, vous empêchez la
page de s'afficher dans le document d'un attaquant, ce qui supprime la surface
d'attaque.

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

`frame-ancestors` ne régit que la mise en frame. Elle ne fait rien contre les
autres comportements de navigation ou de script, c'est donc un contrôle parmi
plusieurs dans une politique complète. Elle suppose aussi que la réponse porte
réellement le header sur chaque document mis en frame, une page servie sans lui
depuis un chemin ou un cache peut toujours être mise en frame, donc appliquez-le
de manière cohérente sur tout le site.

Définir `frame-ancestors 'none'` sur une page censée être intégrée (un widget,
un écran de consentement OAuth, un extrait de documentation) casse cette
intégration. Décidez page par page si elle doit un jour être mise en frame, et
par qui, puis définissez la directive en conséquence. Passez la politique dans
l'[évaluateur CSP](/tools/csp-evaluator) pour confirmer que la valeur est bien
celle que vous visez.

## Recommandation [#recommandation]

Déployez `frame-ancestors 'none'` sur les pages qui ne sont jamais censées être
intégrées, ou `'self'` si vous mettez vos propres pages en frame, conformément à
la [cheat sheet CSP de l'OWASP](https://cheatsheetseries.owasp.org/cheatsheets/Content_Security_Policy_Cheat_Sheet.html).

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

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

La [cheat sheet HTTP Headers de l'OWASP](https://cheatsheetseries.owasp.org/cheatsheets/HTTP_Headers_Cheat_Sheet.html)
recommande d'envoyer `X-Frame-Options: DENY` en parallèle pour les anciens
clients ; `frame-ancestors` a priorité partout où les deux sont pris en charge.

## Reporting [#reporting]

Quand la directive bloque une tentative de mise en frame, le navigateur émet un
[report `csp-violation`](/fr/docs/web-security/reporting-api/reports/csp-violation)
nommant `frame-ancestors` comme directive effective. Configurez la livraison avec
la [directive `report-to`](/fr/docs/web-security/policies/content-security-policy/directives/report-to)
et le [header `Reporting-Endpoints`](/fr/docs/web-security/reporting-api/headers/reporting-endpoints).

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

`frame-ancestors` fait partie de CSP niveau 2 et niveau 3 et est largement prise
en charge par les navigateurs actuels. Là où elle est prise en charge, elle
remplace `X-Frame-Options`.

## FAQ [#faq]

### Faut-il utiliser X-Frame-Options ou frame-ancestors ? [#faut-il-utiliser-x-frame-options-ou-frame-ancestors-]

`frame-ancestors` est le successeur moderne et plus expressif de
`X-Frame-Options`, et il l'emporte partout où les deux sont pris en charge.
Envoyez les deux : `frame-ancestors` comme le contrôle qui compte aujourd'hui, et
`X-Frame-Options: DENY` en parallèle pour les clients très anciens. Voir la
comparaison complète dans
[X-Frame-Options contre frame-ancestors](/fr/blog/x-frame-options-vs-frame-ancestors).

### Puis-je définir frame-ancestors dans une balise meta ? [#puis-je-définir-frame-ancestors-dans-une-balise-meta-]

Non. `frame-ancestors` ne fonctionne que comme header de réponse HTTP. Une CSP en
`<meta http-equiv>` ne peut pas la porter, et le navigateur l'y ignore, tout comme
les directives `sandbox` et de reporting. Définissez-la dans la configuration de
votre serveur ou de votre edge sur chaque document mis en frame, pas dans le
balisage de la page.

### frame-ancestors 'none' ou 'self' ? [#frame-ancestors-none-ou-self-]

`'none'` bloque toute mise en frame, y compris same-origin, utilisez-la donc sur
les pages qui ne sont jamais censées être intégrées. `'self'` n'autorise que
l'origine de la page elle-même à la mettre en frame, utilisez-la quand vous
intégrez vos propres pages. Toute autre origine listée doit avoir une vraie raison
de vous intégrer.

## Voir aussi [#voir-aussi]

* [Header X-Frame-Options](/fr/docs/web-security/security-headers/x-frame-options)
* [frame-src](/fr/docs/web-security/policies/content-security-policy/directives/frame-src)
* [sandbox](/fr/docs/web-security/policies/content-security-policy/directives/sandbox)
* [default-src](/fr/docs/web-security/policies/content-security-policy/directives/default-src)
* [La protection contre le clickjacking sans header CSP](/fr/blog/frame-ancestors-without-csp-header)
* [Les headers de sécurité historiques à retirer](/fr/blog/legacy-security-headers-to-retire)

## Sources [#sources]

* [MDN, CSP frame-ancestors](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/frame-ancestors)
* [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/)
* [OWASP, HTTP Headers cheat sheet](https://cheatsheetseries.owasp.org/cheatsheets/HTTP_Headers_Cheat_Sheet.html)