La directive frame-ancestors, contrôler qui peut intégrer votre page

La directive CSP frame-ancestors contrôle quelles origines peuvent intégrer votre page dans une frame, le contrôle anti-clickjacking moderne.

La directive frame-ancestors contrôle quelles origines sont autorisées à intégrer la page courante dans un élément <frame>, <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, 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 :

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

Chaîne de repli

frame-ancestors n'a pas de repli. default-src ne la couvre pas, donc une page sans frame-ancestors peut être mise en frame par n'importe qui.

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 ou source de schéma 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

frame-ancestors est le successeur du header historique 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 et dans les headers de sécurité historiques à retirer.

Exemples

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

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

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

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

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 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

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 pour confirmer que la valeur est bien celle que vous visez.

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.

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

X-Frame-Options: DENY

La cheat sheet HTTP Headers de l'OWASP 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

Quand la directive bloque une tentative de mise en frame, le navigateur émet un report csp-violation nommant frame-ancestors comme directive effective. Configurez la livraison avec la directive report-to et le header Reporting-Endpoints.

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

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.

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' ?

'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.

frame-ancestors