Vérificateur d'iframe

Quels critères déterminent l’intégrabilité d’une page ?

Guide rapide : configuration des en‑têtes de réponse

Si vous gérez le site, contrôlez directement l'intégration via les en-têtes de réponse.

Remarque : X-Frame-Options est rendu obsolète par CSP `frame-ancestors`. Lorsque les deux sont définis, c'est CSP qui prime — privilégiez `frame-ancestors`.

Comment le serveur détecte-t-il qu’une requête provient d’une iframe ?

• `Sec-Fetch-Dest: document` : navigation principale (hors de tout cadre).
• `Sec-Fetch-Dest: iframe` : requête chargée à l'intérieur d'un élément `<iframe>`.
• `Sec-Fetch-Dest: frame` : chargement dans un ancien cadre HTML (`<frame>` / frameset).
• `Sec-Fetch-Dest: embed / object` : chargement à l'intérieur d'un élément `<embed>` ou `<object>`.

Exemples de config serveur : bloquer l’intégration d’iframes

Les extraits suivants indiquent comment configurer votre serveur ou framework afin de bloquer intégralement l'intégration dans un iframe (X-Frame-Options: DENY + CSP `frame-ancestors` 'none'). Il s'agit de l'option la plus stricte parmi celles présentées dans le guide rapide ci-dessus.

server {
    location / {
        add_header X-Frame-Options "DENY" always;
        add_header Content-Security-Policy "frame-ancestors 'none'" always;
    }
}

<IfModule mod_headers.c>
    Header always set X-Frame-Options "DENY"
    Header always set Content-Security-Policy "frame-ancestors 'none'"
</IfModule>

app.use((req, res, next) => {
  res.setHeader('X-Frame-Options', 'DENY');
  res.setHeader('Content-Security-Policy', "frame-ancestors 'none'");
  next();
});

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          { key: 'X-Frame-Options', value: 'DENY' },
          { key: 'Content-Security-Policy', value: "frame-ancestors 'none'" },
        ],
      },
    ];
  },
};

class SetFrameOptions
{
    public function handle(Request $request, Closure $next): Response
    {
        $response = $next($request);
        $response->headers->set('X-Frame-Options', 'DENY');
        $response->headers->set('Content-Security-Policy', "frame-ancestors 'none'");

        return $response;
    }
}

export default {
  async fetch(request) {
    const response = await fetch(request);
    const headers = new Headers(response.headers);
    headers.set('X-Frame-Options', 'DENY');
    headers.set('Content-Security-Policy', "frame-ancestors 'none'");
    return new Response(response.body, { status: response.status, headers });
  },
};

Vous souhaitez simplement autoriser votre propre site ou une courte liste blanche à intégrer cette page, plutôt que de bloquer tout le monde ? Remplacez `DENY` par `SAMEORIGIN`, et `'none'` par `'self'` ou une liste explicite d'origines. Le reste de la configuration demeure inchangé.

Points de vigilance connus sur certaines plateformes

Mise à part les règles générales concernant les en-têtes, certaines plateformes majeures présentent leurs propres spécificités. Il est pertinent de les connaître avant de conclure à un blocage ou à une intégrabilité potentielle sur la seule base des en-têtes HTTP.

Cas d’usage courants

• Déterminer si un widget, un tableau de bord ou un document tiers peut être intégré à votre propre produit avant d'écrire le code d'intégration.
• Vérifier que votre site diffuse bien la stratégie `X-Frame-Options` ou `CSP frame-ancestors` que vous aviez définie.
• Diagnostiquer la protection anti-clickjacking : comprenez pourquoi une page affiche about:blank ou un message de refus dans un iframe.
• Tester en lot des URL candidates lors de l'agrégation de contenus ou de l'intégration à un portail ; utilisez l'historique de session pour consulter les résultats ultérieurement.
• Préparez vos revues de sécurité ou tests d'intrusion en documentant la politique de cadrage des dépendances externes.

Questions fréquentes