Von Objekt zu iframe — allgemeine Einbettungstechnologien

Vor langer Zeit war es im Web populär, Frames zur Erstellung von Webseiten zu verwenden – kleine Teile einer Webseite, die in individuellen HTML-Seiten gespeichert wurden. Diese waren in einem Hauptdokument namens frameset eingebettet, das es ermöglichte, den Bereich auf dem Bildschirm zu spezifizieren, den jeder Frame ausfüllte, ähnlich wie die Größenanpassung von Spalten und Zeilen einer Tabelle. Diese galten in der Mitte bis Ende der 90er Jahre als das Nonplusultra, und es gab Hinweise darauf, dass eine Webseite, die in kleinere Stücke aufgeteilt war, besser für die Download-Geschwindigkeit war – vor allem, da die Netzwerkverbindungen damals sehr langsam waren. Sie hatten jedoch viele Probleme, die die Vorteile bei weitem überwogen, als die Netzgeschwindigkeiten schneller wurden, daher sieht man sie heute kaum noch im Gebrauch.

Ein wenig später (Ende der 90er, Anfang der 2000er Jahre) wurden Plugin-Technologien sehr populär, wie Java Applets und Flash – diese ermöglichten es Webentwicklern, reichhaltige Inhalte wie Videos und Animationen in Webseiten einzubetten, die allein durch HTML nicht verfügbar waren. Das Einbetten dieser Technologien wurde mit Elementen wie <object> und dem weniger verwendeten <embed> erreicht, die zu dieser Zeit sehr nützlich waren. Sie sind seitdem aus der Mode gekommen wegen vieler Probleme, einschließlich Barrierefreiheit, Sicherheit, Dateigröße und mehr. Heute unterstützen die großen Browser keine Plugins wie Flash mehr.

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

Nachdem wir nun die Geschichtsstunde hinter uns gebracht haben, sehen wir uns an, wie man einige dieser Techniken verwendet.

In diesem Artikel gehen wir direkt in einen aktiven Lernabschnitt über, um Ihnen sofort eine reale Vorstellung davon zu geben, wofür Einbettungstechnologien nützlich sind. Die Online-Welt ist sehr vertraut mit YouTube, aber viele wissen nicht über einige der verfügbaren Sharing-Funktionen Bescheid. Sehen wir uns an, wie YouTube es uns ermöglicht, ein Video auf jeder gewünschten Seite mithilfe eines <iframe> einzubetten.

1. Gehen Sie zuerst zu YouTube und finden Sie ein Video, das Ihnen gefällt.
2. Unter dem Video finden Sie eine Teilen-Schaltfläche – wählen Sie diese, um die Optionen zum Teilen anzuzeigen.
3. Wählen Sie die Einbetten-Schaltfläche und Sie erhalten einen <iframe>-Code — kopieren Sie diesen.
4. Fügen Sie ihn in das Eingabe-Feld unten ein und sehen Sie das Ergebnis im Ausgabe-Feld.

Für zusätzliche Punkte könnten Sie auch versuchen, eine Google Map in das Beispiel einzubetten:

1. Gehen Sie zu Google Maps und finden Sie eine Karte, die Ihnen gefällt.
2. Klicken Sie auf das "Hamburger-Menü" (drei horizontale Linien) oben links in der Benutzeroberfläche.
3. Wählen Sie die Option Karte teilen oder einbetten.
4. Wählen Sie die Option Karte einbetten, die Ihnen einige <iframe>-Codes geben wird — kopieren Sie diesen.
5. Fügen Sie ihn in das Eingabe-Feld unten ein und sehen Sie das Ergebnis im Ausgabe-Feld.

Wenn Sie einen Fehler machen, können Sie alles mit der Zurücksetzen-Schaltfläche zurücksetzen. Wenn Sie wirklich feststecken, drücken Sie die Lösung anzeigen-Schaltfläche, um eine Antwort zu sehen.

<h2>Live output</h2>

<div class="output" style="min-height: 250px;"></div>

