Von Objekt zu iframe — allgemeine Einbettungstechnologien

Eine kurze Geschichte der Einbettung

Vor langer Zeit war es im Web populär, Frames zu verwenden, um Websites zu erstellen – kleine Teile einer Website, die in einzelnen HTML-Seiten gespeichert sind. Diese wurden in ein Master-Dokument namens Frameset eingebettet, das es Ihnen ermöglichte, den Bereich auf dem Bildschirm zu spezifizieren, den jeder Frame ausfüllte, ähnlich wie beim Anpassen der Spalten und Reihen einer Tabelle. Diese galten Mitte bis Ende der 90er Jahre als der Höhepunkt der Coolness, und es gab Hinweise darauf, dass das Aufteilen einer Webseite in kleinere Abschnitte wie dieser besser für die Download-Geschwindigkeit war – besonders auffällig bei den damals so langsamen Netzwerkverbindungen. Sie hatten jedoch viele Probleme, die jedes Positive bei weitem überwogen, als die Netzwerkgeschwindigkeiten schneller wurden, und deshalb sieht man sie heute nicht mehr im Einsatz.

Ein wenig später (späte 90er, frühe 2000er Jahre) wurden Plugin-Technologien sehr populär, wie Java-Applets und Flash – diese erlaubten es Webentwicklern, reichhaltige Inhalte wie Videos und Animationen in Webseiten einzubetten, die durch HTML allein nicht verfügbar waren. Die Einbettung dieser Technologien wurde durch Elemente wie <object> und das weniger genutzte <embed> erreicht, und sie waren zu ihrer Zeit sehr nützlich. Sie sind jedoch aus der Mode gekommen, aufgrund vieler Probleme, einschließlich Zugänglichkeit, Sicherheit, Dateigröße und mehr. Heute haben große Browser aufgehört, Plugins wie Flash zu unterstützen.

Schließlich erschien das <iframe>-Element (zusammen mit anderen Möglichkeiten, Inhalte einzubetten, wie <canvas>, <video>, etc.), das eine Möglichkeit bietet, ein vollständiges Webdokument in ein anderes einzubetten, als ob es ein <img> oder ein anderes solches Element wäre, und es wird heute regelmäßig verwendet.

Nachdem der Geschichtsunterricht vorbei ist, lassen Sie uns weitermachen und sehen, wie man einige dieser Techniken anwendet.

Spielen mit klassischen Einbettungsanwendungen

In diesem Artikel werden wir gleich in eine Übung einsteigen, um Ihnen sofort eine Idee zu geben, wofür Einbettungstechnologien nützlich sind. Die Online-Welt ist sehr vertraut mit YouTube, aber viele Menschen wissen nicht über einige der zur Verfügung stehenden Sharing-Optionen Bescheid.

1. Öffnen Sie zunächst den MDN Playground.
2. Nun werden wir uns ansehen, wie YouTube uns ermöglicht, ein Video in jede beliebige Seite, die wir mögen, mithilfe eines <iframe> einzubetten.
   1. Gehen Sie zu YouTube und suchen Sie ein Video, das Sie mögen.
   2. Unter dem Video finden Sie einen Teilen-Button — wählen Sie diesen aus, um die Sharing-Optionen anzuzeigen.
   3. Wählen Sie den Einbetten-Button und Sie erhalten einen <iframe>-Code — kopieren Sie diesen.
   4. Fügen Sie ihn in das HTML-Feld im Playground ein und sehen Sie, was das Ergebnis in der Ausgabe ist.
3. Als Bonusaufgabe können Sie auch versuchen, eine Google Map im Playground einzubetten:
   1. Gehen Sie zu Google Maps und finden Sie eine Karte, die Sie mögen.
   2. Klicken Sie auf das "Hamburger-Menü" (drei horizontale Linien) oben links in der Benutzeroberfläche.
   3. Wählen Sie die Option Teilen oder Karte einbetten.
   4. Wählen Sie die Option Eine Karte einbetten, die Ihnen etwas <iframe>-Code gibt — kopieren Sie ihn.
   5. Fügen Sie ihn in das HTML-Feld im Playground ein und sehen Sie, was das Ergebnis in der Ausgabe ist.

Wenn Sie einen Fehler machen, können Sie ihn immer mit dem Zurücksetzen-Button im Playground rückgängig machen.

iframes im Detail

