Docs HTML exécutables : Balise iframe

Q: Qu'est-ce qu'une iframe en HTML ?

Une (inline frame, cadre intégré) est une boîte qui affiche une page web distincte dans la page actuelle. Elle a son propre document, ses propres styles et scripts, c'est pourquoi on l'utilise pour les intégrations comme les vidéos, les cartes, les publicités et les aperçus de code.

Q: Pourquoi mon iframe dit que le site a refusé de se connecter ?

Le site envoie un en-tête X-Frame-Options ou Content-Security-Policy: frame-ancestors qui interdit aux autres sites de l'afficher dans un cadre. Beaucoup de sites le font pour empêcher le clickjacking. Vous ne pouvez pas le contourner depuis votre page ; utilisez l'URL d'intégration officielle du site s'il en a une.

Q: Comment retirer la bordure d'une iframe ?

Définissez border: 0 en CSS. L'ancien attribut frameborder="0" est obsolète, même si beaucoup de codes d'intégration copiés l'incluent encore.

Q: Comment rendre une iframe responsive ?

Donnez-lui width: 100% et un aspect-ratio en CSS, par exemple aspect-ratio: 16 / 9 pour une vidéo, et omettez la hauteur fixe. L'iframe suit alors la taille de son conteneur et garde ses proportions.

Q: À quoi sert l'attribut sandbox sur une iframe ?

Un attribut sandbox vide bloque les scripts, l'envoi de formulaires, les popups et plus encore dans le cadre, et traite son contenu comme venant d'une origine unique. Vous n'autorisez ensuite que ce dont l'intégration a besoin avec des mots-clés comme allow-scripts ou allow-forms.

Comment utiliser une iframe

Une <iframe> affiche une autre page dans la vôtre. Donnez-lui l'adresse de la page dans src, un title qui la décrit et une taille :

<iframe src="https://example.com/" title="Example site" width="600" height="400"></iframe>

Le cadre charge la page comme un document séparé, avec ses propres styles et scripts. Les exemples de cette page utilisent srcdoc au lieu de src, qui place le HTML du cadre directement dans l'attribut, pour qu'ils fonctionnent sans charger un autre site :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>iframe</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    p { color: #2563eb; font-weight: 600; }
  </style>
</head>
<body>
  <p>This paragraph is in the outer page.</p>
  <iframe title="Inner page" width="320" height="120"
    srcdoc="<h1 style='font: 20px system-ui'>Hello from inside the frame</h1><p>The outer page's CSS does not reach me.</p>">
  </iframe>
</body>
</html>

Le paragraphe extérieur est bleu et en gras ; le paragraphe dans le cadre ne l'est pas, bien que la même règle p soit sur la page. Les styles ne traversent jamais la frontière du cadre, dans aucun sens. La bordure par défaut et la taille par défaut de 300×150 viennent du navigateur ; les attributs width et height remplacent la taille.

Intégrer une vidéo YouTube ou une carte

Les sites de vidéos et les services de cartes vous donnent un code iframe tout prêt. Sur YouTube, appuyez sur Partager, puis Intégrer :

<iframe width="560" height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="YouTube video player"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen></iframe>

Pour Google Maps, ouvrez le lieu, appuyez sur Partager, puis Intégrer une carte, et copiez l'iframe de la même façon. Gardez le title (les lecteurs d'écran l'annoncent en entrant dans le cadre) et remplacez les tailles fixes par le CSS responsive ci-dessous. L'attribut allow accorde au cadre des fonctions comme la lecture automatique ou le plein écran, désactivées par défaut pour les pages intégrées.

Taille, bordure et iframes responsives

Les codes d'intégration copiés utilisent des tailles fixes en pixels, qui débordent sur les téléphones. width: 100% plus aspect-ratio fait remplir au cadre son conteneur tout en gardant ses proportions, et border: 0 retire la bordure par défaut :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Responsive iframe</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .embed {
      width: 100%;
      aspect-ratio: 16 / 9;
      border: 0;
      border-radius: 8px;
      background: #111827;
    }
    .wrap { max-width: 480px; }
  </style>
</head>
<body>
  <div class="wrap">
    <iframe class="embed" title="Video placeholder"
      srcdoc="<body style='margin:0;height:100vh;display:grid;place-items:center;color:#fff;font:16px system-ui'>16:9 frame">
    </iframe>
  </div>
</body>
</html>

Changez max-width: 480px pour une autre valeur et le cadre garde ses proportions 16:9 à toutes les largeurs. Retirez border: 0 pour voir la bordure par défaut du navigateur. Les anciens attributs frameborder, scrolling et marginheight sont obsolètes ; utilisez le CSS.

sandbox : limiter ce que peut faire le cadre

