Et ønske til HTML5

Det kunne være rart, hvis ifame elementet understøttede flow layout. Dvs. automatisk at indstille sin størrelse efter det indhold, der er i den. Eller måske nærmere, at en div havde en src attribut og det der blev hentet udefra, virkede som om det bare var HTML inde i div?en.

Udfordringen i dag

Der findes mange sites, der tilbyder små gadgets eller widgets, du kan indsætte på din side. Jeg skrev fx for nylig om uservoice.com. Når du indsætter sådan en widget, er det typisk noget JavaScript, du inkluderer fra et fremmed site. Når du gør det, har du åbnet for, at det site du inkluderer JavaScriptet fra, kan få fuld kontrol over det website du inkluderer scriptet på. Sikkerheden ryger lige ud af vinduet.

Bedre sikkerhed

En måde at forbedre denne situation på er at gøre som Google gør i Google Wave. I Google Wave kan du indsætte en gadget, der består af vilkårlig HTML og JavaScript. Og for at isolere gadgetkoden, så den ikke kan få fat i andre ting på siden end sig selv, indlejeres denne gadget i en Iframe. Iframes har en sikkerhed indbygget, så man ikke med JavaScript kan få fat i elementer af den side, der inkluderer ifamen. Dvs. du kan forholdsvis sikkert inkludere en iframe på din side, der viser noget fra et fremmed website.

Flow-layout

Udfordringen ved iframes er, at de har en fast bredde og højde. Google har løst dette i Google Wave ved at lave noget JavaScript, der smager på iframen og dynamisk tilretter størrelsen til det, der er i iframen (fx wufoo.com har løst det på samme måde). Det gør, at det virker som om det der er i iframen, faktisk bare er i en almindelig div, der ændrer størrelse efter indhold, såkaldt flow-layout. Der er følgende udfordringer ved denne løsning:

• 1. Det er avanceret kode der skal til for hele tiden at stille iframens størrelse, når indholdet ændrer sig. Under [Google Wave hackathon](/artikel/12107-danske-udviklere-laver-boelgen-for-google-wave) fandt vi da også flere bugs i den implementation, der er i Google Wave. Nogle gange blev iframen for stor, så det var ekstra whitespace. Og nogle gange blev ifamen for lille, så den klippede indholdet, der var i den.
• 2. Alle brugere der har JavaScript slået fra vil få en iframe med fast størrelse (ikke en udfordring for Google Wave, der kræver JavaScript alligevel, men en udfordring for andre gadgets, der understøtter script disabled)
• 3. Nogle gadgets ændrer sig efter hvor meget plads de har at boltre sig på. Det kan blive til noget værre rod, hvor iframens størrelse ændres til at passe til gadget'et, hvorefter gadget'et ændrer sig fordi iframens størrelse er blevet ændret, hvorefter iframen ændres til at passe til gadget'et, hvorefter iframens størrelse ændres til at passe til gadget'et osv.
• 4. Når det handler om styling, skal indholdet i iframen have sine egne definitioner af fx font og baggrundsfarve. Google Wave gør dette for dig, ved at pakke dit gadget ind i sin egen webside, men andre gadgets har ikke denne løsning. Det er ofte ønskeligt at et gadget automatisk passer ind i siden og automatisk benytter samme font og baggrundsfarve som siden er sat op til. Det skal gerne være sådan, at når du ændrer font på websitet, der inkluderer gadget'et, ændres fonten også i gadget'et.

Løsning

Som jeg skrev i indledningen, ville en løsning på dette eventuelt være, at en div får en src attribut. Den webside som src attributten peger på, skulle så hentes ind i maven på div'en. Ligesom at sætte innerHTML. Sikkerhedsmodellen skulle være lige som en iframe, men indholdet skulle layoutes af browseren som om det var indlejret HTML, inde i div'en med src attributten. Det vil betyde, at vi mere sikkert kan inkludere tredieparts gadgets på vores sider, at brugere med JavaScript slået fra også kan få gadgets og at vi nemt kan få gadgets, der passer ind i vores sider, selv når vi skifter font.

Et andet eksempel Jeg har lavet en webapplikation, hvor du kan indlejre et spørgeskema i din blog eller website. Spørgeskemaet består af op til flere sider. Når en blogger skal indlejre spørgeskemaet i sin blog, giver jeg ham/hende en stump HTML og JavaScript, vedkommende kan indsætte, der hvor spørgeskemaet skal være. Spørgeskemaet bruger automatisk samme font som bloggen. Her er et eksempel:

  Men løsningen har et par udfordringer:

1. Brugere der har javascript disabled får en iframe i stedet.
2. Visse blogs, som fx wordpress.com, understøtter ikke, at man indsætter JavaScript i sin blog af sikkerhedsgrunde. Her bruger jeg også en Iframe i stedet.

Når jeg bruger en iframe, kan jeg ikke ændre størrelsen på den, når der skiftes side. Derfor er jeg nød til at sætte iframens størrelse så den passer til den længste side i spørgeskemaet. Alle de andre sider får derfor unødigt whitespace. Derudover bliver fonten og baggrundsfarven altid sat til den samme default, Verdana og hvid. Det er jo ikke sikkert, at Verdana og hvid passer særligt godt ind i layoutet på bloggen. Du kan prøve at slå JavaScript fra i din browser og hente dette blogindlæg igen, for at se problemet selv. Det alle gadget-folk har brug for, er en iframe med flow-layout eller en src attribut på div'er. Eller kan du se en anden smartere løsning på problemet'

**UPDATE 25. september 2009, resultat af afstemning so-far.**

Har du nogensinde inkluderet JavaScript fra en trediepart, på din blog eller website?

Kan du se en idé i, at have iframes med flow-layout? 

Hvad synes du om sikkerheden i at inkluderer JavaScript fra trediepart?

63 stemmer, gennemsnit: Tvivlsom