Eingebettete Inhalte sind die beste Möglichkeit, Nutzer auf Ihrer Website zu halten und gleichzeitig Inhalte von anderen Seiten oder Websites zu teilen. Das kann ein eingebetteter Tweet sein, der im Stil und Format von Twitter angezeigt wird. Das kann eine vollständig separate Website sein, die in Ihre eigene eingebettet ist, z. B. ein eingebetteter Shopify-Shop, in dem Besucher einen Kauf abschließen 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 auf einer Website einzubetten. Die gängigste Methode ist die Verwendung von <iframe>, mit der Sie beliebige Inhalte mit nur einer URL in Ihre Website einbetten können. Das Attribut sandbox kann bereits hinzugefügt werden, um ein iFrame sicherer zu machen.
Alternativ können Sie ein vorgeschlagenes HTML-Element verwenden:
<fencedframe>ist ein Vorschlag für eine datenschutzfreundliche Methode zum Einbetten von Drittanbieterinhalten.<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 viele Anwendungsfälle verwendet werden, z. B. zum Hinzufügen von Karten oder Formularen auf einer Kontaktseite und zum Anzeigen von Anzeigen.
<iframe src="https://example.com/maps"></iframe>
Jeder iFrame hat einen eigenen Browserkontext mit eigenem Sitzungsverlauf und eigenem Dokument. Der Kontext, in dem das iFrame eingebettet ist, wird als übergeordneter Browsing-Kontext 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 Event-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 (z. B. die Ausführung von JavaScript oder das Senden eines Formulars) ausgeführt werden.
Um dies zu vermeiden, wird mit dem sandbox-Attribut die Ausführung von APIs im iFrame eingeschränkt und potenziell schädliche Funktionen werden deaktiviert.
<iframe src="https://example.com" sandbox></iframe>
In der Sandbox sind möglicherweise bestimmte APIs nicht 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>
Es gibt eine Reihe möglicher Werte für die sandbox-Spezifikation, 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 erstellt, um Berechtigungen für alle Funktionen zu verwalten. Eine Berechtigungsrichtlinie kann auf eine übergeordnete Website und auf iframe-Inhalte angewendet werden. Die Berechtigungen, die einer übergeordneten Website gewährt werden, können auch dem iFrame gewährt werden. Verwenden Sie dazu das Attribut allow.
<iframe src="https://example.com" allow="fullscreen"></iframe>
Mit Fenced Frames einbetten
Ein Fenced Frame (<fencedframe>) ist ein vorgeschlagenes HTML-Element für eingebettete Inhalte, ähnlich einem 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 mit dem Einbettungskontext zu teilen. Ebenso dürfen selbst erhobene Daten auf der Seite des übergeordneten Frames nicht für den eingezäunten Frame freigegeben werden.
<fencedframe src="https://3rd.party.example"></fencedframe>
Fenced Frames ist ein Privacy Sandbox-Vorschlag, der vorschlägt, dass Websites der obersten Ebene Daten partitionieren sollten. Viele der Privacy Sandbox-Vorschläge zielen darauf ab, websiteübergreifende Anwendungsfälle ohne Drittanbieter-Cookies oder andere Tracking-Mechanismen zu ermöglichen. Für bestimmte Privacy Sandbox-APIs ist es möglicherweise erforderlich, dass ausgewählte Dokumente in einem Fenced Frame gerendert werden.
Für den Gewinner der FLEDGE API-Anzeigenauktion wird beispielsweise ein umzäunter Frame erstellt. Die FLEDGE API stellt eine opaque source (undurchsichtige Quelle) bereit, ein ortsunabhängiges URN-Schema, das in einem Fenced Frame gerendert werden kann. Mit intransparenten Quellen können Websites Inhalte auf ihren Websites anzeigen, ohne die URL der Anzeigenquelle für den Websiteinhaber offenzulegen.
<fencedframe src="urn:uuid:c36973b5-e5d9-de59-e4c4-364f137b3c7a"></fencedframe>
Letztendlich werden Fenced Frames iFrames nicht ersetzen. Sie müssen sie nicht verwenden. Fenced Frames werden als privaterer Frame vorgeschlagen, wenn Daten aus verschiedenen Partitionen auf oberster Ebene auf derselben Seite angezeigt werden müssen.
Mit Portalen einbetten
Portal (<portal>) ist ein vorgeschlagenes HTML-Element mit einem unabhängigen Browsing-Kontext, das die Seitenübergänge verbessern könnte. In Portale werden Inhalte wie iFrames eingebettet, aber der Nutzer kann nicht auf den Code des Portals zugreifen. Ein Portal ist schreibgeschützt 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 im Anfangsstadium der Entwicklung.
Andere HTML-Elemente für Einbettungen
Im Laufe der Webgeschichte wurden eine Reihe von HTML-Elementen vorgeschlagen und APIs erstellt, um Inhalte einzubetten. Eine Zeit lang war es üblich, Websites mit mehreren <frame>- und <frameset>-Elementen zu erstellen. Bei Websites mit mehreren <frameset>-Elementen wurde in der Adressleiste die URL der übergeordneten Seite angezeigt, unabhängig von der Quelle der einzelnen Frames. Dadurch war es schwierig, Links zu Inhalten auf der Website zu teilen. Diese APIs werden nicht mehr unterstützt.
Es gab auch eine Zeit, in der Plug-in-Technologien wie das Java-Element <applet> für andere Anwendungsfälle verwendet wurden. Es wurde später durch das <object>-Element ersetzt. Beide Elemente wurden häufig zum Anzeigen von Flash-Plug-ins verwendet, aber auch zum Anzeigen anderer HTML-Elemente (ähnlich wie iFrames).
Andere Elemente wie <canvas>, <audio>, <video> und <svg> haben sowohl das <object>- als auch das <applet>-Element überflüssig gemacht.
Obwohl <object> und <embed> noch nicht offiziell eingestellt wurden, sollten Sie sie besser vermeiden, insbesondere da sie seltsame Verhaltensweisen aufweisen.
<applet> wurde 2017 aus der HTML-Spezifikation entfernt.
Fazit
Sie können Inhalte sicher in jede Website einbetten, indem Sie die vorhandene iFrame-Spezifikation verwenden. Es wurden weitere HTML-Elemente vorgeschlagen, darunter <fencedframe> und <portal>, um die Sicherheit und das Design zu verbessern. Wir werden Sie über die Fortschritte beim Vorschlag für Fenced Frames auf dem Laufenden halten.