iFrames har længe været en del af HTML-standarden. I HTML 4.0 blev de dog pakket sammen med de nu foragtede rammer ind i ramme-HTML-varianten. Rammer bliver ikke længere betragtet i HTML5, men de indlejrede rammer (iFrames) gør dog det.
Med iFrames kan andre websteder integreres. Browseren render således en yderligere HTML-fil inden i det aktuelle websted. Indholdet af iFrame-vinduet kan formateres individuelt.
Når emnet drejer sig om iFrames, er det naturligvis nødvendigt at se nærmere på sikkerheden af denne HTML-teknologi. Et problem her er ondsindet kode, der kan sniges ubemærket ind i websteder via iFrames. Det er naturligvis en enorm irritation.
I HTML5 er der dog indført passende sikkerhedsforanstaltninger, som kan omgå disse problemer. Mere om dette følger senere i denne vejledning. Før brug af iFrames skal man dog stadig overveje, at de potentielt udgør en risiko, især fordi de nye sikkerhedsattributter langt fra er understøttet af alle browsere endnu.
I HTML5 er iFrames derfor en fast del af standarden og bringer hermed nogle ekstra attributter med sig. Det følgende eksempel viser, hvordan iFrames kan defineres.
<iframe src="http://www.psd-tutorials.de/" width="420" height="350"> <a href="http://www.psd-tutorials.de/">PSD-Tutorials.de</a> </iframe>
I browseren ser resultatet sådan ud:
Til iframe-elementet tildeles attributtet src. Denne src indeholder siden, der skal vises. Det kan være en lokal fil. Det er også muligt – som vist i eksemplet – at kalde en ekstern ressource.
Gennem de to attributter width og height bestemmes bredden og højden af iFrames. Hvis det indlejrede indhold er større end den angivne størrelse af iFrames, vises der rullebjælker.
Mellem åbnende og lukkende <iframe>-tags kan der defineres vilkårligt indhold. Dette indhold vises dog kun i browsere, der ikke kender iframe-elementet.
I HTM5 bliver der introduceret nogle nye attributter med hensyn til iFrames, som primært har noget at gøre med såkaldt Sandbox-opførsel.
I browsere sørger Same Origin Policy for, at en indlejret hjemmeside ikke kan manipuleres under visningen. Denne sikkerhedsfunktion er absolut fornuftig. Ikke desto mindre er den ikke altid ideel. Derfor blev attributtet sandbox indført i HTML5, hvorigennem browsere eksplicit kan informeres om, hvilke tilladelser der skal gives til indholdet, der er indlejret fra en ekstern side i en iFrame.
<iframe sandbox="allow-forms" src="getusercontent.cgi?id=12193"> </iframe>
iFrames, der er udstyret med attributtet sandbox, har ikke adgang til DOM i den indlejrede hjemmeside. Derudover må de ikke køre scripts eller gemme cookies. Disse begrænsninger kan ophæves ved hjælp af forskellige sandbox-værdier.
Forskellige værdier kan tildeles attributtet sandbox. Gennem allow-forms kan den indlejrede hjemmeside være i stand til at indhente oplysninger fra brugeren gennem formularen. Brugere er ikke klar over, at formularen ikke stammer fra den aktuelle side.
Hvis man derimod angiver allow-some-origin, behandles den indlejrede hjemmeside, som om den stammer fra samme vært. Med denne værdi ophæves Same Origin Policy.
Værdien allow-top-navigation tillader det indlejrede indhold at ændre indholdet af den øverste browsing-kontekst.
Og så er der allow-script. Dette tillader, at der i den indlejrede hjemmeside kan være JavaScript, der kan manipulere den indlejrende side.
Her er et eksempel på, hvordan en tilsvarende sandbox-instruktion kunne se ud:
<iframe sandbox="allow-same-origin" src="http://www.psd-tutorials.de/"> </iframe>
Men I kan også tildele flere værdier. Disse skal adskilles af mellemrum. Her er et yderligere eksempel:
<iframe sandbox="allow-same-origin allow-forms allow-scripts" src="http://www.psd-tutorials.de/"> </iframe>
iFrames er normalt designet til at integrere eksterne indhold. Alternativt kan de dog også inkluderes.
<iframe src="http://www.psd-tutorials.de/" width="200" height="150" seamless> </iframe>
Denne attribut har virkelig indflydelse. Så referencemålene i det inkluderede dokument – medmindre der er defineret noget andet – vises i browseren, hvor iframe-elementet blev defineret. (Ved normal indlejring vises referencemålene – medmindre andet er defineret – i iFrame-vinduet).seamless understøttes i øjeblikket kun af Google Canary, altså udviklerversionen af denne browser.
Den anden effekt vedrører arkene. Fordi arkene i den inkluderende fil også gælder for det inkluderede dokument. (Ved normal indlejring er stylesheets-oplysningerne imidlertid ikke gældende).
Der er kommet en anden attribut til. Med srcdoc kan man direkte definere det indhold, der skal inkluderes. Se et eksempel herpå:
<iframe sandbox="allow-same-origin allow-forms allow-scripts"
seamless="seamless" srcdoc="
<script>
top.location.href=" http://www.psd-tutorials.de/"
</script>">
</iframe>I dette tilfælde mangler src-attributten, som normalt angiver den fil, der skal inkluderes.
Indholdet angivet via srcdoc bliver behandlet, som om det kommer fra en fremmed server. Det er derfor underlagt Same Origin Policy i fuldt omfang. Dette adfærd er interessant f.eks. i forbindelse med script-definitioner. Tilladt er al HTML- og JavaScript-kode. Dog skal anførselstegn og ampersand angives med de specificerede tegn " og &.
I kan i øvrigt også direkte definere en side og dermed vise det ønskede indhold.
<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>
Det behøver i øvrigt ikke at være en komplet HTML-fil. Også noget som dette er naturligvis muligt:
<iframe sandbox="allow-same-origin allow-forms allow-scripts" seamless="seamless" srcdoc="<p>PSD-Tutorials.de</p>"> </iframe>
I browseren ser det sådan ud:
Dette er blot almindelig HTML-syntaks, uden scripts osv.
Nogle bemærkninger om attributterne, der hidtil har været brugt til visuel formatering: Ting som scrolling, marginwidth og marginheight er ikke længere tilladt i HTLM5. Disse attributter erstattes af CSS.