Das war einfach und spaßig, oder? <iframe>-Elemente sind dafür ausgelegt, andere Webdokumente in das aktuelle Dokument einzubetten. Das ist großartig, um Inhalte von Drittanbietern in Ihre Webseite zu integrieren, über die Sie möglicherweise keine direkte Kontrolle haben und die Sie nicht selbst implementieren möchten — wie Videos von Online-Videoanbietern, Kommentarsysteme wie Disqus, Karten von Online-Kartenanbietern, Werbebanner, etc. Sogar die Live-beispielhaften Beispiele, die Sie in diesem Kurs verwendet haben, sind mit <iframe>s implementiert.

Bevor Sie in die Verwendung von <iframe>-Elementen eintauchen, gibt es einige Sicherheitsbedenken, die beachtet werden müssen. Wenn Sie beispielsweise das MDN-Glossar auf einer Ihrer Webseiten einbeziehen möchten und dafür das <iframe>-Element verwenden, könnten Sie etwas wie das folgende Codebeispiel versuchen. Wenn Sie den unten stehenden Code auf einer Ihrer Seiten hinzufügen würden, könnten Sie überrascht sein, anstelle der Glossar-Seite eine Fehlermeldung zu sehen:

<iframe
  src="https://developer.mozilla.org/en-US/docs/Glossary"
  width="100%"
  height="500"
  allowfullscreen
  sandbox>
  <p>
    <a href="/en-US/docs/Glossary">
      Fallback link for browsers that don't support iframes
    </a>
  </p>
</iframe>

iframe {
  border: none;
}

Wenn Sie sich die Konsole Ihres Browsers ansehen, sehen Sie möglicherweise eine Fehlermeldung ähnlich der folgenden:

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

Der Abschnitt Sicherheit weiter unten geht genauer darauf ein, warum Sie diesen Fehler sehen, aber zunächst werfen wir einen Blick darauf, was unser Code macht.

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

border: none

Wenn verwendet, wird das <iframe> ohne umgebenden Rahmen angezeigt. Andernfalls zeigen Browser standardmäßig ein <iframe> mit einem umgebenden Rahmen an (was im Allgemeinen unerwünscht ist).

allowfullscreen

Wenn gesetzt, kann das <iframe> im Vollbildmodus mit der Fullscreen API angezeigt werden (etwas außerhalb des Umfangs dieses Artikels).

src

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

width und height

Diese Attribute spezifizieren die Breite und Höhe, die Sie für das iframe möchten.

sandbox

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

Sicherheitsbedenken

Oben haben wir Sicherheitsbedenken erwähnt — gehen wir nun etwas genauer darauf ein. Wir erwarten nicht, dass Sie all diese Inhalte beim ersten Durchlesen perfekt verstehen; wir möchten Sie nur auf dieses Thema aufmerksam machen und eine Referenz bieten, auf die Sie zurückkommen können, wenn Sie mehr Erfahrung gesammelt haben und beginnen, <iframe>s in Ihren Experimenten und Arbeiten zu verwenden. 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 (offizieller Begriff: Angriffsvektor) für böse Menschen im Web sind (oft als Hacker bezeichnet, genauer gesagt, Cracker), die versuchen, Ihre Webseite bösartig zu verändern oder Menschen dazu zu bringen, Dinge zu tun, die sie nicht wollen, wie sensitive Informationen wie Benutzernamen und Passwörter preiszugeben. Aus diesem Grund haben Spezifikationsingenieure und Browserentwickler verschiedene Sicherheitsmechanismen entwickelt, um <iframe>s sicherer zu machen, und es gibt auch Best Practices, die berücksichtigt werden sollten – einige davon werden wir im Folgenden behandeln.

Ein kurzes Beispiel zuerst — versuchen Sie, das vorherige Beispiel, das wir oben gezeigt haben, in Ihren Browser zu laden – Sie können es live auf GitHub finden (sehen Sie sich auch den Quellcode an). Statt der erwarteten Seite werden Sie wahrscheinlich eine Nachricht sehen, die darauf hinweist, dass die Seite nicht geöffnet werden kann, und wenn Sie die Konsole in den Entwicklertools des Browsers anzeigen, werden Sie eine Nachricht sehen, die Ihnen sagt, warum. In Firefox erhalten Sie eine Nachricht wie Das Laden von "https://developer.mozilla.org/de/docs/Glossary" in einem Frame wurde durch die "X-Frame-Options"-Direktive verweigert, die auf "DENY" gesetzt ist. Dies liegt daran, dass die Entwickler, die MDN gebaut haben, eine Einstellung auf dem Server enthalten haben, der die Webseiten bereitstellt, um zu verhindern, dass sie in <iframe>s eingebettet werden (siehe Konfigurieren von CSP-Direktiven unten). Das macht Sinn – eine gesamte MDN-Seite ergibt wirklich keinen Sinn, in andere Seiten eingebettet zu werden, es sei denn, man möchte etwas wie sie auf seiner eigenen Seite einbetten und als seine eigene ausgeben – oder versuchen, Daten über Clickjacking zu stehlen, was beides wirklich schlechte Dinge sind. Außerdem, wenn jeder damit anfängt, würde all die zusätzliche Bandbreite beginnen, Mozilla viel Geld zu kosten.

