Von object zu iframe — allgemeine Einbettungstechnologien

Eine kurze Geschichte der Einbettung

Vor langer Zeit im Web war es beliebt, Frames zum Erstellen von Websites zu verwenden — kleine Teile einer Website, die in einzelnen HTML-Seiten gespeichert waren. Diese wurden in ein Hauptdokument eingebettet, das als Frameset bezeichnet wurde und mit dem Sie den Bereich auf dem Bildschirm festlegen konnten, den jeder Frame ausfüllte, ähnlich wie beim Festlegen der Größe von Spalten und Zeilen einer Tabelle. Mitte bis Ende der 90er Jahre galten sie als besonders cool, und es gab Hinweise darauf, dass die Aufteilung einer Webseite in kleinere Abschnitte wie diese bessere Downloadgeschwindigkeiten ermöglichte — besonders deutlich, da Netzwerkverbindungen damals so langsam waren. Sie hatten jedoch viele Probleme, die alle Vorteile bei weitem überwogen, als die Netzwerkgeschwindigkeiten schneller wurden; daher werden sie heute nicht mehr verwendet.

Etwas später (Ende der 90er, Anfang der 2000er) wurden Plugin-Technologien wie Java Applets und Flash sehr beliebt — sie ermöglichten Webentwicklern, umfangreiche Inhalte wie Videos und Animationen in Webseiten einzubetten, die allein mit HTML nicht verfügbar waren. Das Einbetten dieser Technologien erfolgte über Elemente wie <object> und das weniger verwendete <embed>, und sie waren damals sehr nützlich. Seitdem sind sie aufgrund vieler Probleme, darunter Barrierefreiheit, Sicherheit und Dateigröße, aus der Mode gekommen. Heutzutage haben die großen Browser die Unterstützung für Plugins wie Flash eingestellt.

Schließlich erschien das Element <iframe> (zusammen mit anderen Methoden zum Einbetten von Inhalten, etwa <canvas>, <video> usw.). Es ermöglicht, ein vollständiges Webdokument in ein anderes einzubetten, als wäre es ein <img> oder ein ähnliches Element, und wird heute regelmäßig verwendet.

Nachdem die Geschichtsstunde nun beendet ist, gehen wir weiter und sehen uns an, wie einige davon verwendet werden.

Mit klassischen Einbettungsverwendungen experimentieren

In diesem Artikel beginnen wir direkt mit einer Übung, um Ihnen sofort eine Vorstellung davon zu geben, wofür Einbettungstechnologien nützlich sind. Die Online-Welt kennt YouTube sehr gut, aber viele Menschen wissen nichts über einige der dort verfügbaren Freigabemöglichkeiten.

1. Öffnen Sie zunächst den MDN Playground.
2. Sehen wir uns nun an, wie YouTube uns ermöglicht, mit einem <iframe> ein Video in jede beliebige Seite einzubetten.
   1. Gehen Sie zu YouTube und suchen Sie ein Video aus, das Ihnen gefällt.
   2. Unter dem Video finden Sie eine Schaltfläche Teilen — wählen Sie diese aus, um die Freigabeoptionen anzuzeigen.
   3. Wählen Sie die Schaltfläche Einbetten. Sie erhalten dann etwas <iframe>-Code — kopieren Sie ihn.
   4. Fügen Sie ihn im Bereich HTML des Playground ein und sehen Sie sich das Ergebnis in der Ausgabe an.
3. Als Zusatzaufgabe können Sie auch versuchen, eine Google Map im Playground einzubetten:
   1. Gehen Sie zu Google Maps und suchen Sie eine Karte aus, die Ihnen gefällt.
   2. Klicken Sie oben links in der Benutzeroberfläche auf das „Hamburger-Menü“ (drei horizontale Linien).
   3. Wählen Sie die Option Karte teilen oder einbetten.
   4. Wählen Sie die Option Karte einbetten. Sie erhalten dann etwas <iframe>-Code — kopieren Sie ihn.
   5. Fügen Sie ihn im Bereich HTML des Playground ein und sehen Sie sich das Ergebnis in der Ausgabe an.