Un cadre peut exécuter des scripts, envoyer des formulaires et ouvrir des popups comme n'importe quelle page. L'attribut sandbox lui retire ces pouvoirs ; un sandbox vide bloque presque tout, et chaque mot-clé en rend un. Les deux cadres ci-dessous reçoivent le même HTML avec un petit script :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>sandbox</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    iframe { width: 240px; height: 70px; border: 2px solid #e5e7eb; border-radius: 6px; }
    code { display: block; margin: 8px 0 4px; }
  </style>
</head>
<body>
  <code>sandbox=""</code>
  <iframe id="a" sandbox="" title="Sandboxed frame"></iframe>
  <code>sandbox="allow-scripts"</code>
  <iframe id="b" sandbox="allow-scripts" title="Frame with scripts allowed"></iframe>
  <script>
    const html = '<p id="s" style="font: 15px system-ui">Scripts are blocked</p>' +
      '<script>document.getElementById("s").textContent = "JavaScript ran";<\/script>';
    document.getElementById('a').srcdoc = html;
    document.getElementById('b').srcdoc = html;
  </script>
</body>
</html>

Le premier cadre garde son texte provisoire car son script ne s'exécute jamais (la console de Chrome affiche pour lui un message « Blocked script execution »). Utilisez sandbox chaque fois que vous affichez dans un cadre un contenu auquel vous ne faites pas entièrement confiance, comme du HTML écrit par des utilisateurs, et n'ajoutez que les mots-clés nécessaires :

Mot-clé	Autorise
`allow-scripts`	L'exécution de JavaScript
`allow-forms`	L'envoi de formulaires
`allow-popups`	`window.open` et les liens `target="_blank"`
`allow-modals`	`alert()`, `confirm()` et `prompt()`
`allow-same-origin`	Traiter le contenu selon sa vraie origine (cookies, stockage)
`allow-top-navigation`	Faire quitter votre page à tout l'onglet

Ne combinez jamais allow-scripts et allow-same-origin pour un contenu de votre propre origine : le script du cadre pourrait alors retirer son propre sandbox.

Communiquer avec un cadre : postMessage

La page extérieure et le cadre sont des documents séparés. Quand leurs origines diffèrent, ils ne peuvent pas toucher au DOM l'un de l'autre, mais ils peuvent s'envoyer des messages. Tapez un message et envoyez-le dans le cadre :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>postMessage</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    iframe { display: block; width: 280px; height: 80px; margin-top: 10px; border: 2px solid #2563eb; border-radius: 6px; }
  </style>
</head>
<body>
  <input id="msg" value="Hello, frame">
  <button id="send">Send</button>
  <iframe id="frame" title="Message receiver" srcdoc="
    <p style='font: 15px system-ui' id='got'>Waiting for a message</p>
    <script>
      addEventListener('message', (e) => {
        document.getElementById('got').textContent = 'Received: ' + e.data;
      });
    </script>">
  </iframe>
  <script>
    document.getElementById('send').onclick = () => {
      const frame = document.getElementById('frame');
      frame.contentWindow.postMessage(document.getElementById('msg').value, '*');
    };
  </script>
</body>
</html>

Dans du vrai code, passez l'origine exacte du cadre (comme 'https://maps.example.com') au lieu de '*', et vérifiez e.origin du côté du récepteur, pour que les messages n'aillent et ne viennent que du site attendu.

Performances, et quand un site refuse

Chargement différé. Ajoutez loading="lazy" aux cadres placés bas dans la page ; le navigateur ne les charge que lorsque le lecteur s'en approche en défilant. Chaque iframe est le chargement d'une page entière, donc une page avec beaucoup d'intégrations devient lente sans cela.
« Refusé de se connecter ». Beaucoup de sites (banques, la plupart des réseaux sociaux, la recherche Google) envoient un en-tête X-Frame-Options ou frame-ancestors qui interdit l'affichage dans un cadre, et le navigateur affiche une erreur dans le cadre. Votre page ne peut pas le contourner. Utilisez l'URL d'intégration officielle du site, ou un lien.
Accessibilité. Définissez toujours title. C'est ainsi qu'un lecteur d'écran nomme le cadre, et une page avec plusieurs cadres sans titre est difficile à parcourir.

Erreurs fréquentes

Un title manquant. Les lecteurs d'écran annoncent le cadre comme sans nom.
Des largeurs fixes venant d'un code d'intégration copié. Remplacez-les par width: 100% et aspect-ratio.
Afficher un simple fichier vidéo dans un cadre. Pour votre propre fichier .mp4, utilisez l'élément vidéo ; les iframes servent aux pages.
Faire confiance au contenu d'un cadre. Ajoutez sandbox pour tout ce que vous n'avez pas écrit.
S'attendre à ce que le CSS extérieur stylise le cadre. Stylisez la page du cadre depuis l'intérieur.

Questions fréquentes

Qu'est-ce qu'une iframe en HTML ?

Une <iframe> (inline frame, cadre intégré) est une boîte qui affiche une page web distincte dans la page actuelle. Elle a son propre document, ses propres styles et scripts, c'est pourquoi on l'utilise pour les intégrations comme les vidéos, les cartes, les publicités et les aperçus de code.

Comment intégrer une vidéo YouTube avec une iframe ?

Sur YouTube, choisissez Partager, puis Intégrer, et copiez le code. C'est une iframe dont le src est https://www.youtube.com/embed/ suivi de l'identifiant de la vidéo. Gardez les attributs title et allowfullscreen, et utilisez en CSS aspect-ratio: 16 / 9 avec width: 100% pour la rendre responsive.

Pourquoi mon iframe dit que le site a refusé de se connecter ?

Le site envoie un en-tête X-Frame-Options ou Content-Security-Policy: frame-ancestors qui interdit aux autres sites de l'afficher dans un cadre. Beaucoup de sites le font pour empêcher le clickjacking. Vous ne pouvez pas le contourner depuis votre page ; utilisez l'URL d'intégration officielle du site s'il en a une.

Comment retirer la bordure d'une iframe ?

Définissez border: 0 en CSS. L'ancien attribut frameborder="0" est obsolète, même si beaucoup de codes d'intégration copiés l'incluent encore.

Comment rendre une iframe responsive ?

Donnez-lui width: 100% et un aspect-ratio en CSS, par exemple aspect-ratio: 16 / 9 pour une vidéo, et omettez la hauteur fixe. L'iframe suit alors la taille de son conteneur et garde ses proportions.

À quoi sert l'attribut sandbox sur une iframe ?

Un attribut sandbox vide bloque les scripts, l'envoi de formulaires, les popups et plus encore dans le cadre, et traite son contenu comme venant d'une origine unique. Vous n'autorisez ensuite que ce dont l'intégration a besoin avec des mots-clés comme allow-scripts ou allow-forms.

Concepts liés