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 so klein wie ein eingebetteter Tweet sein, der im Stil und Format von Twitter angezeigt wird. Es kann sich um eine vollständig separate Website handeln, die in deine eigene eingebettet ist, z. B. ein eingebetteter Shopify-Shop, in dem Besucher etwas kaufen können, ohne deine 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 möglichen Anwendungsfälle verwendet werden, z. B. zum Hinzufügen von Karten oder Formularen auf einer Kontaktseite und zum Präsentieren 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.
Inhalte von Drittanbietern, die in einem Iframe angezeigt werden, 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);
})
Mehr 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 Berechtigungen, die einer übergeordneten Website gewährt wurden, können mithilfe des Attributs allow auch dem IFrame 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 der obersten Ebene Daten partitionieren sollten. Viele der Privacy Sandbox-Vorschläge sollen websiteübergreifende Anwendungsfälle ohne Drittanbieter-Cookies oder andere Tracking-Mechanismen erfüllen. Bei bestimmten Privacy Sandbox APIs müssen bestimmte Dokumente möglicherweise in einem abgegrenzten Frame gerendert werden.
Beispielsweise wird für den Gewinner der FLEDGE API-Anzeigenauktion ein eingegrenzter 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>
Abgegrenzte Frames werden iframes nicht ersetzen. 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 verwendet, aber auch zum Anzeigen anderer HTML-Elemente (ähnlich wie iframes).
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 in jede 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.