Wenn Sie einen Fehler machen, können Sie den Playground jederzeit über die Schaltfläche Zurücksetzen zurücksetzen.

Webseiten mithilfe von iframes einbetten

Das war einfach und unterhaltsam, oder? Elemente vom Typ <iframe> dienen dazu, andere Webdokumente in das aktuelle Dokument einzubetten. Das eignet sich hervorragend, um Inhalte von Drittanbietern in Ihre Website einzubinden, über die Sie möglicherweise keine direkte Kontrolle haben und für die Sie keine eigene Version implementieren möchten — etwa Videos von Online-Videoanbietern, Kommentarsysteme wie Disqus, Karten von Online-Kartenanbietern, Werbebanner usw. Selbst die live bearbeitbaren Beispiele, die Sie in diesem Kurs verwendet haben, werden mit <iframe>s umgesetzt.

Bevor wir uns mit der Verwendung von <iframe>-Elementen befassen, sollten Sie einige Sicherheitsbedenken kennen. Angenommen, Sie möchten das MDN-Glossar mit dem Element <iframe> in eine Ihrer Webseiten einfügen. Dann könnten Sie etwas wie das nächste Codebeispiel versuchen. Wenn Sie den folgenden Code zu einer Ihrer Seiten hinzufügen würden, könnten Sie überrascht sein, statt der Glossarseite eine Fehlermeldung zu sehen:

<iframe
  src="https://developer.mozilla.org/en-US/docs/Glossary"
  width="100%"
  height="500"
  allowfullscreen
  sandbox>
</iframe>

iframe {
  border: none;
}

Wenn Sie einen Blick in die Konsole Ihres Browsers werfen, sehen Sie eine Fehlermeldung wie die folgende:

Refused to display 'https://developer.mozilla.org/' in a frame because it set 'X-Frame-Options' to 'deny'.

Der Abschnitt Sicherheitsbedenken unten erläutert ausführlicher, warum Sie diesen Fehler sehen. Zunächst sehen wir uns jedoch an, was unser Code bewirkt.

Das Beispiel enthält die wesentlichen Grundlagen, die für die Verwendung eines <iframe> erforderlich sind:

border: none

Bei Verwendung wird das <iframe> ohne umgebenden Rahmen angezeigt. Andernfalls zeigen Browser <iframe>s standardmäßig mit einem umgebenden Rahmen an, was im Allgemeinen unerwünscht ist.

allowfullscreen

Wenn gesetzt, kann das <iframe> mithilfe der Fullscreen API im Vollbildmodus angezeigt werden. Dies geht etwas über den Umfang dieses Artikels hinaus.

src

Dieses Attribut enthält, wie bei <video>/<img>, einen Pfad, der auf die URL des einzubettenden Dokuments verweist.

width und height

Diese Attribute geben die gewünschte Breite und Höhe des iframe an.

sandbox

Dieses Attribut, das in etwas moderneren Browsern als die übrigen <iframe>-Funktionen funktioniert (z. B. IE 10 und höher), fordert erhöhte Sicherheitseinstellungen an; im nächsten Abschnitt erfahren Sie mehr darüber.

Sicherheitsbedenken

Oben haben wir Sicherheitsbedenken erwähnt — gehen wir nun etwas ausführlicher darauf ein. Wir erwarten nicht, dass Sie all diese Inhalte beim ersten Mal vollständig verstehen; wir möchten Sie lediglich auf dieses Thema aufmerksam machen und Ihnen eine Referenz bieten, zu der Sie zurückkehren können, wenn Sie mehr Erfahrung sammeln und die Verwendung von <iframe>s in Ihren Experimenten und Ihrer Arbeit in Betracht ziehen. Außerdem gibt es keinen Grund, Angst zu haben und <iframe>s nicht zu verwenden — Sie müssen nur vorsichtig sein. Lesen Sie weiter …

