Inhalte sicher auf Ihrer Website einbetten

Jack J
Jack J
Alexandra Klepper
Alexandra Klepper

Eingebettete Inhalte sind die beste Möglichkeit, Nutzer auf Ihrer Website zu halten, während sie Inhalte von anderen Seiten oder Websites teilen. Das kann so klein wie ein eingebetteter Tweet sein, der im Stil und Format von Twitter angezeigt wird. Dabei kann es sich um eine separate Website handeln, die in Ihre eigene eingebettete Website eingebettet ist, wie etwa einen eingebetteten Shopify-Shop, bei dem Besucher etwas kaufen können, ohne Ihre Website zu verlassen.

Es ist wichtiger denn je, dass unsere Websites sicher bleiben, wenn wir Inhalte einbetten.

Entwickler haben mehrere Möglichkeiten, Inhalte in eine Website einzubetten. Am häufigsten wird ein <iframe> verwendet, mit dem du beliebige Inhalte mit nur einer URL auf deiner Website einbetten kannst. Es ist bereits möglich, das Attribut sandbox hinzuzufügen, um einen Iframe sicherer zu machen.

Alternativ können Sie ein vorgeschlagenes HTML-Element verwenden:

  • <fencedframe> wird als datenschutzfreundliche Methode zum Einbetten von Drittanbieterinhalten vorgeschlagen.
  • <portal> wird für nahtlosere Seitenübergänge vorgeschlagen.

Im Folgenden erfahren Sie, wie Sie die Sicherheit Ihrer eingebetteten Inhalte verbessern können.

Mit iFrames einbetten

iFrames können für alle Arten von Anwendungsfällen verwendet werden, beispielsweise zum Hinzufügen von Karten oder Formularen zu einer Kontaktseite oder zum Einblenden von Anzeigen.

<iframe src="https://example.com/maps"></iframe>

Jeder Iframe hat einen eigenen Browserkontext mit eigenem Sitzungsverlauf und Dokument. Der Kontext, in dem der Iframe eingebettet ist, wird als übergeordneter Browserkontext bezeichnet.

In einem iFrame angezeigte Inhalte von Drittanbietern können über postMessage() mit der übergeordneten Website interagieren. So können Entwickler beliebige Werte zwischen Browserkontexten senden. Der Nachrichtenempfänger kann den Ereignis-Listener onmessage verwenden, um die Werte zu empfangen.

// inside iframe
window.parent.postMessage("ping", "https://example.com");

// window
window.addEventListener("message", (event) => {
  console.log(event.data);
})

Zusätzliche Sicherheit mit dem Attribut sandbox

Wenn schädliche Inhalte in einem iFrame bereitgestellt werden, können unbeabsichtigte Aktionen wie die Ausführung von JavaScript oder die Formulareinreichung ausgeführt werden. Um dies zu vermeiden, schränkt das sandbox-Attribut die ausführbaren APIs im Iframe ein und deaktiviert potenziell schädliche Funktionen.

<iframe src="https://example.com" sandbox></iframe>

Durch die Sandbox sind möglicherweise bestimmte APIs nicht mehr verfügbar, die für Ihre eingebetteten Inhalte wichtig sind. Wenn Sie eine deaktivierte API zulassen möchten, können Sie dem Attribut „sandbox“ explizit ein Argument hinzufügen.

<iframe sandbox="allow-forms" src="https://example.com"></iframe>

Für die sandbox-Spezifikation gibt es eine Reihe möglicher Werte, darunter allow-forms, allow-same-origin und allow-popups.

Richtlinie für Berechtigungen

Mit der Entwicklung immer leistungsfähigerer Funktionen für das Web wurden Berechtigungsrichtlinien eingeführt, um die Berechtigungen für alle zu verwalten. Eine Berechtigungsrichtlinie kann auf eine übergeordnete Website und auf Iframe-Inhalte angewendet werden. Die einer übergeordneten Website gewährten Berechtigungen können auch dem iFrame mithilfe des Attributs allow gewährt werden.

<iframe src="https://example.com" allow="fullscreen"></iframe>

Mit Fenced Frames einbetten

