Tous les guides
Sévérité MoyenneEn-têtes de sécurité

Clickjacking et X-Frame-Options : gardez vos pages hors des iframes

Le clickjacking piège les utilisateurs pour qu’ils cliquent sur des contrôles cachés de votre page, en la chargeant dans une iframe transparente sur un site contrôlé par l’attaquant. X-Frame-Options — ou la directive moderne frame-ancestors de la CSP — indique aux navigateurs de refuser d’intégrer votre page, fermant l’attaque entièrement.

Ce que c’est

Une attaque de clickjacking consiste à intégrer votre site dans une iframe invisible ou translucide sur la page de l’attaquant. La victime voit un contenu leurre et clique sur ce qui semble être un bouton anodin ; l’iframe cachée capture le vrai clic sur votre page — un virement bancaire, un changement de paramètres, une autorisation OAuth — sans que l’utilisateur s’en rende compte.

X-Frame-Options est un en-tête de réponse HTTP avec deux valeurs utiles : DENY (refuse l’intégration par quiconque) et SAMEORIGIN (n’autorise l’intégration que par des pages de votre propre origine). La directive frame-ancestors de la CSP fait le même travail avec un contrôle plus fin — vous pouvez lister des origines de confiance précises — et elle remplace X-Frame-Options dans les navigateurs compatibles CSP.

Pourquoi ça compte

Toute page comportant une action importante — paramètres de compte, confirmation de paiement, préférences d’e-mail ou un interrupteur d’administration — est une cible de clickjacking. Un utilisateur connecté qui arrive sur une page malveillante peut être amené à effectuer de vraies actions qu’il n’a jamais voulues, sans aucun signe visible que quelque chose cloche.

X-Frame-Options ne coûte rien à ajouter et est pris en charge par tous les navigateurs modernes. L’omettre sur des pages qui exécutent des actions sensibles est simplement une erreur de configuration, pas une fonctionnalité manquante.

Comment corriger

Ajoutez X-Frame-Options globalement dans Next.js

Définissez l’en-tête dans next.config.js pour qu’il s’applique à toutes les routes. DENY est la valeur par défaut sûre pour les apps qui n’ont pas besoin d’être intégrées.

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: "/:path*",
        headers: [{ key: "X-Frame-Options", value: "DENY" }],
      },
    ];
  },
};
Ajoutez frame-ancestors à votre CSP

La directive frame-ancestors de la CSP remplace X-Frame-Options dans les navigateurs modernes et vous donne un contrôle par origine. Ajoutez-la à l’en-tête Content-Security-Policy que vous définissez déjà.

// extend your existing CSP string
const csp = [
  // ... your other directives ...
  "frame-ancestors 'none'",
].join("; ");
Utilisez SAMEORIGIN si vous intégrez au sein de votre propre domaine

Si vous intégrez légitimement des pages dans votre propre site — une iframe de prévisualisation ou un widget intégré sur la même origine — utilisez X-Frame-Options: SAMEORIGIN au lieu de DENY, ou frame-ancestors 'self'.

Configurez nginx

Si vous servez vos réponses via un proxy nginx, ajoutez l’en-tête dans votre bloc server.

add_header X-Frame-Options "DENY" always;

FAQ

X-Frame-Options ou frame-ancestors de la CSP — lequel utiliser ?

Utilisez les deux. X-Frame-Options couvre les navigateurs plus anciens ; frame-ancestors dans la CSP vous donne une granularité par origine et constitue le standard moderne. Ils coexistent sans problème — les navigateurs compatibles CSP utilisent frame-ancestors et ignorent X-Frame-Options.

DENY casse-t-il l’intégration de mes propres widgets ou tableaux de bord d’analytics ?

Oui — DENY bloque toute intégration, y compris votre propre origine. Si vous devez intégrer une page précise dans une iframe sur votre propre domaine, utilisez SAMEORIGIN ou frame-ancestors 'self'. Ne l’assouplissez que pour les pages qui ont réellement besoin d’être intégrées.

Quelle sévérité AppSafe attribue-t-il à une absence de X-Frame-Options ?

Moyenne. Ce n’est pas en soi un vecteur immédiat de vol de données, mais toute page qui exécute des actions de compte présente un vrai risque de clickjacking sans lui.

Votre app est-elle concernée ?

AppSafe détecte ce problème et des dizaines d’autres en un seul scan gratuit.

Scanner mon app gratuitement

Guides liés

Content-Security-Policy (CSP) : ce que c’est et comment en ajouter une

L’en-tête qui empêche les scripts injectés de s’exécuter.

Les attributs de cookies Secure, HttpOnly et SameSite

Trois attributs qui empêchent le vol des cookies de session.

CORS mal configuré : les pièges du joker et du reflet

Autorisez toutes les origines et n’importe quel site peut lire votre API.