<h2>Editable code</h2>
<p class="a11y-label">
  Press Esc to move focus away from the code area (Tab inserts a tab character).
</p>

<textarea
  id="code"
  class="input"
  style="width: 95%;min-height: 100px;"></textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const solution = document.getElementById("solution");
const output = document.querySelector(".output");
let code = textarea.value;
let userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

reset.addEventListener("click", function () {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = "Show solution";
  updateCode();
});

solution.addEventListener("click", function () {
  if (solution.value === "Show solution") {
    textarea.value = solutionEntry;
    solution.value = "Hide solution";
  } else {
    textarea.value = userEntry;
    solution.value = "Show solution";
  }
  updateCode();
});

const htmlSolution =
  '<iframe width="420" height="315" src="https://www.youtube.com/embed/QH2-TGUlwu4" frameborder="0" allowfullscreen>\n</iframe>\n\n<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d37995.65748333395!2d-2.273568166412784!3d53.473310471916975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487bae6c05743d3d%3A0xf82fddd1e49fc0a1!2sThe+Lowry!5e0!3m2!1sen!2suk!4v1518171785211" width="600" height="450" frameborder="0" style="border:0" allowfullscreen>\n</iframe>';
let solutionEntry = htmlSolution;

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function (e) {
  if (e.code === "Tab") {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.code === "Escape") {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  const scrollPos = textarea.scrollTop;
  let caretPos = textarea.selectionStart;

  const front = textarea.value.substring(0, caretPos);
  const back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );
  textarea.value = front + text + back;
  caretPos += text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function () {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "Show solution") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

Das war einfach und hat Spaß gemacht, oder? <iframe>-Elemente sind dafür ausgelegt, andere Webdokumente in das aktuelle Dokument einzubetten. Dies ist großartig, um Drittanbieter-Inhalte in Ihre Website zu integrieren, auf die Sie möglicherweise keinen direkten Einfluss haben und die Sie nicht selbst implementieren möchten – wie Videos von Online-Videoanbietern, Kommentarsysteme wie Disqus, Karten von Online-Kartenanbietern, Werbebanner usw. Selbst die interaktiven Beispiele, die Sie im Laufe dieses Kurses verwenden, sind mit <iframe>s umgesetzt.

Bevor Sie <iframe>-Elemente verwenden, sollten Sie sich einiger Sicherheitsbedenken bewusst sein. Angenommen, Sie wollten das MDN-Glossar auf einer Ihrer Webseiten mit dem <iframe>-Element einbinden, dann könnten Sie versuchen, etwas wie das nächste Codebeispiel zu verwenden. Wenn Sie den Code unten in eine Ihrer Seiten einfügen, könnten Sie überrascht sein, anstelle der Glossarseite eine Fehlermeldung zu sehen:

<head>
  <style>
    iframe {
      border: none;
    }
  </style>
</head>
<body>
  <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>
</body>

Wenn Sie sich die Konsole Ihres Browsers ansehen, sehen Sie eine Fehlermeldung, die in etwa folgendermaßen aussieht:

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

Der Abschnitt Sicherheitsbedenken weiter unten geht genauer darauf ein, warum Sie diesen Fehler sehen, aber zuerst werfen wir einen Blick darauf, was unser Code tut.

Das Beispiel enthält die absolut notwendigen Elemente, um ein <iframe> zu verwenden:

border: none

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

allowfullscreen

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

src

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

width und height

Diese Attribute geben die Breite und Höhe an, die das iframe haben soll.

sandbox

Dieses Attribut fordert in etwas moderneren Browsern als der Rest der <iframe>-Funktionen (z.B. IE 10 und höher) verschärfte Sicherheitseinstellungen; wir werden im nächsten Abschnitt mehr dazu sagen.

Oben haben wir Sicherheitsbedenken erwähnt — gehen wir nun etwas näher darauf ein. Wir erwarten nicht, dass Sie alle Inhalte perfekt beim ersten Mal verstehen; wir möchten Sie nur auf diesen Aspekt hinweisen und eine Referenz bieten, zu der Sie zurückkehren können, wenn Sie erfahrener werden und beginnen, <iframe>s in Ihren Experimenten und Arbeiten zu berücksichtigen. Außerdem gibt es keinen Grund zur Panik, <iframe>s nicht zu nutzen — Sie müssen einfach 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öswillige Personen im Web (oft als Hacker, genauer gesagt Cracker bezeichnet) sind, die versuchen, Ihre Webseite böswillig zu modifizieren oder Leute zu etwas zu bewegen, was sie nicht tun wollen, wie etwa sensible 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 bewährte Praktiken, die zu beachten sind — einige dieser werden wir im Folgenden behandeln.

Ein schnelles Beispiel zuerst: Versuchen Sie, das obige Beispiel in Ihrem Browser zu laden — Sie können es live auf GitHub finden (sehen Sie sich auch den Quellcode an.). Statt der erwarteten Seite sehen Sie wahrscheinlich eine Art von Nachricht im Sinne von "Ich kann diese Seite nicht öffnen", und wenn Sie sich die Konsole in den Entwickler-Tools Ihres Browsers ansehen, sehen Sie eine Nachricht, die Ihnen sagt, warum. In Firefox sehen Sie beispielsweise die Nachricht Das Laden von "https://developer.mozilla.org/de/docs/Glossary" in einem Frame wird durch die "X-Frame-Options"-Direktive, die auf "DENY" gesetzt ist, verweigert. Das liegt daran, dass die Entwickler, die MDN erstellt haben, auf dem Server eine Einstellung integriert haben, die das Einbetten ihrer Webseite in <iframe>s verbietet (siehe CSP-Richtlinien konfigurieren, weiter unten.) Das macht Sinn – eine komplette MDN-Seite ergibt wenig Sinn, in andere Seiten eingebettet zu werden, es sei denn, Sie möchten sie auf Ihrer Seite einbetten und als Ihre eigene ausgeben – oder versuchen, Daten über Clickjacking zu stehlen, was beides wirklich schlechte Dinge sind. Zudem würde, wenn jeder damit anfinge, der zusätzliche Bandbreitenbedarf Mozilla viel Geld kosten.

Nur dann einbetten, wenn es nötig ist

Manchmal macht es Sinn, Inhalte von Drittanbietern einzubetten – wie YouTube-Videos und Karten –, aber Sie können sich viele Kopfschmerzen ersparen, wenn Sie nur dann Drittanbieterdienste einbinden, wenn es absolut notwendig ist. Eine gute Regel für Websicherheit lautet: "Sie können nie vorsichtig genug sein. Wenn Sie es erstellt haben, überprüfen Sie es doppelt. Wenn es jemand anderes erstellt hat, gehen Sie davon aus, dass es gefährlich ist, bis das Gegenteil bewiesen ist."

Neben der Sicherheit sollten Sie sich auch über Urheberrechtsfragen im Klaren sein. Die meisten Inhalte sind urheberrechtlich geschützt, offline wie online, selbst die Inhalte, bei denen Sie es nicht erwarten würden (zum Beispiel die meisten Bilder auf Wikimedia Commons). Zeigen Sie Inhalte niemals auf Ihrer Webseite an, es sei denn, Sie besitzen sie oder die Inhaber haben Ihnen schriftlich und eindeutig die Erlaubnis gegeben. Die Strafen für Urheberrechtsverletzungen sind schwerwiegend. Noch einmal: Sie können nie vorsichtig genug sein.

Wenn die Inhalte lizenziert sind, müssen Sie die Lizenzbedingungen einhalten. Die Inhalte auf MDN sind beispielsweise lizenziert unter CC-BY-SA. Das bedeutet, dass Sie uns ordentlich zukreditieren müssen, wenn Sie unsere Inhalte zitieren, selbst wenn Sie wesentliche Änderungen vorgenommen haben.

Verwenden Sie 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 entfernte Inhalte während der Übertragung manipuliert wurden.
2. HTTPS verhindert, dass eingebettete Inhalte auf Inhalte Ihres übergeordneten Dokuments zugreifen können und umgekehrt.

Die Aktivierung von HTTPS auf Ihrer Seite erfordert ein spezielles Sicherheitszertifikat. Viele Hosting-Anbieter bieten HTTPS-fähiges Hosting an, ohne dass Sie selbst ein Zertifikat einrichten müssen. Aber wenn Sie selbst die Unterstützung für HTTPS auf Ihrer Seite einrichten müssen, bietet Let's Encrypt Tools und Anleitungen, die Sie verwenden können, um das benötigte Zertifikat automatisch zu erstellen und zu installieren – mit integrierter Unterstützung für die am weitesten verbreiteten Webserver, einschließlich des Apache-Webservers, Nginx und anderer. Die Let's Encrypt-Tools sind auf eine möglichst einfache Nutzung ausgelegt, daher gibt es wirklich keinen Grund, es nicht zu verwenden 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 böse Dinge auf Ihrer Webseite zu tun, daher sollten Sie eingebetteten Inhalten nur die zum Ausführen seiner Aufgabe erforderlichen Berechtigungen erteilen. Natürlich gilt dies auch für Ihre eigenen Inhalte. Ein Container für Code, in dem er angemessen – oder zum Testen – verwendet werden kann, aber keinen Schaden am Rest der Codebasis (entweder versehentlich oder böswillig) anrichten kann, wird als sandbox bezeichnet.

Inhalte, die nicht sandboxed sind, können möglicherweise JavaScript ausführen, Formulare absenden, Popup-Fenster auslö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.

Falls absolut erforderlich, können Sie Berechtigungen einzeln zurückgeben (innerhalb des Attributwerts sandbox="") – siehe den sandbox-Referenzeintrag für alle verfügbaren Optionen. Ein wichtiger Hinweis 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 umgehen, die verhindert, dass Sites Skripte ausführen, und JavaScript verwenden, um die Sandboxing-Einschränkungen vollständig aufzuheben.

CSP-Richtlinien 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 dazu entwickelt wurden, die Sicherheit Ihres HTML-Dokuments zu verbessern. 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 Webseiten Ihre Inhalte in ihre eigenen Seiten einbetten (was Clickjacking und eine Vielzahl anderer Angriffe ermöglichen würde), genau das haben die MDN-Entwickler getan, wie wir zuvor gesehen haben.

Die <embed> und <object> Elemente haben eine andere Funktion als <iframe> — diese Elemente sind universelle Einbettungswerkzeuge zum Einbetten externer Inhalte, wie z.B. PDFs.

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

Historisch gesehen wurden diese Elemente auch zum Einbetten von Inhalten verwendet, die von Browser-Plugins verarbeitet werden, wie Adobe Flash, aber diese Technologie ist inzwischen veraltet und wird von modernen Browsern nicht mehr unterstützt.

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

Schauen wir uns ein <object>-Beispiel an, das ein PDF in eine Seite einbettet (siehe 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 Schritt zwischen Papier und Digital, aber sie stellen viele Barrierefreiheitsprobleme dar und können schwer auf kleinen Bildschirmen zu lesen sein. Sie sind in einigen Kreisen immer noch sehr beliebt, aber es ist viel besser, auf sie zu verlinken, sodass sie heruntergeladen oder auf einer separaten Seite gelesen werden können, anstatt sie in eine Webseite einzubetten.

Das Thema des Einbettens anderer Inhalte in Webdokumente kann schnell sehr komplex werden. In diesem Artikel haben wir versucht, es auf eine einfache, vertraute Weise einzuführen, die sofort relevant erscheint, während wir dennoch einige der fortgeschritteneren Funktionen der beteiligten Technologien andeuten. Zu Beginn werden Sie Einbettungen wahrscheinlich nicht für mehr als das Einfügen von Inhalten von Drittanbietern wie Karten und Videos auf Ihren Seiten verwenden. Mit zunehmender Erfahrung werden Sie jedoch wahrscheinlich mehr Verwendungen dafür finden.

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