Ein begrenzter Frame (<fencedframe>) ist ein vorgeschlagenes HTML-Element für eingebettete Inhalte, ähnlich wie ein iFrame. Im Gegensatz zu einem iFrame schränkt ein Fenced Frame die Kommunikation mit dem Einbettungskontext ein, damit der Frame auf websiteübergreifende Daten zugreifen kann, ohne sie für den Einbettungskontext freizugeben. Ebenso können selbst erhobene Daten auf der übergeordneten Seite nicht mit dem abgegrenzten Frame geteilt werden.

<fencedframe src="https://3rd.party.example"></fencedframe>

Fenced Frames ist ein Privacy Sandbox-Vorschlag, der vorschlägt, dass Websites auf oberster Ebene Daten partitionieren sollen. Viele der Privacy Sandbox-Angebote sind für websiteübergreifende Anwendungsfälle ohne Drittanbieter-Cookies oder andere Tracking-Mechanismen ausgelegt. Für bestimmte Privacy Sandbox APIs müssen ausgewählte Dokumente innerhalb eines Fenced Frames gerendert werden.

Für den Gewinner der FLEDGE API-Anzeigenauktion wird beispielsweise ein abgegrenzter Frame erstellt. Die FLEDGE API stellt eine undurchsichtige Quelle bereit, ein ortsunabhängiges URN-Schema, das in einem eingezäunten Frame gerendert werden kann. Mit nicht transparenten Quellen können Websites Inhalte auf ihren Websites anzeigen, ohne dass der Websiteinhaber die URL der Anzeigenquelle kennt.

<fencedframe src="urn:uuid:c36973b5-e5d9-de59-e4c4-364f137b3c7a"></fencedframe>

Fenced Frames ersetzen iFrames letztendlich nicht. Sie müssen sie nicht verwenden. Umrahmte Frames bieten mehr Privatsphäre und werden verwendet, wenn Daten aus verschiedenen Partitionen der obersten Ebene auf derselben Seite angezeigt werden müssen.

In Portale einbetten

Portal (<portal>) ist ein vorgeschlagenes HTML-Element mit einem unabhängigen Browserkontext, das die Seitenübergänge verbessern könnte. Portale beinhalten eingebettete Inhalte wie iframe, aber der Nutzer kann nicht auf den Code des Portals zugreifen. Ein Portal ist nur zur Ansicht gedacht und Nutzer können nicht damit interagieren.

Portale bieten die geringe Komplexität einer mehrseitigen Anwendung mit den nahtlosen Übergängen einer einseitigen Anwendung. Diese Übergänge können animiert werden, sodass der Inhalt im Browserfenster schnell ersetzt wird.

<portal src="https://example.com/"></portal>

Die Portalspezifikation befindet sich noch in der Anfangsphase der Entwicklung.

Andere HTML-Elemente, die für Einbettungen verwendet werden

Im Laufe der Webgeschichte wurden verschiedene HTML-Elemente vorgeschlagen und APIs zum Einbetten von Inhalten erstellt. Eine Zeit lang war es üblich, Websites mit mehreren <frame>- und <frameset>-Elementen zu erstellen. Auf Websites mit mehreren <frameset>-Elementen wurde in der Adressleiste die URL der übergeordneten Seite angezeigt, unabhängig von der Quelle der vielen einzelnen Frames. Das machte es schwierig, Links zu Inhalten auf der Website zu teilen. Diese APIs wurden inzwischen eingestellt.

Es gab auch eine Zeit, in der Plug-in-Technologien wie das Java-<applet>-Element für andere Anwendungsfälle verwendet wurden. Es wurde später durch das Element <object> ersetzt. Beide Elemente wurden häufig zum Anzeigen von Flash-Plug-ins, aber auch zum Anzeigen anderer HTML-Elemente (ähnlich iFrames) verwendet. Andere Elemente wie <canvas>, <audio>, <video> und <svg> haben sowohl die <object>- als auch die <applet>-Elemente obsolet gemacht.

Auch wenn <object> und <embed> noch nicht offiziell eingestellt wurden, sollten Sie sie besser vermeiden, da sie einige merkwürdige Verhaltensweisen aufweisen. <applet> wurde 2017 aus der HTML-Spezifikation entfernt.

Fazit

Mit der vorhandenen iFrame-Spezifikation können Sie Inhalte sicher auf jeder Website einbetten. Weitere HTML-Elemente, darunter <fencedframe> und <portal>, wurden für Sicherheits- und Stilverbesserungen vorgeschlagen. Wir halten Sie über den Fortschritt des Vorschlags für eingezäunte Frames auf dem Laufenden.