Guida HTML interattiva: Tag iframe

Q: Cos'è un iframe in HTML?

Un (inline frame) è un riquadro che mostra una pagina web separata dentro quella attuale. Ha il suo documento, i suoi stili e i suoi script, ed è per questo che si usa per contenuti incorporati come video, mappe, pubblicità e anteprime di codice.

Q: Perché il mio iframe dice che il sito ha rifiutato la connessione?

Il sito invia un'intestazione X-Frame-Options o Content-Security-Policy: frame-ancestors che vieta ad altri siti di incorporarlo. Molti siti lo fanno per prevenire il clickjacking. Non puoi aggirarla dalla tua pagina; usa l'URL di incorporamento ufficiale del sito, se ne ha uno.

Q: Come tolgo il bordo di un iframe?

Imposta border: 0 nel CSS. Il vecchio attributo frameborder="0" è obsoleto, anche se molti codici di incorporamento copiati lo includono ancora.

Q: Come rendo responsive un iframe?

Dagli width: 100% e un aspect-ratio nel CSS, per esempio aspect-ratio: 16 / 9 per un video, e lascia fuori un'altezza fissa. L'iframe si adatta allora al suo contenitore e mantiene le proporzioni.

Q: Cosa fa l'attributo sandbox su un iframe?

Un attributo sandbox vuoto blocca script, invio di form, popup e altro dentro il frame, e tratta il suo contenuto come proveniente da un'origine unica. Poi permetti solo quello che serve al contenuto incorporato con parole chiave come allow-scripts o allow-forms.

Come usare un iframe

Un <iframe> mostra un'altra pagina dentro la tua. Dagli l'indirizzo della pagina in src, un title che la descrive e una dimensione:

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

Il frame carica la pagina come documento separato, con i suoi stili e i suoi script. Gli esempi di questa pagina usano srcdoc invece di src, che mette l'HTML del frame direttamente nell'attributo, così funzionano senza caricare un altro sito:

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

Il paragrafo esterno è blu e in grassetto; quello dentro il frame no, anche se nella pagina c'è la stessa regola p. Gli stili non attraversano mai il confine del frame, in nessuna delle due direzioni. Il bordo predefinito e la dimensione predefinita di 300×150 vengono dal browser; gli attributi width e height sostituiscono la dimensione.

Incorporare un video di YouTube o una mappa

I siti di video e i servizi di mappe ti danno codice iframe già pronto. Su YouTube, premi Condividi, poi Incorpora:

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

Per Google Maps, apri il luogo, premi Condividi, poi Incorpora una mappa, e copia l'iframe allo stesso modo. Mantieni il title (i lettori di schermo lo annunciano quando si entra nel frame) e sostituisci le dimensioni fisse con il CSS responsive qui sotto. L'attributo allow concede al frame funzioni come autoplay o schermo intero che per le pagine incorporate sono disattivate di default.

Dimensioni, bordo e iframe responsive

I codici di incorporamento copiati usano dimensioni fisse in pixel, che sui telefoni escono dallo schermo. width: 100% più aspect-ratio fanno riempire al frame il suo contenitore mantenendo le proporzioni, e border: 0 toglie il bordo inset predefinito:

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

Cambia max-width: 480px con un altro valore e il frame mantiene le proporzioni 16:9 a ogni larghezza. Togli border: 0 per vedere il bordo predefinito del browser. I vecchi attributi frameborder, scrolling e marginheight sono obsoleti; usa il CSS.

sandbox: limitare quello che il frame può fare

Un frame può eseguire script, inviare form e aprire popup come qualsiasi pagina. L'attributo sandbox gli toglie questi poteri; un sandbox vuoto blocca quasi tutto, e ogni parola chiave ne restituisce uno. I due frame qui sotto ricevono lo stesso HTML con un piccolo 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>

Il primo frame mantiene il testo segnaposto perché il suo script non viene mai eseguito (la console di Chrome registra per lui un messaggio "Blocked script execution"). Usa sandbox ogni volta che incorpori contenuti di cui non ti fidi del tutto, come HTML scritto dagli utenti, e aggiungi solo le parole chiave che servono:

Parola chiave	Permette
`allow-scripts`	Eseguire JavaScript
`allow-forms`	Inviare form
`allow-popups`	`window.open` e link `target="_blank"`
`allow-modals`	`alert()`, `confirm()` e `prompt()`
`allow-same-origin`	Trattare il contenuto come la sua vera origine (cookie, storage)
`allow-top-navigation`	Portare l'intera scheda fuori dalla tua pagina

Non combinare mai allow-scripts e allow-same-origin per contenuti della tua stessa origine: lo script incorporato potrebbe allora togliersi da solo la sandbox.

Comunicare con un frame: postMessage

La pagina esterna e il frame sono documenti separati. Quando le loro origini sono diverse non possono toccare l'uno il DOM dell'altro, ma possono scambiarsi messaggi. Scrivi un messaggio e mandalo dentro il frame:

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

Nel codice vero, passa l'origine esatta del frame (come 'https://maps.example.com') invece di '*', e controlla e.origin nel destinatario, così i messaggi vanno solo al sito che ti aspetti e arrivano solo da lui.

Prestazioni e siti che si rifiutano

Lazy loading. Aggiungi loading="lazy" ai frame in fondo alla pagina; il browser li carica solo quando chi legge ci arriva vicino scorrendo. Ogni iframe è un caricamento completo di pagina, quindi una pagina con molti contenuti incorporati diventa lenta senza.
"Connessione rifiutata". Molti siti (banche, quasi tutti i social network, la ricerca Google) inviano un'intestazione X-Frame-Options o frame-ancestors che vieta l'incorporamento, e il browser mostra un errore nel frame. La tua pagina non può aggirarla. Usa l'URL di incorporamento ufficiale del sito, o un link.
Accessibilità. Imposta sempre title. È il nome con cui un lettore di schermo indica il frame, e una pagina con diversi frame senza titolo è difficile da esplorare.

Errori comuni

Un title mancante. I lettori di schermo annunciano il frame senza nome.
Larghezze fisse dal codice di incorporamento copiato. Sostituiscile con width: 100% e aspect-ratio.
Incorporare un normale file video. Per un tuo file .mp4, usa l'elemento video; gli iframe sono per le pagine.
Fidarsi del contenuto incorporato. Aggiungi sandbox per tutto quello che non hai scritto tu.
Aspettarsi che il CSS esterno dia stile al frame. Dai stile alla pagina incorporata dal suo interno.

Domande frequenti

Cos'è un iframe in HTML?

Un <iframe> (inline frame) è un riquadro che mostra una pagina web separata dentro quella attuale. Ha il suo documento, i suoi stili e i suoi script, ed è per questo che si usa per contenuti incorporati come video, mappe, pubblicità e anteprime di codice.

Come incorporo un video di YouTube con un iframe?

Su YouTube scegli Condividi, poi Incorpora, e copia il codice. È un iframe il cui src è https://www.youtube.com/embed/ più l'id del video. Mantieni gli attributi title e allowfullscreen, e usa nel CSS aspect-ratio: 16 / 9 con width: 100% per renderlo responsive.

Perché il mio iframe dice che il sito ha rifiutato la connessione?

Il sito invia un'intestazione X-Frame-Options o Content-Security-Policy: frame-ancestors che vieta ad altri siti di incorporarlo. Molti siti lo fanno per prevenire il clickjacking. Non puoi aggirarla dalla tua pagina; usa l'URL di incorporamento ufficiale del sito, se ne ha uno.

Come tolgo il bordo di un iframe?

Imposta border: 0 nel CSS. Il vecchio attributo frameborder="0" è obsoleto, anche se molti codici di incorporamento copiati lo includono ancora.

Come rendo responsive un iframe?

Dagli width: 100% e un aspect-ratio nel CSS, per esempio aspect-ratio: 16 / 9 per un video, e lascia fuori un'altezza fissa. L'iframe si adatta allora al suo contenitore e mantiene le proporzioni.

Cosa fa l'attributo sandbox su un iframe?

Un attributo sandbox vuoto blocca script, invio di form, popup e altro dentro il frame, e tratta il suo contenuto come proveniente da un'origine unica. Poi permetti solo quello che serve al contenuto incorporato con parole chiave come allow-scripts o allow-forms.

Concetti correlati