Nur einbetten, wenn notwendig

Manchmal ergibt es Sinn, Inhalte von Drittanbietern einzubetten – wie YouTube-Videos und Karten –, aber Sie können sich viele Kopfschmerzen ersparen, wenn Sie Inhalte von Drittanbietern nur dann einbetten, wenn es absolut notwendig ist. Eine gute Regel für Web-Sicherheit lautet: "Man kann nie vorsichtig genug sein. Wenn Sie es gemacht haben, überprüfen Sie es doppelt. Wenn es jemand anderes gemacht hat, nehmen Sie an, dass es gefährlich ist, bis das Gegenteil bewiesen ist."

Neben der Sicherheit sollten Sie sich auch der Probleme im Zusammenhang mit geistigem Eigentum bewusst sein. Die meisten Inhalte sind urheberrechtlich geschützt, offline und online, selbst solche Inhalte, die Sie nicht erwarten würden (zum Beispiel die meisten Bilder auf Wikimedia Commons). Zeigen Sie niemals Inhalte auf Ihrer Webseite an, es sei denn, Sie besitzen sie oder die Eigentümer haben Ihnen eine schriftliche, eindeutige Genehmigung gegeben. Die Strafen für Urheberrechtsverletzungen sind schwerwiegend. Auch hier gilt: Man kann nie vorsichtig genug sein.

Wenn der Inhalt lizenziert ist, müssen Sie die Lizenzbedingungen einhalten. Zum Beispiel sind die Inhalte auf MDN lizenziert unter CC-BY-SA. Das bedeutet, dass Sie uns korrekt anerkennen müssen, wenn Sie unsere Inhalte zitieren, selbst wenn Sie wesentliche Änderungen vornehmen.

Verwendung von HTTPS

HTTPS ist die verschlüsselte Version von HTTP. Sie sollten Ihre Webseiten wann immer möglich über HTTPS bereitstellen:

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

HTTPS-Enablement Ihrer Seite erfordert ein spezielles Sicherheitszertifikat, das installiert werden muss. Viele Hosting-Anbieter bieten HTTPS-fähiges Hosting an, ohne dass Sie selbst eine Einrichtung vornehmen müssen, um ein Zertifikat zu installieren. Wenn Sie jedoch auf Ihrer eigenen Seite HTTPS-Unterstützung einrichten müssen, stellt Let's Encrypt Tools und Anleitungen bereit, die Sie verwenden können, um automatisch das notwendige Zertifikat zu erstellen und zu installieren – mit integrierter Unterstützung für die am häufigsten verwendeten Webserver, einschließlich dem Apache-Webserver, Nginx und anderen. Die Let's Encrypt-Tooling ist darauf ausgelegt, den Prozess so einfach wie möglich zu gestalten. Es gibt also wirklich keinen guten Grund, es oder andere verfügbare Mittel zu vermeiden, um Ihre Seite HTTPS-fähig zu machen.

Verwenden Sie immer das sandbox-Attribut

Sie möchten Angreifern so wenig Macht wie möglich geben, um schlechte Dinge auf Ihrer Webseite zu tun. Deshalb sollten Sie eingebetteten Inhalten nur die Berechtigungen geben, die für ihre Aufgabe erforderlich sind. Dies gilt natürlich auch für Ihre eigenen Inhalte. Ein Container für Code, in dem er angemessen verwendet werden kann – oder zum Testen – aber keinen Schaden im Rest des Codes verursachen kann (entweder unbeabsichtigt oder böswillig), wird eine Sandbox genannt.

