Attribut för innehåll, säkerhet och design för IFRAME

De iframe element bäddar in andra webbsidor direkt i den aktuella sidan. HTML5 introducerar tre nya attribut till detta element för att hantera säkerhets- och användbarhetsproblemen för HTML4 iframe genomförande.

Attributet "sandlåda"

De sandlåda attribut för iframe element är en användbar säkerhetsfunktion för iframes. När du placerar den i en iframe element, tillåter användaragenten funktioner som kan utgöra en säkerhetsrisk för webbplatsen och dess användare.

Till exempel:

instruerar webbläsaren att inte tillåta alla funktioner som kan utgöra en säkerhetsrisk - så inga plugins, formulär, skript, utgående länkar, småkakor, lokal lagring och åtkomst till samma webbplats.

Använd sedan sandlåda nyckelordsvärden, återaktivera några av funktionerna. Dessa nyckelord är:

  • tillåt-formulär: Tillåt inlämning av formulär.
  • tillåta samma ursprung: Tillåt skript att få åtkomst till innehåll som cookies från samma ursprungsdomän.
  • tillåtelseskript: Låt skript köras i denna IFRAME.
  • allow-top-navigation: Tillåt iframe-länkar och skript till "_top" -målet
instagram viewer

Ställ inte in båda tillåtelseskript och tillåta samma ursprung nyckelord tillsammans på samma iframe. Om du gör det kan den inbäddade sidan sedan ta bort sandlåda attribut, vilket förnekar dess säkerhetsfördelar.

Attributet 'srcdoc'

De srcdoc attribut ger webbdesignern mer kontroll över iframes samt mer säkerhet. Istället för att länka till en webbsida på en annan URL, placerar webbdesignern den HTML som ska visas i en iframe inuti srcdoc attribut.

Genom att placera HTML som skapas av en otillförlitlig källa, till exempel ett formulär, i en iframe du kan sandlåda det opålitliga innehållet och ändå visa det på sidan. Bloggkommentarer är ett exempel. De flesta bloggar erbjuder endast ett begränsat antal HTML-taggar som kommentatorer kan använda i sina kommentarer. Men genom att placera dessa kommentarer i en sandlåda iframe använda srcdoc attribut kan kommentarerna vara mer robusta samtidigt som de fortfarande skyddar webbplatsen som helhet.

Säkerhet och Iframes

Ovanstående två attribut ger säkerhet för din iframe element, men de är inte ett försvar mot alla skadliga webbplatser. Om den skadliga webbplatsen kan övertyga dina besökare att få åtkomst till det fientliga innehållet direkt (t.ex. genom att skriva in webbadressen i sin webbläsare) kan de fortfarande attackeras.

Om du kan, ställ in innehållet i sandlådan iframe som den text / html-sandlåda MIME-typ.

Det "sömlösa" attributet

De sömlös attribut är ett booleskt attribut som ber webbläsaren att visa iframe som om det var en del av förälderdokumentet. Om du vill ha din iframe för att visa sömlöst, inkludera bara detta attribut i elementet:

Men att göra iframe sömlös är mer än bara utseendet, det är också hur sidan interagerar med ramen. Några tips:

  • Länkar i iframe öppnas i föräldrafönstret såvida inte iframe sidan har målet "_SELF".
  • CSS i iframe kommer att läggas till i kaskaden av hela dokumentet.
  • Rotelementet i iframe sidan anses vara barn till iframe.
  • Bredden och höjden på iframe ställs in på ett liknande sätt som hur andra element på blocknivå skulle vara inställd.
  • När förälderdokumentet visas av ett talåtergivningsverktyg som en skärmläsare, kommer iframe skulle läsas utan att meddela det som ett separat dokument.

Eventuella skript i förälderdokumentet påverkar iframe dokument på samma sätt. Till exempel, om ett skript listade alla ramar på sidan, länkar i iframe skulle också listas.

Med andra ord, sömlös attribut gör mycket mer än bara att ta bort gränserna från iframe. Om du ska ställa in en iframe För att vara sömlös bör du vara mycket säker på innehållet så att du inte lägger till någon säkerhetsrisk på din webbplats genom att bädda in en skadlig webbplats.