Iframe magasságának “automatikus” állítása

Amikor egy iframe objektumot az oldalba ágyazunk, gyakran merül fel igényként hogy az iframe-be töltött oldal magasságának függvényében az iframe dobozának magassága is változzon. Ez azonban biztonsági okokból nem lehetséges – tartja a hit. Ez azonban nem teljesen van így, megoldható ugyanis a dolog. Olyan – vagy hasonló – viszont nincs, hogy <iframe height=”auto” src=”"/>…

Mindenekelőtt, a biztonsági probléma csak akkor merül fel, ha nem ugyanazon domainről került a másik oldal beágyazásra, mint a beágyazó oldal. Persze ez legtöbbször fennáll.

Egy iframe elem az oldalba helyezésekor valójában egy másik böngésző ablakot helyezünk el arra a pontjára az oldalnak – legalábbis régebben a böngészők így oldották meg a dolgot, és a viselkedés azóta nem is változott. Biztonsági szempontból ha két különböző domainen van a két oldal, azok nem tudnak hozzáférni egymás elemeihez, így a szülő nem tudja lekérdezni azt sem, hogy mekkora a beágyazott oldal magassága. Ha ezt megtehetné, lehet, hogy egyéb érzékeny adathoz is hozzáférhetne, sőt, extrém körülmények között maga az oldal magassága is érzékeny adat lehet. Van azonban egy trükk, amivel mégis meg lehet oldani a kommunikációt, ráadásul biztonságosan.

A trükk egy másik iframe, esetleg egy kép. A konkrét megoldást az iframe-en keresztül magyarázom el, a képes és egyéb megoldás házi feladat. A beágyazott iframe-be húzzunk be egy másik iframe-et, a szülő oldalról. Így most már három oldalunk van, a legkülső, az iframe-et beágyazó, a középső, aminek a magasságát meg szeretnénk tudni, és a legbelső, amit a középső töltött be. Mivel a legkülső és legbelső oldalak azonos domainen vannak, tudnak kommunikálni egymással, és el tudják érni egymás adatait. Tehát ha megoldjuk, hogy a középső oldal/iframe átadja a benne levő oldal magasságát a legbelső oldalnak, egy ott levő JavaScript már tudja módosítani a beágyazott iframe magasságát eszerint. Persze a középső és legbelső oldalak, a két iframe sem egy domainen van, azonban a középső oldal többféleképpen át tud azért adni a legbelsőnek információkat, vagy annak URL-jén keresztül GET, vagy elküldve egy formot POST, vagy pedig az URL-ben található hash (#) rész segítségével. A belső oldalban lehet egy kis JavaScript, ami átveszi ezt az információt (GET és POST esetén generálhatjuk a JavaScriptet, GET-es és hash-es kommunikáció esetén az oldal maga lehet ugyanaz a kód, de limitáltabb az átvihető adattartalom), és átadja azt a legkülső oldalnak, akár közvetve beállítva az ott található iframe magasságát, akár meghívva egy függvényt onnan.

Egyszerű? Talán sem megérteni, sem elsőnek kivitelezni, azoban ha végiggondoljuk, nem olyan nagyon ördöngős a megoldás. Más megoldás nem nagyon ismert, lehet még a háttérszínekkel játszani, hogy ne tűnjön fel, hogy meddig tart az iframe, s elég nagy magasságúra beállítani. Ha valakinek van egyéb trükkje, azért kiváncsi lennék rá.

Lábjegyzetként érdemes lehet megjegyezni, hogy ennek a biztonsági megoldásnak köszönhető, hogy például a Netvibes biztonságosan képes futtatni UWA kódokat, mivel azok nem tudnak a felhasználó egyéb beállításaihoz semmilyen módon hozzáférni, ha nem az eredeti, hanem egy nem netvibes.com domainről lettek behívva. Más hasonló oldalak is használják ezt a trükköt a biztonság érdekében.