Browserhersteller und Webentwickler haben auf die harte Tour gelernt, dass iframes ein häufiges Ziel — der offizielle Begriff lautet Angriffsvektor — für böswillige Personen im Web sind, oft als Hacker oder genauer als Cracker bezeichnet. Sie können damit Ihre Webseite böswillig verändern oder Menschen dazu verleiten, etwas zu tun, das sie nicht möchten, etwa sensible Informationen wie Benutzernamen und Passwörter preiszugeben. Deshalb haben Spezifikationsingenieure und Browserentwickler verschiedene Sicherheitsmechanismen entwickelt, um <iframe>s sicherer zu machen, und es gibt außerdem bewährte Vorgehensweisen, die Sie beachten sollten — einige davon behandeln wir im Folgenden.

Zunächst jedoch ein kurzes Beispiel: Versuchen Sie, das oben gezeigte vorherige Beispiel in Ihren Browser zu laden — Sie können es live auf GitHub finden und auch den Quellcode ansehen. Statt der erwarteten Seite werden Sie wahrscheinlich eine Meldung wie „Ich kann diese Seite nicht öffnen“ sehen. Wenn Sie sich die Konsole in den Browser-Entwicklerwerkzeugen ansehen, wird eine Meldung angezeigt, die Ihnen erklärt, warum. In Firefox erhalten Sie etwa eine Meldung wie Das Laden von „https://developer.mozilla.org/de/docs/Glossary“ in einem Frame wird durch die auf „DENY“ gesetzte Direktive „X-Frame-Options“ verweigert. Dies liegt daran, dass die Entwickler von MDN auf dem Server, der die Webseiten bereitstellt, eine Einstellung vorgenommen haben, die verhindert, dass die Seiten in <iframe>s eingebettet werden können. Siehe unten CSP-Direktiven konfigurieren. Das ist sinnvoll — eine vollständige MDN-Seite ergibt wenig Sinn, wenn sie in andere Seiten eingebettet wird, es sei denn, Sie möchten sie auf Ihrer Website einbetten und als Ihre eigene ausgeben oder versuchen, über Clickjacking Daten zu stehlen. Beides sind sehr schlechte Dinge. Außerdem würde die zusätzliche Bandbreite Mozilla viel Geld kosten, wenn alle damit beginnen würden.

Nur einbetten, wenn es notwendig ist

Manchmal ist es sinnvoll, Inhalte von Drittanbietern einzubetten — etwa YouTube-Videos und Karten. Sie können sich jedoch viel Ärger ersparen, wenn Sie Drittanbieterinhalte nur dann einbetten, wenn es unbedingt erforderlich ist. Eine gute Regel für die Websicherheit lautet: „Man kann nie zu vorsichtig sein. Wenn Sie es erstellt haben, überprüfen Sie es trotzdem noch einmal. Wenn jemand anderes es erstellt hat, gehen Sie davon aus, dass es gefährlich ist, bis das Gegenteil bewiesen ist.“

Neben der Sicherheit sollten Sie sich auch über Fragen des geistigen Eigentums bewusst sein. Die meisten Inhalte sind urheberrechtlich geschützt, offline wie online, selbst Inhalte, bei denen Sie es möglicherweise nicht erwarten würden — beispielsweise die meisten Bilder auf Wikimedia Commons. Zeigen Sie niemals Inhalte auf Ihrer Webseite an, sofern sie Ihnen nicht gehören oder die Eigentümer Ihnen nicht schriftlich und eindeutig die Erlaubnis dazu erteilt haben. Die Strafen für Urheberrechtsverletzungen sind schwerwiegend. Auch hier gilt: Man kann nie zu vorsichtig sein.

Wenn der Inhalt lizenziert ist, müssen Sie die Lizenzbedingungen einhalten. Beispielsweise sind die Inhalte auf MDN unter CC-BY-SA lizenziert. Das bedeutet, dass Sie uns ordnungsgemäß nennen müssen, wenn Sie unsere Inhalte zitieren, selbst wenn Sie wesentliche Änderungen vornehmen.

HTTPS verwenden

HTTPS ist die verschlüsselte Version von HTTP. Sie sollten Ihre Websites nach Möglichkeit über HTTPS bereitstellen:

1. HTTPS verringert die Wahrscheinlichkeit, dass externe Inhalte während der Übertragung manipuliert wurden.
2. HTTPS verhindert, dass eingebettete Inhalte auf Inhalte in Ihrem übergeordneten Dokument zugreifen können — und umgekehrt.

Um HTTPS für Ihre Website zu aktivieren, muss ein spezielles Sicherheitszertifikat installiert werden. Viele Hosting-Anbieter bieten HTTPS-aktiviertes Hosting an, ohne dass Sie selbst etwas einrichten müssen, um ein Zertifikat bereitzustellen. Wenn Sie die HTTPS-Unterstützung für Ihre Website jedoch selbst einrichten müssen, stellt Let's Encrypt Werkzeuge und Anweisungen bereit, mit denen Sie das erforderliche Zertifikat automatisch erstellen und installieren können — mit integrierter Unterstützung für die am häufigsten verwendeten Webserver, darunter der Apache-Webserver, Nginx und andere. Die Werkzeuge von Let's Encrypt sind darauf ausgelegt, den Prozess so einfach wie möglich zu machen. Daher gibt es wirklich keinen guten Grund, darauf oder auf andere verfügbare Methoden zur HTTPS-Aktivierung Ihrer Website zu verzichten.

Verwenden Sie immer das Attribut sandbox

Sie möchten Angreifern möglichst wenig Möglichkeiten geben, auf Ihrer Website Schaden anzurichten. Daher sollten Sie eingebetteten Inhalten nur die Berechtigungen geben, die sie zur Erfüllung ihrer Aufgabe benötigen. Dies gilt natürlich auch für Ihre eigenen Inhalte. Ein Container für Code, in dem er angemessen verwendet oder getestet werden kann, aber dem Rest der Codebasis keinen Schaden zufügen kann — weder versehentlich noch böswillig — wird als Sandbox bezeichnet.

Inhalte, die nicht in einer Sandbox ausgeführt werden, können möglicherweise JavaScript ausführen, Formulare absenden, Popup-Fenster auslösen usw. Standardmäßig sollten Sie alle verfügbaren Einschränkungen festlegen, indem Sie das Attribut sandbox ohne Parameter verwenden, wie in unserem vorherigen Beispiel gezeigt.

Falls unbedingt erforderlich, können Sie Berechtigungen einzeln wieder hinzufügen, innerhalb des Attributwerts sandbox="". Alle verfügbaren Optionen finden Sie im Referenzeintrag sandbox. Ein wichtiger Hinweis: Sie sollten Ihrem Attribut sandbox niemals sowohl allow-scripts als auch allow-same-origin hinzufügen, wenn der eingebettete Inhalt denselben Ursprung wie die einbettende Seite hat. In diesem Fall könnte der eingebettete Inhalt JavaScript verwenden, um das Attribut zu entfernen und sich selbst neu zu laden, wodurch die Sandbox vollständig deaktiviert würde.

CSP-Direktiven konfigurieren

CSP steht für Content Security Policy und bietet eine Reihe von HTTP-Headern — Metadaten, die zusammen mit Ihren Webseiten gesendet werden, wenn sie von einem Webserver bereitgestellt werden —, die die Sicherheit Ihres HTML-Dokuments verbessern sollen. Um <iframe>s abzusichern, können Sie Ihren Server so konfigurieren, dass er einen geeigneten X-Frame-Options-Header sendet. Dies kann verhindern, dass andere Websites Ihre Inhalte in ihre Webseiten einbetten, was Clickjacking und eine Vielzahl weiterer Angriffe ermöglichen würde. Genau das haben die MDN-Entwickler getan, wie wir zuvor gesehen haben.

Die Elemente <embed> und <object>

Genau wie <iframe> können auch die Elemente <embed> und <object> externe Inhalte einbetten. Abhängig vom eingebetteten Inhalt kann dies eine schlankere Option sein, da der Browser keinen vollständigen Browsing-Kontext für den eingebetteten Inhalt erstellen muss.

