HTML-Dokumente einbinden: object oder iframe

Dank verbesserter Sicherheitsvorkehrungen ist iframe ein vollwertiges Mitglied in HTML5.

Der Plus-Punkt des object-Tags waren die param-Tags, die innerhalb des object-Tags die Aktionen des Browsers lenken, auch wenn der Browser das Objekt gar nicht kennt. object war als Tag für alle Arten von Medien gedacht: Ob einfaches Bild oder SVG oder Flash Video oder ganze HTML-Seite.

iframe ist auf das Anzeigen von HMTL-Seiten innerhalb eines internen Fensters spezialisiert. Sowohl die aufrufende Webseite als auch das darin liegende frame können ihr eigenes CSS und Javascript mitbringen und kommen der Hostseite dabei nicht ins Gehege.

Warum das iframe-Tag verfemt wurde

In XHTML im Strict-Modus gilt das <iframe>-Tag als »deprecated«, als veraltert und unerwünscht, das object-Tag hingegen nicht. Das wirft sofort die Frage auf, warum das <object>-Tag erlaubt war, das <iframe>-Tag hingegen ausgegrenzt wurde.

Das iframe-Tag galt in XHTML als unsicher, da in einem iframe Elemente eingebunden werden können, die nicht von derselben Domaine kommen. Der Browser konnte nicht ohne Weiteres prüfen, ob der Inhalt des iframes aus einer vertrauenswürdigen Quelle stammt. iframes könnten also z.B. eine Tür für das gefürchtete Cross Side Scripting öffnen.

Beim object-Tag gibt es diese Bedenken nicht – darum also war das object-Tag weiterhin drin, iframe hingegen raus.

HTML5: object oder iframe?

In HTML5 darf iframe-Tag wieder zurück in die HTML-Seite. Mit neuen Attributen für iframe (z.B. sandbox) kann sich das aufrufende HTML-Dokument gegen Schädlinge abgeschotten. Da sich die Bastion des object-Tags, der Einsatz von Flash-Video, zugunsten des video-Tags aufgelöst hat, ist nun das object-Tag im Niedergang, iframe hingegen hat als Verpackung für youTube-Videos einen Karrieresprung gemacht.

Die Syntax für iframe, object und auch für das wiedererweckte embed-Tag ist nahezu gleich. iframe erlaubt allerdings seit HTML5 keinen alternativen Inhalt zwischen öffnendem und schließenden Tag, embed hat kein schließendes Tag.

<object data="airplane.svg" width="400" height="240"></object>
<iframe src="airplane.svg" width="400" height="240" sandbox></iframe>
<embed src="airplane.svg" width="400" height="240">

Sowohl bei object, iframe als auch bei embed wirkt CSS padding mit %-Werten für die Anpassung an den Breakpoint.

Von »außen« lassen sie sich kaum voneinander unterscheiden (oben: object, iframe, embed), allerdings bringt iframe von Haus aus border rundherum mit.

Das iframe-Element in der Mitte zwischen object und embed ist durch das Sandbox-Attribut vor der Ausführung von Skripten geschützt: Da bleibt Javascript außen vor. Kein Flieger durchkreuzt per Javascript das iframe-Element, aber bei object und embed wirkt Javascript.

embed ist ein historisches HTML-Tag aus der Zeit der Browserkriege und wurde aus Gründen der Kompatibilität zu ganz ganz alten Browsern in HTML5 wieder aufgenommen.

Es spricht nichts dagegen, object für PDF, SVG, HTML-Dokumente und interaktive Animationen von derselben Domain einzusetzen. Das object-Tag erlaubt alternativen Inhalt – z.B. für den Fall, dass Medien nicht geladen werden können.

Bei fremden Domains ist immer ein iframe angebracht, da es einen besseren Schutz der aufrufenden Seite bietet. Generell ist iframe heute die Technik der Wahl, denn es bietet die höhere Sicherheit, mehr Funktionen und kann dynamisch entscheiden, welche Medien eingesetzt werden.

Refused to display

Die meisten Webserver schützen den Inhalt von Webseiten und Medien vor dem Einbinden mit iframe, embed oder object in Webseiten von Dritten.

Refused to display 'https://xxxxxxxx' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

Für den Aufruf externer Medien wie z.B. bei youTube-Videos muss der externe Server den Zugriff erlauben, z.B. einem Eintrag in die Konfigurationsdatei des Servers.

Header always unset X-Frame-Options