iFramet ovat olleet osa HTML-standardia jo pitkään. HTML 4.0:ssa ne oli kuitenkin pakattu yhteen jo nyt hylättyjen Framien kanssa Frameset-HTML-versioon. Framet eivät enää ole osa HTML5:ttä, mutta upotetut Framet (iFramet) kylläkin.
iFramen avulla voidaan upottaa muita verkkosivustoja. Selain renderöi siis toisen HTML-tiedoston nykyisen verkkosivun sisällä. iFramen ikkunan sisältöä voidaan muotoilla yksilöllisesti.
Kun puhutaan iFrameista, on tietysti syytä tarkastella erikseen tämän HTML-tekniikan turvallisuutta. Ongelmaksi voi muodostua haittaohjelma, jota voi huomaamatta injektoida verkkosivuille iFramen kautta. Se on luonnollisesti valtava ärsytys.
HTML5:ssä on kuitenkin otettu käyttöön vastaavia turvamekanismeja, joiden avulla nämä ongelmat voidaan ohittaa. Enemmän siitä tämän opetusohjelman myöhemmissä osissa. Ennen iFramen käyttöä on kuitenkin syytä harkita, että ne voivat potentiaalisesti aiheuttaa vaaran, erityisesti koska uusia turvaominaisuuksia ei vielä tueta kaikkien selainten toimesta.
HTML5:ssä iFramet ovat siis vakio-osa ja tuovat mukanaan joitakin lisäattribuutteja. Seuraava esimerkki näyttää, miten iFramet voidaan määritellä.
<iframe src="http://www.psd-tutorials.de/" width="420" height="350"> <a href="http://www.psd-tutorials.de/">PSD-Tutorials.de</a> </iframe>
Selaimessa tulos näyttää seuraavalta:
iframe-elementille annetaan src-ominaisuus. Tämä src sisältää arvon, joka määrittelee näytettävän sivun. Tämä voi olla paikallinen tiedosto. Mahdollista on myös – kuten esimerkissä – ulkoisen resurssin kutsu.width- ja height-ominaisuuksilla määritetään iFramen leveys ja korkeus. Jos sisällytetty sisältö on suurempi kuin iFramen määritetty koko, näytetään vierityspalkit.
Avautuvan ja sulkevan <iframe>-tagin välillä voidaan määritellä mitä tahansa sisältöä. Tämä on kuitenkin näkyvissä vain sellaisissa selaimissa, jotka eivät tunnista iframe-elementtiä.
HTML5:ssä on esitelty joitakin uusia attribuutteja iFrameille, joista suurin osa liittyy niin kutsuttuun Sandbox-käyttäytymiseen.
Selaimissa Same Origin Policy varmistaa, että upotettua verkkosivua ei voi manipuloida sen näyttämisen aikana. Tämä turvatoiminto on järkevä. Siitä huolimatta se ei aina ole ihanteellinen. Siksi HTML5:ssä on esitelty sandbox-ominaisuus, jonka avulla selaimelle voidaan nimenomaisesti ilmoittaa, mitä oikeuksia ulkoiselta sivulta iFrameen upotetulle sisällölle tulisi antaa.
<iframe sandbox="allow-forms" src="getusercontent.cgi?id=12193"> </iframe>
iFramet, jotka on varustettu sandbox-ominaisuudella, eivät pääse käsiksi upotetun verkkosivun DOM:iin. Niiden ei myöskään ole sallittua suorittaa skriptejä tai tallentaa evästeitä. Nämä rajoitukset voidaan kumota erilaisilla Sandbox-arvoilla.sandbox-ominaisuudelle voidaan määrittää erilaisia arvoja. allow-forms-arvon avulla upotettu verkkosivu voi hankkia tietoja käyttäjältä lomakkeiden kautta. Käyttäjät eivät välttämättä tiedä, että lomake ei ole nykyiseltä sivulta peräisin.
Sen sijaan jos asetetaan arvo allow-some-origin, upotettua verkkosivua käsitellään niin, kuin se olisi samasta isännästä peräisin. Tämä arvo kumoaa Same Origin Policy:n.
Arvo allow-top-navigation sallii upotetun sisällön muuttaa ylimmän selauskontekstin sisältöä.
Lisäksi on olemassa allow-script. Tämän avulla upotettuun verkkosivustoon voidaan sisällyttää JavaScriptiä, joka voi manipuloida upottavaa sivustoa.
Alla esimerkki siitä, miltä vastaava sandbox-käsky voisi näyttää:
<iframe sandbox="allow-same-origin" src="http://www.psd-tutorials.de/"> </iframe>
Samoin voit kuitenkin antaa useampia arvoja. Nämä erotetaan toisistaan välilyönneillä. Tässäkin esimerkki:
<iframe sandbox="allow-same-origin allow-forms allow-scripts" src="http://www.psd-tutorials.de/"> </iframe>
iFramet on yleensä tarkoitettu ulkoisten sisältöjen upottamiseen. Vaihtoehtoisesti ne voidaan kuitenkin sisällyttää.
<iframe src="http://www.psd-tutorials.de/" width="200" height="150" seamless> </iframe>
Tämä attribuutti on varsin tärkeä. Siten upotetussa dokumentissa olevat linkkikohteet – jos mitään muuta ei ole määritetty – näytetään siinä selainikkunassa, jossa iframe-elementti on määritelty. (Normaalissa upotuksessa linkkikohteet – ellei toisin ole määritelty – näytetään iFramen ikkunassa).seamless-ominaisuutta tukee tällä hetkellä vain Google Canary, tämän selaimen kehittäjäversio.
Toinen vaikutus koskee tyylitiedostoja. Sillä sisältävän tiedoston tyylit ovat myös voimassa sisällytetylle dokumentille. (Normaalissa upotuksessa tyylitiedot eivät sen sijaan vaikuta).
Uusi ominaisuus on myös lisätty. srcdoc-avulla voidaan määritellä suoraan sisällytettävä sisältö. Katso seuraava esimerkki:
<iframe sandbox="allow-same-origin allow-forms allow-scripts"
seamless="seamless" srcdoc="
<script>
top.location.href=" http://www.psd-tutorials.de/"
</script>">
</iframe>Tässä tapauksessa puuttuu siis src-ominaisuus, jolla yleensä annetaan liitettävä tiedosto.
Sisältö, joka on määritetty srcdoc:llä, käsitellään kuin se olisi peräisin ulkoiselta palvelimelta. Näin ollen se noudattaa täysin Same Origin Policya. Tätä käyttäytymistä voidaan pitää mielenkiintoisena esimerkiksi skriptimääritysten yhteydessä. Siihen sallitaan mikä tahansa HTML- ja JavaScript-koodi. On kuitenkin huomioitava, että lainausmerkit ja ja-merkki on korvattava nimetyillä merkeillä " ja &.
Voit muuten määritellä suoran sivun täällä ja näin tulostaa halutun sisällön.
<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>
Se ei kuitenkaan tarvitse olla täysin HTML-tiedosto. Myös tällainen on tietysti mahdollista:
<iframe sandbox="allow-same-origin allow-forms allow-scripts" seamless="seamless" srcdoc="<p>PSD-Tutorials.de</p>"> </iframe>
Selaimessa tämä näyttää seuraavalta:
Tämä on siis täysin normaalia HTML-syntaksia, ilman skriptejä jne.
Muutama huomautus attribuuteista, joita on tähän asti käytetty visuaaliseen muotoiluun: asioita kuten scrolling, marginwidth ja marginheight eivät enää ole sallittuja HTML5:ssä. Nämä attribuutit korvataan CSS:llä.
