Gli iFrame fanno parte del normale standard HTML da molto tempo. In HTML 4.0, sono stati inclusi insieme ai frames ormai disapprovati nella variante HTML Frameset. I frames non sono più considerati in HTML5, ma i frame incorporati (iFrame) sì.
Attraverso gli iFrame è possibile incorporare altre pagine web. Il browser quindi renderizza un'altra pagina HTML all'interno della pagina web attuale. Il contenuto della finestra iFrame può essere formattato individualmente.
Parlando degli iFrame, è ovviamente necessario considerare nuovamente la sicurezza di questa tecnica HTML. Un problema in questo caso è costituito dal codice dannoso che può essere inserito nelle pagine web tramite gli iFrame inosservato. Questo è ovviamente un grande fastidio.
In HTML5, sono stati introdotti meccanismi di sicurezza appropriati per poter evitare questi problemi. Più informazioni saranno fornite nel resto di questo tutorial. Tuttavia, prima di utilizzare gli iFrame, è comunque importante considerare che potenzialmente costituiscono un rischio, soprattutto perché i nuovi attributi di sicurezza non sono ancora supportati da tutti i browser.
Nel contesto di HTML5, gli iFrame fanno parte dello standard fisso e aggiungono alcuni attributi aggiuntivi. L'esempio seguente mostra come definire gli iFrame.
<iframe src="http://www.psd-tutorials.de/" width="420" height="350"> <a href="http://www.psd-tutorials.de/">PSD-Tutorials.de</a> </iframe>
Il risultato visualizzato nel browser sarà il seguente:
All'elementoiframeè assegnato l'attributosrc. Questosrccontiene come valore la pagina da visualizzare. Questo può essere un file locale, ma può anche essere, come nell'esempio mostrato, il caricamento di una risorsa esterna.
Attraverso i due attributiwidtheheightvengono stabilite la larghezza e l'altezza degli iFrame. Se il contenuto incorporato è più grande delle dimensioni specificate dell'iFrame, compariranno le barre di scorrimento.
È possibile definire contenuti arbitrari tra il tag apertura e chiusura di<iframe>. Tuttavia, questi saranno visibili solo su quei browser che non riconoscono l'elementoiframe.
In HTML5 sono stati introdotti alcuni nuovi attributi relativi agli iFrame, principalmente legati al cosiddetto comportamento Sandbox.
Nel browser, la Same Origin Policy garantisce che una pagina web incorporata non possa essere manipolata durante la visualizzazione. Questa funzionalità di sicurezza è senz'altro utile. Tuttavia, non è sempre l'ideale. Pertanto, in HTML5 è stato introdotto l'attributosandbox, che consente ai browser di specificare esplicitamente le autorizzazioni che devono essere assegnate al contenuto incorporato di una pagina web esterna in un iFrame.
<iframe sandbox="allow-forms" src="getusercontent.cgi?id=12193"> </iframe>
Gli iFrame dotati dell'attributosandboxnon hanno accesso al DOM della pagina web incorporata. Inoltre, non possono eseguire script o salvare cookie. Queste restrizioni possono essere rimosse utilizzando diversi valori del Sandbox.
All'attributosandboxpossono essere assegnati valori diversi. Conallow-formsla pagina web incorporata può raccogliere informazioni dagli utenti tramite moduli. Gli utenti non sono a conoscenza del fatto che il modulo non proviene dalla pagina attuale.
D'altra parte, specificandoallow-some-origin, la pagina incorporata viene trattata come se provenisse dallo stesso host. Questo valore annulla la Same Origin Policy.
Il valoreallow-top-navigationconsente al contenuto incorporato di modificare il contenuto del contesto di navigazione superiore.
E poi c'èallow-script. Ciò consente alla pagina incorporata di contenere JavaScript che può manipolare la pagina che lo include.
Ecco un esempio di come potrebbe apparire un'istruzionesandbox>corrispondente:
<iframe sandbox="allow-same-origin" src="http://www.psd-tutorials.de/"> </iframe>
Tuttavia, è anche possibile assegnare più valori. Questi devono essere separati da spazi. Ecco un altro esempio:
<iframe sandbox="allow-same-origin allow-forms allow-scripts" src="http://www.psd-tutorials.de/"> </iframe>
Gli iFrame di solito sono progettati per incorporare contenuti esterni. Tuttavia, è possibile anche includerli.
<iframe src="http://www.psd-tutorials.de/" width="200" height="150" seamless> </iframe>
Questo attributo ha effetti significativi. Ad esempio, i target di riferimento nel documento includono – a meno che non sia stato definito diversamente – il contenuto viene mostrato nella finestra del browser in cui è stato definito l'elementoiframe. (Nell'inclusione normale, i target di riferimento – a meno che non sia specificato diversamente – vengono visualizzati nella finestra iFrame).Seamlessè attualmente supportato solo da Google Canary, cioè la versione di sviluppo di questo browser.
L'altro effetto riguarda i fogli di stile. Infatti, i fogli di stile del file incluso si applicano anche al documento incluso. (Nell'inclusione normale, le indicazioni relative alle strutture di stile non vengono applicate).
È stato introdotto anche un altro attributo. Con srcdoc è possibile definire direttamente il contenuto da includere. Guarda l'esempio seguente:
<iframe sandbox="allow-same-origin allow-forms allow-scripts"
seamless="seamless" srcdoc="
<script>
top.location.href=" http://www.psd-tutorials.de/"
</script>">
</iframe>In questo caso manca l'attributo src, con il quale altrimenti viene specificato il file da includere.
Il contenuto specificato tramite srcdoc viene trattato come se provenisse da un server esterno. Pertanto è soggetto pienamente alla Same Origin Policy. Questo comportamento è interessante ad esempio per le definizioni di script. All'interno è permesso qualsiasi codice HTML e JavaScript. Tuttavia, le virgolette e il simbolo '&' devono essere descritti mediante i caratteri nominati " e &.
È possibile definire direttamente una pagina qui e quindi visualizzare il contenuto desiderato.
<iframe sandbox="allow-same-origin allow-forms allow-scripts" seamless="seamless" srcdoc=" <!DOCTYPE html> <html> <head> <title>PSD-Tutorials.de</title> </head> <body> <p>…</p> </body> </html>"> </iframe>
Non è necessario che si tratti di un file HTML completo. È anche possibile qualcosa come questo:
<iframe sandbox="allow-same-origin allow-forms allow-scripts" seamless="seamless" srcdoc="<p>PSD-Tutorials.de</p>"> </iframe>
Nel browser ciò appare come segue:
Questo è quindi la normale sintassi HTML, senza script, ecc.
Alcuni suggerimenti sugli attributi che finora sono stati utilizzati per la formattazione visiva: cose come scrolling, marginwidth e marginheight non sono più ammesse in HTML5. Questi attributi vengono sostituiti da CSS.
