iFrames zijn al lang onderdeel van de HTML-standaard. In HTML 4.0 werden ze echter samen met de inmiddels verouderde frames in de frameset-HTML-variant gestopt. Frames worden niet langer ondersteund in HTML5, maar ingesloten frames (iFrames) wel.
Met iFrames kunnen andere webpagina's worden ingesloten. De browser rendert dus een extra HTML-bestand binnen de huidige webpagina. De inhoud van het iFrame-venster kan individueel opgemaakt worden.
Wanneer het over iFrames gaat, moet natuurlijk ook de veiligheid van deze HTML-techniek nogmaals apart bekeken worden. Een probleem hierbij is kwaadaardige code die onopgemerkt in webpagina's via iFrames geïnjecteerd kan worden. Dat is natuurlijk erg vervelend.
In HTML5 zijn er echter passende beveiligingsmechanismen waarmee deze problemen vermeden kunnen worden. Meer hierover in de verdere loop van deze zelfstudie. Voordat iFrames gebruikt worden, moet echter toch in overweging worden genomen dat ze potentieel een gevaar kunnen vormen, zeker ook omdat de nieuwe veiligheidsattributen nog lang niet door alle browsers ondersteund worden.
In HTML5 zijn iFrames dus een vast onderdeel van de standaard en brengen ze enkele extra attributen met zich mee. Het volgende voorbeeld laat zien hoe iFrames gedefinieerd kunnen worden.
<iframe src="http://www.psd-tutorials.de/" width="420" height="350"> <a href="http://www.psd-tutorials.de/">PSD-Tutorials.de</a> </iframe>
Het resultaat ziet er als volgt uit in de browser:
Het iframe-element krijgt het src-attribuut toegewezen. Deze src bevat als waarde de pagina die getoond moet worden. Het kan hereen lokale bestand betreffen. Maar het is ook mogelijk - zoals in het getoonde voorbeeld - om een externe bron aan te roepen.
Met de twee attributen width en height worden de breedte en hoogte van de iFrame bepaald. Als de ingesloten inhoud groter is dan de opgegeven grootte van het iFrame, worden er scrollbalken weergegeven.
Tussen het openende en sluitende <iframe>-tag kunnen willekeurige inhoud worden gedefinieerd. Deze zijn echter alleen zichtbaar in browsers die het iframe-element niet herkennen.
In HTM5 worden enkele nieuwe attributen geïntroduceerd met betrekking tot iFrames, die voornamelijk te maken hebben met het zogenaamde Sandbox-gedrag.
In browsers zorgt hetzelfde oorsprongsbeleid ervoor dat een ingesloten webpagina tijdens het weergeven niet gemanipuleerd kan worden. Deze veiligheidsfunctie is zeker zinvol. Toch is het niet altijd ideaal. Daarom is in HTML5 het sandbox-attribuut geïntroduceerd, waarmee de browsers expliciet verteld kan worden welke machtigingen aan de inhoud die door een externe pagina in een iFrame ingesloten wordt, toegekend moeten worden.
<iframe sandbox="allow-forms" src="getusercontent.cgi?id=12193"> </iframe>
iFrames die voorzien zijn van het attribuut sandbox hebben geen toegang tot de DOM van de ingesloten webpagina. Bovendien mogen ze geen scripts uitvoeren en cookies opslaan. Deze beperkingen kunnen worden opgeheven door verschillende sandbox-waarden.
Aan het sandbox-attribuut kunnen verschillende waarden worden toegewezen. Met allow-forms mag de ingesloten webpagina via formulieren informatie van de gebruiker verzamelen. Gebruikers weten dan niet dat het formulier niet van de huidige pagina afkomstig is.
Als daarentegen allow-some-origin wordt opgegeven, wordt de ingesloten webpagina behandeld alsof deze van dezelfde host afkomstig is. Met deze waarde wordt hetzelfde oorsprongsbeleid opgeheven.
Met de waarde allow-top-navigation kan de ingesloten inhoud de inhoud van de bovenste browse-context wijzigen.
En dan is er nog allow-script. Hierdoor mag de ingesloten webpagina JavaScript bevatten die de omvattende pagina kan manipuleren.
Hier is een voorbeeld van hoe zo'n sandbox-instructie eruit kan zien:
<iframe sandbox="allow-same-origin" src="http://www.psd-tutorials.de/"> </iframe>
Je kunt echter ook meerdere waarden toewijzen. Deze moeten dan gescheiden worden door spaties. Hier is nog een voorbeeld:
<iframe sandbox="allow-same-origin allow-forms allow-scripts" src="http://www.psd-tutorials.de/"> </iframe>
iFrames zijn normaal gesproken bedoeld om externe inhoud in te sluiten. Maar deze kunnen ook ingesloten worden.
<iframe src="http://www.psd-tutorials.de/" width="200" height="150" seamless> </iframe>
Dit attribuut heeft wel wat in petto. Zo worden koppelingen in het ingesloten document - als er niets anders is gedefinieerd - weergegeven in het browservenster waarin het iframe-element is gedefinieerd (Bij normaal insluiten worden koppelingen - als er niets anders is gedefinieerd - weergegeven in het iFrame-venster).seamless wordt momenteel alleen ondersteund door Google Canary, de ontwikkelaarsversie van deze browser.
De andere impact heeft betrekking op de stylesheets. Want de stylesheets van het inclusieve bestand zijn ook van toepassing op het ingesloten document (Bij normaal insluiten gelden de stylesheet-bepalingen echter niet).
Een ander attribuut is nieuw toegevoegd. Met srcdoc kan de in te sluiten inhoud direct worden gedefinieerd. Bekijk hier een voorbeeld van:
<iframe sandbox="allow-same-origin allow-forms allow-scripts"
seamless="seamless" srcdoc="
<script>
top.location.href=" http://www.psd-tutorials.de/"
</script>">
</iframe>In dit geval ontbreekt het src-attribuut, waarmee normaal gesproken het bestand dat moet worden ingesloten wordt aangegeven.
De inhoud opgegeven via srcdoc wordt behandeld alsof deze afkomstig is van een externe server. Het valt dus volledig onder het Same Origin-beleid. Dit gedrag is bijvoorbeeld interessant in verband met scriptdefinities. Elke HTML- en JavaScript-code is toegestaan, maar aanhalingstekens en het en-teken moeten worden beschreven met respectievelijk " en &.
Ook kun je hier direct een pagina definiëren en zo de gewenste inhoud weergeven.
<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>
Hierbij hoeft het overigens niet om een volledig HTML-bestand te gaan. Zoiets als dit is natuurlijk ook mogelijk:
<iframe sandbox="allow-same-origin allow-forms allow-scripts" seamless="seamless" srcdoc="<p>PSD-Tutorials.de</p>"> </iframe>
In de browser ziet het er dan als volgt uit:
Dit is dus een normale HTML-syntax, zonder scripts etc.
Nog wat opmerkingen over attributen die tot nu toe werden gebruikt voor visuele vormgeving: zaken als scrolling, marginwidth en marginheight zijn niet langer toegestaan in HTML5. Deze attributen worden vervangen door CSS.
