L’elemento iframe: src e sandbox

L'elemento <iframe> incorpora un altro documento HTML nella pagina corrente. Ogni iframe ha un proprio contesto di navigazione, DOM e ambito JavaScript. Il contenuto di un iframe non può accedere al DOM della pagina genitore senza un'autorizzazione esplicita.

Impostate l'attributo src sull'URL da incorporare: <iframe src="https://example.com" width="800" height="600">. L'iframe crea un nuovo contesto di navigazione. L'attributo title è obbligatorio per l'accessibilità: title="Embedded map".

sandbox applica restrizioni al contenuto dell'iframe: per impostazione predefinita disabilita script, moduli, popup e plugin. Aggiungete autorizzazioni specifiche per ripristinare le funzionalità necessarie: sandbox="allow-scripts allow-same-origin".

allow-scripts: abilita JavaScript. allow-same-origin: consente di trattare l'iframe come appartenente alla stessa origine, necessario per accedere a localStorage. allow-forms: abilita l'invio dei moduli. allow-popups: consente window.open(). Concedete solo le autorizzazioni minime necessarie.

Gli iframe cross-origin non possono accedere al DOM della pagina genitore: parent.document genera un errore di sicurezza. La comunicazione tra frame cross-origin utilizza postMessage: iframe.contentWindow.postMessage(data, origin).

Inviate messaggi dalla pagina genitore all'iframe: iframe.contentWindow.postMessage({ type: "update", data: {} }, "https://embed.example.com"). Nell'iframe, mettete in ascolto: window.addEventListener("message", handler). Verificate sempre event.origin prima di elaborare il messaggio.

loading="lazy" sugli iframe rimanda il caricamento finché l'iframe non è vicino al viewport, riducendo il caricamento iniziale della pagina. È utile per mappe, incorporamenti video e widget dei social media sotto la parte inizialmente visibile, che non devono essere visualizzati subito.

Ogni iframe carica un documento HTML separato, CSS, JavaScript e risorse: un costo significativo in termini di risorse. Eviti gli iframe per i contenuti che potrebbero essere incorporati come snippet. Carichi in modo lazy gli iframe che si trovano sotto la piega. Valuti l'uso di pattern facade (mostrare un segnaposto e caricare al clic).

Controlli il comportamento dello scorrimento dell'iframe: scrolling="no" disabilita le barre di scorrimento (deprecato; utilizzi CSS overflow: hidden sull'iframe). L'approccio moderno consiste nell'impostare l'altezza dell'iframe in modo che corrisponda a quella del contenuto, eliminando la necessità di barre di scorrimento interne.

L'attributo allow concede all'iframe funzionalità della Permissions Policy: allow="camera; microphone; fullscreen". In questo modo l'iframe può richiedere l'accesso alla fotocamera, al microfono e alla Fullscreen API anche quando l'origine principale non utilizza queste funzionalità.

YouTube e Google Maps forniscono codici per l'incorporamento tramite iframe. Questi codici includono attributi allow per la modalità a schermo intero e la riproduzione automatica. Aggiunga sempre title="Video title" per garantire l'accessibilità agli screen reader. L'attributo sandbox non viene generalmente aggiunto ai codici di incorporamento di terze parti: consulti la relativa documentazione per le indicazioni sulla sicurezza.

Che cosa fa l'attributo sandbox a un iframe per impostazione predefinita, quando non contiene valori?

Gli iframe incorporano documenti esterni in contesti di navigazione isolati. L'attributo sandbox limita le funzionalità dell'iframe: conceda solo le autorizzazioni minime necessarie. postMessage consente una comunicazione sicura tra origini diverse. lazy rimanda il costo delle risorse per gli iframe sotto la piega. L'attributo allow concede funzionalità della Permissions Policy agli incorporamenti di terze parti attendibili.