Che cos'è iFrame? | phoenixNAP Glossario IT

Un iFrame, o Inline Frame, è un elemento HTML che consente di incorporare un altro documento HTML nella pagina web corrente.

Cos'è un iFrame?

Un iFrame, abbreviazione di Inline Frame, è un HTML elemento che consente l'incorporamento di un documento HTML esterno entro i confini di un altro documento HTML. In sostanza, agisce come una finestra che può visualizzare contenuti da una pagina web o risorsa diversa, pur rimanendo parte della pagina web corrente. Gli iFrame sono ampiamente utilizzati per vari scopi, come l'integrazione di video, mappe interattive, pubblicità o altri contenuti dinamici in un sito web senza richiedere agli utenti di abbandonare la pagina che stanno visualizzando.

Come funziona un iFrame?

Un iFrame incorpora un documento HTML esterno o altri contenuti web all'interno della pagina web corrente. Ecco una spiegazione passo dopo passo di come funziona questo processo:

Inserimento dell'elemento iFrame. Il processo inizia con lo sviluppatore che aggiunge un tag all'HTML della pagina web. Questo tag include attributi come src, che specifica il URL del contenuto esterno da incorporare e altri attributi facoltativi come width, height, frameborder e allowfullscreen per controllare l'aspetto e il comportamento dell'iFrame.
Richiesta dell'intento esterno. Una volta che l'utente del browser carica la pagina web contenente l'iFrame, il browser legge l'attributo src nel tagga e crea un separato HTTP richiesta all'URL specificato per recuperare il contenuto.
Caricamento del contenuto esterno. Il browser recupera il contenuto esterno, che potrebbe essere un intero documento HTML, un file multimediale o qualsiasi risorsa web. Il contenuto viene trattato come un documento indipendente all'interno della pagina web principale. L'iFrame crea essenzialmente una mini finestra del browser all'interno della pagina web principale, caricando e rendendo il contenuto come se fosse una pagina web autonoma.
Rendering del contenuto. Il browser visualizza quindi il contenuto all'interno dei confini dell'iFrame. Il contenuto incorporato appare come se fosse parte della pagina web principale, ma funziona in modo indipendente. La pagina padre e il contenuto dell'iFrame non interagiscono direttamente, sebbene condividano lo stesso spazio visivo.
Interazione e funzionalità. Gli utenti interagiscono con il contenuto all'interno dell'iFrame proprio come farebbero con qualsiasi pagina web. Ad esempio, se l'iFrame contiene un modulo, gli utenti possono compilarlo e inviarlo. Il contenuto incorporato può includere il proprio JavaScript, CSSe altre risorse, eseguite all'interno del contesto iFrame, separatamente dalla pagina padre.
Ciclo di vita indipendente del documento. Il contenuto incorporato nell'iFrame ha il suo ciclo di vita del documento. Ciò significa che carica, esegue script, e interagisce con le proprie risorse indipendentemente dalla pagina padre. Ad esempio, se la pagina padre viene ricaricata, anche il contenuto dell'iFrame verrà ricaricato, ma il suo stato e comportamento vengono gestiti separatamente dal documento principale.
Sicurezza e restrizioni. A causa di potenziali rischi per la sicurezza, i browser implementano varie restrizioni sul contenuto iFrame. Ad esempio, le policy cross-origin impediscono agli script nella pagina padre di accedere al contenuto all'interno di un iFrame da un'altra dominioInoltre, gli sviluppatori utilizzano intestazioni e attributi di sicurezza come sandbox per limitare ulteriormente le azioni che il contenuto dell'iFrame può compiere, ad esempio disabilitando gli script o impedendo l'invio di moduli.

Attributi di un iFrame

IL elemento in HTML ha diversi attributi che controllano il suo comportamento, aspetto e interazione con il contenuto che visualizza. Ecco una spiegazione dettagliata degli attributi chiave:

origine Questo attributo specifica l'URL del contenuto esterno da incorporare nell'iFrame. È l'attributo più essenziale perché determina quale contenuto verrà caricato nell'iFrame. Ad esempio, incorporerà il contenuto da "https://www.example.com" nell'iFrame.
larghezza e altezza. Questi attributi controllano la dimensione dell'iFrame in pixel o percentuali. Ad esempio, creerà un iFrame largo 600 pixel e alto 400 pixel.
cornicebordo. Questo attributo specifica se l'iFrame deve avere un bordo. Il valore 0 significa nessun bordo, mentre 1 significa un bordo visibile. Questo attributo è ora considerato obsoleto, con il CSS moderno come metodo preferito per definire lo stile del bordo dell'iFrame.
scorrimento. Questo attributo controlla la visibilità delle barre di scorrimento all'interno dell'iFrame. Può assumere tre valori: yes, no o auto. yes forza la visualizzazione delle barre di scorrimento, no le impedisce e auto consente la visualizzazione delle barre di scorrimento solo quando necessario. Ad esempio, impedirà la visualizzazione delle barre di scorrimento anche se il contenuto è più grande dell'iFrame.
sandbox. Questo potente attributo abilita un set di restrizioni extra sul contenuto all'interno dell'iFrame per migliorare la sicurezza. Può essere utilizzato per disabilitare gli script, impedire l'invio di moduli, bloccare l'uso di plugin e limitare altri comportamenti potenzialmente rischiosi. Il valore di questo attributo può essere un elenco di restrizioni separate da spazi, come allow-scripts, allow-forms, allow-same-origin, ecc. Ad esempio, consentirebbe l'esecuzione degli script all'interno dell'iFrame, ma con altre restrizioni.
permettere. L'attributo allow specifica una policy di funzionalità per il contenuto nell'iFrame. Questo controlla i permessi per cose come l'accesso alla telecamera, la geolocalizzazione, la modalità a schermo intero e altro. È un modo per concedere o negare esplicitamente determinate funzionalità del browser al contenuto all'interno dell'iFrame. Ad esempio, consente al contenuto di accedere alla geolocalizzazione solo per la stessa origine e disabilita del tutto l'accesso alla telecamera.
nome. Questo attributo assegna un nome all'iFrame, che può essere utile per indirizzarlo con link o script. Ad esempio, un link con target="iframe_name" aprirà il contenuto collegato all'interno dell'iFrame denominato. Ciò è particolarmente utile in situazioni in cui sono presenti più iFrame in una pagina.
documento sorgente. Questo attributo consente di incorporare direttamente il contenuto HTML nell'iFrame anziché caricarlo da una fonte esterna. È utile per incorporare piccoli pezzi di contenuto HTML senza la necessità di un file separato. Ad esempio, Hello, world!"> visualizzerebbe "Hello, world!" all'interno dell'iFrame.
politica di riferimento. Questo attributo controlla la quantità di informazioni di riferimento che devono essere inviate quando si recupera l'URL src. Aiuta a gestire i problemi di privacy e sicurezza relativi ai dati di riferimento. I valori possono essere no-referrer, origin, strict-origin, ecc., che determinano quanta parte dell'URL della pagina originale viene condivisa con il contenuto incorporato.
Caricamento in corso. L'attributo loading specifica se l'iFrame deve essere caricato immediatamente o ritardato. I valori possono essere "eager", che carica l'iFrame il prima possibile, o "lazy", che rimanda il caricamento finché l'iFrame non è vicino alla viewport, migliorando le prestazioni e l'esperienza utente riducendo il tempo di caricamento iniziale.
politica di riferimento. Questo attributo imposta la policy di riferimento per le richieste effettuate dall'iframe, che influisce sulla quantità di informazioni sulla pagina di riferimento inviata al contenuto dell'iframe. Le opzioni includono no-referrer, origin, same-origin e strict-origin.
CSP. L'attributo csp (content security policy) consente allo sviluppatore di specificare una content security policy specifica per il contenuto nell'iFrame. Ciò impone determinate misure di sicurezza, come quali fonti di contenuto possono essere caricate, che possono prevenire determinati tipi di attacchi come il cross-site scripting (XSS).

A cosa servono gli iFrame?

Gli iFrame sono utilizzati per vari scopi nello sviluppo web, principalmente per incorporare contenuti esterni in una pagina web mantenendo un contesto separato per tali contenuti. Ecco alcuni casi di utilizzo comuni:

Incorporamento di video. Gli iFrame sono ampiamente utilizzati per incorporare video da piattaforme come YouTube, Vimeo o altri servizi di hosting video. Ciò consente agli utenti di guardare i video direttamente su un sito Web senza uscire dalla pagina. Il lettore video incorporato, completo di controlli, viene caricato all'interno dell'iFrame.
Integrazione delle mappe. Gli iFrame sono spesso utilizzati per incorporare mappe interattive da servizi come Google Maps o OpenStreetMap. Ciò fornisce agli utenti la possibilità di visualizzare e interagire con le mappe direttamente sulla pagina web, il che è particolarmente utile per visualizzare posizioni, indicazioni stradali e altri dati geografici.
Visualizzazione di pagine web o documenti esterni. Gli iFrame consentono l'inclusione di intere pagine web o documenti da altri siti web. Questo viene comunemente utilizzato per visualizzare contenuti quali termini di servizio, policy sulla privacy o altri documenti esterni senza richiedere agli utenti di abbandonare il sito corrente.
Caricamento di widget e plugin di terze parti. Molti servizi di terze parti, come piattaforme di social media, strumenti di chat per l'assistenza clienti e reti pubblicitarie, forniscono widget che possono essere incorporati tramite iFrame. Ciò consente ai siti Web di integrare funzionalità come commenti di Facebook, feed X o supporto tramite chat live senza sviluppo backend.
Ospitare annunci pubblicitari. Gli iFrame sono comunemente usati per incorporare annunci pubblicitari nelle pagine web. Le reti pubblicitarie spesso forniscono tag pubblicitari basati su iFrame, che aiutano a isolare il contenuto dell'annuncio dal resto della pagina per evitare conflitti tra il codice dell'annuncio e il codice della pagina.
Isolamento dei contenuti per motivi di sicurezza. Gli iFrame possono essere utilizzati per incorporare contenuti da fonti esterne mantenendoli isolati dagli script e dagli stili della pagina padre. Ciò è particolarmente utile per mantenere i limiti di sicurezza, poiché impedisce che contenuti potenzialmente pericolosi influenzino la pagina principale.
Testare e visualizzare in anteprima i contenuti. Gli sviluppatori spesso utilizzano gli iFrame per testare o visualizzare in anteprima i contenuti da un sviluppo dell'ambiente su un sito live. Ciò consente un facile confronto e test senza integrare completamente il contenuto nel sito.
Visualizzazione di contenuti reattivi. Gli iFrame possono essere utilizzati per visualizzare contenuti responsive che si adattano a diverse dimensioni dello schermo, come pagine web o applicazioni responsive. Ciò è utile per garantire che i contenuti incorporati siano accessibili e visivamente coerenti su tutti i dispositivi.
Incorporamento di moduli e strumenti interattivi. Gli iFrame vengono utilizzati per incorporare moduli, sondaggi, calcolatrici e altri strumenti interattivi da fonti esterne. Ciò consente ai siti Web di offrire funzionalità complesse senza dover sviluppare questi strumenti da zero.
Incorporamento tra domini. Quando il contenuto deve essere incorporato da un dominio diverso, gli iFrame forniscono un metodo per farlo mantenendo la separazione dei contesti di origine. Ciò è particolarmente utile per i contenuti ospitati su un dominio diverso. server o dominio, consentendo una gestione e un'implementazione più semplici.

Esempi di iFrame

Ecco due esempi di utilizzo degli iFrame.

Esempio 1: Incorporamento di un video di YouTube

Questo esempio mostra come incorporare un video di YouTube in una pagina web utilizzando un iFrame.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>iFrame YouTube Example</title>

</head>

<body>

    <h1>Watch this Video:</h1>

    <iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ"

    title="YouTube video player" frameborder="0" allow="accelerometer; autoplay;

    clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>

    </iframe>

</body>

</html>

Spiegazione:

L'attributo src è impostato sull'URL del video di YouTube. In questo caso, è un video di esempio.
Gli attributi width e height definiscono le dimensioni del lettore video.
L'attributo allow specifica i permessi per funzionalità come la riproduzione automatica, crittografato multimediali e a schermo intero.
L'attributo allowfullscreen consente di visualizzare il video in modalità a schermo intero.

Esempio 2: Incorporamento di una mappa di Google

Questo esempio mostra come incorporare una mappa di Google in una pagina web utilizzando un iFrame.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>iFrame Google Map Example</title>

</head>

<body>

    <h1>Our Location:</h1>

    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.8354345096274!

    2d144.95373631531565!3d-37.81720997975142!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!

    1s0x6ad65d43f1a5d53b%3A0x1aaf3d5a5b64db5e!2sFederation%20Square!5e0!3m2!1sen!2sau!4v1617174192722!5m2!

    1sen!2sau"

    width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