Historisch wurden diese Elemente auch zum Einbetten von Inhalten verwendet, die von Browser-Plugins wie Adobe Flash verarbeitet wurden. Diese Technologie ist jedoch inzwischen veraltet und wird von modernen Browsern nicht unterstützt. Heute können fast alle ihre Anwendungsfälle durch <iframe> abgedeckt werden, das mehr Sicherheitsfunktionen bietet.

Wenn Sie externe Inhalte mit diesen Elementen einbetten müssen, benötigen Sie mindestens folgende Informationen:

PDFs einbetten

Im Web verfügen die meisten Medien bereits über dedizierte Elemente: <audio>, <img>, <video>, <svg> usw. Neben Webseiten besteht der wichtigste weitere Anwendungsfall der Elemente <iframe>, <object> und <embed> darin, PDF-Dokumente einzubetten.

Alle heutigen Browser stellen nativ PDF-Renderer bereit. Diese Renderer führen ausführbare Inhalte bereits in einer Sandbox aus, weshalb das Einbetten von PDFs standardmäßig im Allgemeinen sicher ist. Wenn Sie <iframe> verwenden, müssen Sie das Attribut sandbox nicht bereitstellen; tatsächlich kann das Hinzufügen von sandbox verhindern, dass der PDF-Viewer funktioniert.

Wenn Ihre Seite eine PDF-Vorschau benötigt, wählen Sie ein Element anhand der benötigten Funktionen:

• Das Element <iframe> sollte die erste Wahl sein: Es bietet Steuerelemente wie loading="lazy" und referrerpolicy.
• Verwenden Sie <object> nur, wenn die Ressource möglicherweise nicht gerendert werden kann und Fallback-Inhalte benötigt werden.
• Das Element <embed> bietet für eine PDF-Vorschau keinen Vorteil.

Da der PDF-Viewer des Browsers bereits seine eigene Sandbox bereitstellt, ist kein Sandboxing für das Element erforderlich. Tatsächlich kann das Hinzufügen von sandbox verhindern, dass der PDF-Viewer funktioniert. Wenn Sie Content Security Policy verwenden, werden die <iframe>-Quellen über frame-src und die <object>- sowie <embed>-Quellen über object-src gesteuert. Wie auf der Referenzseite zu object-src angegeben, sollten Sie im Allgemeinen object-src 'none' beibehalten; in diesem Fall ist <iframe> die einzige praktikable Option.

Sehen wir uns ein <object>-Beispiel an, das ein PDF in eine Seite einbettet:

<object data="my-pdf.pdf" type="application/pdf" width="800" height="1200">
  <p>
    The PDF preview is unavailable.
    <a href="my-pdf.pdf">Open the PDF file.</a>
  </p>
</object>

PDFs waren ein notwendiger Zwischenschritt zwischen Papier und Digitalem, stellen jedoch viele Herausforderungen für die Barrierefreiheit dar und können auf kleinen Bildschirmen schwer lesbar sein. In einigen Bereichen sind sie weiterhin beliebt, aber es ist deutlich besser, auf sie zu verlinken, damit sie heruntergeladen oder auf einer separaten Seite gelesen werden können, anstatt sie in eine Webseite einzubetten.

Zusammenfassung

Das Thema des Einbettens anderer Inhalte in Webdokumente kann schnell sehr komplex werden. In diesem Artikel haben wir daher versucht, es auf einfache und vertraute Weise einzuführen, die sofort relevant erscheint, und gleichzeitig einige der fortgeschritteneren Funktionen der beteiligten Technologien anzudeuten. Zu Beginn werden Sie Einbettungen wahrscheinlich kaum für mehr als das Einbinden von Drittanbieterinhalten wie Karten und Videos auf Ihren Seiten verwenden. Mit zunehmender Erfahrung werden Sie jedoch wahrscheinlich weitere Verwendungsmöglichkeiten dafür finden.

Neben den hier besprochenen gibt es viele weitere Technologien zum Einbetten externer Inhalte. Einige haben wir in früheren Artikeln gesehen, etwa <video>, <audio> und <img>; andere können Sie noch entdecken, etwa <canvas> für mit JavaScript generierte 2D- und 3D-Grafiken sowie <svg> zum Einbetten von Vektorgrafiken.