Inhalte, die nicht in einer Sandbox sind, könnten in der Lage sein, JavaScript auszuführen, Formulare abzuschicken, Pop-up-Fenster auszulösen etc. Standardmäßig sollten Sie alle verfügbaren Einschränkungen auferlegen, indem Sie das sandbox-Attribut ohne Parameter verwenden, wie in unserem vorherigen Beispiel gezeigt.

Wenn es absolut erforderlich ist, können Sie Berechtigungen Stück für Stück wieder hinzufügen (innerhalb des sandbox="" Attributwertes) – sehen Sie sich den sandbox Referenzeintrag für alle verfügbaren Optionen an. Eine wichtige Anmerkung ist, dass Sie niemals sowohl allow-scripts als auch allow-same-origin zu Ihrem sandbox-Attribut hinzufügen sollten – in diesem Fall könnte der eingebettete Inhalt die Same-origin policy, die das Ausführen von Skripten von Seiten verhindert, umgehen und JavaScript verwenden, um das Sandboxing vollständig auszuschalten.

Konfigurieren von CSP-Direktiven

CSP steht für Inhaltssicherheitsrichtlinie und bietet eine Reihe von HTTP-Headern (Metadaten, die zusammen mit Ihren Webseiten über einen Webserver bereitgestellt werden), die dazu entworfen wurden, die Sicherheit Ihres HTML-Dokuments zu verbessern. Wenn es darum geht, <iframe>s zu sichern, können Sie Ihren Server so konfigurieren, dass er einen geeigneten X-Frame-Options-Header sendet. Dies kann verhindern, dass andere Webseiten Ihre Inhalte in ihren Webseiten einbetten (was Clickjacking und eine Vielzahl anderer Angriffe ermöglichen würde), was genau das ist, was die MDN-Entwickler getan haben, wie wir zuvor gesehen haben.

Die <embed> und <object> Elemente

Die <embed> und <object> Elemente erfüllen eine andere Funktion als <iframe> — diese Elemente sind allgemeine Einbettungstools für das Einbetten externer Inhalte, wie PDFs.

Sie werden diese Elemente jedoch wahrscheinlich nicht sehr häufig verwenden. Wenn Sie PDFs anzeigen müssen, ist es in der Regel besser, auf sie zu verlinken, anstatt sie in der Seite einzubetten.

Historisch wurden diese Elemente auch verwendet, um Inhalte, die von Browser-Plugins wie Adobe Flash verarbeitet wurden, einzubinden, aber diese Technologie ist jetzt obsolet und wird von modernen Browsern nicht mehr unterstützt.

Wenn Sie feststellen, dass Sie Plugin-Inhalte einbetten müssen, sind dies die Informationen, die Sie benötigen, mindestens:

Sehen wir uns ein <object>-Beispiel an, das ein PDF in eine Seite einbettet (sehen Sie das Live-Beispiel und den Quellcode):

<object data="my-pdf.pdf" type="application/pdf" width="800" height="1200">
  <p>
    You don't have a PDF plugin, but you can
    <a href="my-pdf.pdf">download the PDF file. </a>
  </p>
</object>

PDFs waren ein notwendiger Zwischenschritt zwischen Papier und Digital, aber sie stellen viele Zugänglichkeitsherausforderungen dar und können auf kleinen Bildschirmen schwer lesbar sein. Sie sind in einigen Kreisen immer noch populär, aber es ist viel besser, auf sie zu verlinken, so dass sie heruntergeladen oder auf einer separaten Seite gelesen werden können, anstatt sie in eine Webseite einzubetten.

Zusammenfassung

Das Thema der Einbettung anderer Inhalte in Webdokumente kann schnell sehr komplex werden. Deshalb haben wir in diesem Artikel versucht, es auf einfache, vertraute Weise einzuführen, die sofort relevant erscheint, während noch einige der fortgeschritteneren Funktionen der beteiligten Technologien angedeutet werden. Zunächst werden Sie Einbettungen wahrscheinlich nicht viel mehr verwenden als zum Einfügen von Drittanbieter-Inhalten wie Karten und Videos auf Ihren Seiten. Wenn Sie jedoch erfahrener werden, werden Sie wahrscheinlich weitere Verwendungsmöglichkeiten dafür finden.

Es gibt viele andere Technologien, die das Einbetten externer Inhalte beinhalten, neben den hier besprochenen. Wir haben einige in früheren Artikeln gesehen, wie <video>, <audio>, und <img>, aber es gibt andere zu entdecken, wie <canvas> für JavaScript-generierte 2D- und 3D-Grafiken und <svg> für das Einbetten von Vektorgrafiken.