</body>

</html>

Spiegazione:

L'attributo src contiene l'URL fornito da Google Maps per incorporare la mappa. L'URL include parametri specifici che determinano la posizione e le impostazioni di visualizzazione.
Gli attributi width e height definiscono la dimensione della mappa sulla pagina web.
La parte style="border:0;" rimuove tutti i bordi attorno alla mappa.
L'attributo allowfullscreen consente agli utenti di visualizzare la mappa in modalità a schermo intero.
L'attributo loading="lazy" posticipa il caricamento della mappa finché non è vicina alla finestra di visualizzazione, migliorando le prestazioni di caricamento della pagina.

Come utilizzare gli iFrame?

Nei passaggi seguenti viene spiegato come utilizzare gli iFrame per ottenere il massimo dalla tua esperienza utente.

Incorpora contenuto esterno

Per incorporare contenuti esterni in una pagina web, gli sviluppatori in genere utilizzano Elemento HTML, che consente loro di incorporare risorse come video, mappe o intere pagine web da altri domini direttamente all'interno del loro sito. Il processo comporta la specificazione della fonte del contenuto tramite l'attributo src nel tag, che punta all'URL del contenuto esterno. Attributi aggiuntivi come width, height e allow possono essere utilizzati per controllare l'aspetto e il comportamento del contenuto incorporato, assicurando che si adatti perfettamente al design della pagina.

Incorporando contenuti esterni in questo modo, gli sviluppatori migliorano la funzionalità e l'interattività delle loro pagine web, offrendo agli utenti un'esperienza più ricca senza dover abbandonare il sito.

Carica contenuto dinamicamente

Il caricamento dinamico di contenuti all'interno di un iFrame comporta la modifica della sorgente (src) dell'iFrame in risposta alle interazioni dell'utente o ad altri trigger, come pulsanti o link. Questo può essere ottenuto utilizzando JavaScript, dove è possibile manipolare l'attributo src dell'iFrame per caricare nuovi contenuti senza ricaricare l'intera pagina.

Ad esempio, quando un utente clicca su un pulsante, può essere eseguita una funzione JavaScript che aggiorna l'attributo src dell'iFrame, facendo sì che recuperi e visualizzi un nuovo documento HTML o una nuova risorsa web. Questo approccio è particolarmente utile per creare pagine web dinamiche. applicazioni dove è necessario visualizzare contenuti diversi nella stessa area della pagina in base alle azioni dell'utente, migliorando l'esperienza dell'utente grazie a transizioni fluide tra i diversi contenuti.

Inoltre, sfruttando history.pushState API In combinazione con i contenuti dinamici degli iFrame, è possibile mantenere la cronologia del browser, consentendo agli utenti di navigare avanti e indietro tra i contenuti caricati dinamicamente come se si trattasse di caricamenti di pagina tradizionali.

Creazione di frame in linea

La creazione di frame in linea, comunemente noti come iFrame, comporta l'utilizzo di Elemento HTML per incorporare contenuti esterni direttamente in una pagina web. Questo elemento è versatile e consente agli sviluppatori di inserire qualsiasi cosa, da video e mappe a intere pagine web o widget interattivi nel contenuto esistente. Specificando l'attributo src, si definisce l'URL del contenuto da incorporare, mentre altri attributi come width, height e frameborder controllano l'aspetto e il comportamento dell'iFrame.

Gli iFrame sono particolarmente utili per integrare senza problemi contenuti di terze parti, consentendo agli utenti di interagire con risorse esterne senza lasciare il sito principale. Con attributi aggiuntivi come sandbox e allow, gli sviluppatori possono ottimizzare sicurezza e funzionalità, assicurando che il contenuto incorporato si comporti come previsto, mantenendo al contempo l'integrità e le prestazioni complessive del sito web.

Buone pratiche per gli iFrame

Quando si utilizzano iFrame nello sviluppo web, seguire le best practice è essenziale per garantire che funzionino correttamente, mantengano la sicurezza e offrano una buona esperienza utente. Ecco alcune best practice per l'utilizzo di iFrame:

Per motivi di sicurezza, utilizzare l'attributo sandbox. L'attributo sandbox aumenta la sicurezza applicando restrizioni al contenuto all'interno dell'iFrame. Per impostazione predefinita, gli iFrame possono introdurre rischi per la sicurezza come lo scripting cross-site (XSS). L'utilizzo di sandbox limita le azioni che il contenuto incorporato può eseguire, come l'esecuzione di script, l'invio di moduli o l'accesso allo storage del browser. Puoi anche consentire selettivamente determinate funzionalità come script o moduli specificando valori di autorizzazione aggiuntivi.

<iframe src="https://example.com" sandbox="allow-scripts"></iframe>

Specificare un attributo title per l'accessibilità. Aggiungere un attributo title descrittivo al tuo iFrame migliora l'accessibilità, in particolare per gli utenti che si affidano a lettori di schermo. L'attributo title fornisce una breve descrizione del contenuto, aiutando gli utenti a capire di cosa si tratta.

<iframe src="https://example.com" title="Interactive map of our location"></iframe>

Garantire un design reattivo. Gli iFrame possono talvolta compromettere la reattività di una pagina web, specialmente su schermi più piccoli. Per garantire che il contenuto dell'iFrame si adatti correttamente a diversi dispositivi, usa CSS per rendere l'iFrame reattivo. Puoi ottenere questo risultato impostando la larghezza e l'altezza su percentuali o usando unità viewport, combinate con vincoli max-width e max-height.

iframe {

    width: 100%;

    height: auto;

    max-width: 600px;

    max-height: 400px;

}

Evitare di utilizzare eccessivamente gli iFrame. Sebbene gli iFrame siano utili, un uso eccessivo comporta tempi di caricamento delle pagine più lenti, rischi per la sicurezza e una scarsa esperienza utente. Quando possibile, prendi in considerazione metodi alternativi come l'utilizzo di API o l'incorporamento di contenuti direttamente nella pagina anziché affidarti a più iFrame.
Imposta una politica di referral. L'attributo referrerpolicy controlla la quantità di informazioni referrer inviate quando viene caricato il contenuto iFrame. Questo può aiutare a proteggere la privacy dell'utente e impedire che informazioni sensibili vengano condivise con il contenuto incorporato. I valori comuni includono no-referrer, origin o strict-origin-when-cross-origin.

<iframe src="https://example.com" referrerpolicy="no-referrer"></iframe>

Utilizzare l'attributo di caricamento per migliorare le prestazioni. L'attributo loading aiuta a ottimizzare le prestazioni della pagina rinviando il caricamento degli iFrame fuori schermo finché non sono necessari (ad esempio, quando sono vicini alla viewport). Il valore lazy ritarda il caricamento, mentre hurry carica immediatamente l'iFrame.

<iframe src="https://example.com" loading="lazy"></iframe>

Impostare le autorizzazioni appropriate. L'attributo allow specifica quali funzionalità il contenuto iFrame può utilizzare, come geolocalizzazione, accesso alla telecamera o riproduzione automatica. L'impostazione di autorizzazioni precise limita le capacità del contenuto incorporato, migliorando la sicurezza e la privacy dell'utente.

<iframe src="https://example.com" allow="geolocation; microphone; camera"></iframe>

Si prendano in considerazione le politiche multi-origine. Gli iFrame che caricano contenuti da domini diversi possono introdurre sfide di sicurezza. Implementare policy di condivisione delle risorse tra origini (CORS) su server ospitare il contenuto iFrame e utilizzare X-Frame-Options o le intestazioni Content-Security-Policy (CSP) per controllare quali siti possono incorporare il tuo contenuto in un iFrame. Ciò aiuta a prevenire il clickjacking e altri exploit di sicurezza.
Fornire contenuti di riserva. Nel caso in cui l'iFrame non si carichi o sia bloccato, prendi in considerazione la possibilità di fornire contenuti di fallback all'interno dell' tag. Questo contenuto verrà visualizzato se l'iFrame non può essere caricato, offrendo una migliore esperienza utente.

<iframe src="https://example.com">

    <p>Your browser does not support iFrames. Please visit <a href="https://example.com">this link</a> instead.</p>

</iframe>

Monitorare l'impatto sulle prestazioni. Gli iFrame possono rallentare le prestazioni della pagina, soprattutto se contengono contenuti pesanti come video o elementi interattivi. Monitora regolarmente l'impatto degli iFrame sul tempo di caricamento della tua pagina e ottimizza o carica in modo differito gli iFrame che non sono immediatamente visibili all'utente.