Eingebettete Inhalte sind der beste Weg, um Nutzer auf Ihrer Website zu halten und gleichzeitig Inhalte von anderen Seiten oder Websites zu teilen. Dies kann ein eingebetteter Tweet sein, der im Stil und Format von Twitter angezeigt wird. Es kann bis zu eine separate, in Ihre eigene Website eingebettete Website sein, wie z. B. ein eingebetteter Shopify-Shop, bei dem Besucher einen Kauf tätigen können, ohne Ihre Website zu verlassen.
Es ist heute wichtiger denn je, dass unsere Websites geschützt bleiben, wenn wir Inhalte einbetten.
Es gibt mehrere Möglichkeiten für Entwickler, Inhalte auf einer Website einzubetten. Die am häufigsten verwendete Methode ist die Verwendung eines <iframe>, mit dem sich beliebige Inhalte einfach mithilfe einer URL auf Ihrer Website einbetten lassen. Es ist bereits möglich, das Attribut sandbox hinzuzufügen, um die Sicherheit eines iFrames zu erhöhen.
Alternativ können Sie ein vorgeschlagenes HTML-Element verwenden:
<fencedframe>wird als datenschutzfreundliche Möglichkeit zum Einbetten von Drittanbieterinhalten vorgeschlagen.<portal>wird für einen einfacheren Seitenwechsel vorgeschlagen.
Lesen Sie weiter, um zu erfahren, 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 zu einer Kontaktseite oder zum Einblenden von Anzeigen.
<iframe src="https://example.com/maps"></iframe>
Jeder iFrame hat einen eigenen Browserkontext mit einem eigenen Sitzungsverlauf und einem eigenen Dokument. Der Kontext, in den der iFrame eingebettet ist, wird als parent Browserkontext bezeichnet.
Inhalte von Drittanbietern, die in einem iFrame angezeigt werden, können über postMessage() mit der übergeordneten Website interagieren. Dadurch können Entwickler beliebige Werte zwischen Browserkontexten senden. Der Nachrichtenempfänger kann die Werte mit dem Event-Listener onmessage 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, kann es zu unbeabsichtigten Aktionen wie der Ausführung von JavaScript oder der Übertragung eines Formulars kommen.
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>
Sandbox kann dazu führen, dass bestimmte APIs nicht mehr verfügbar sind, 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 mehrere mögliche Werte, darunter allow-forms, allow-same-origin, allow-popups und weitere.
Berechtigungsrichtlinie
Im Zuge der Entwicklung immer leistungsfähigerer Funktionen für das Web wurden Berechtigungsrichtlinien erstellt, mit denen die Berechtigungen für alle diese Funktionen verwaltet werden. 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 über das Attribut allow gewährt werden.
<iframe src="https://example.com" allow="fullscreen"></iframe>
Mit Fence Frames einbetten
Ein Fenced 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 seinem Einbettungskontext ein, um dem Frame Zugriff auf websiteübergreifende Daten zu ermöglichen, ohne sie mit dem Einbettungskontext zu teilen. Ebenso können selbst erhobene Daten auf der Seite der übergeordneten Seite nicht für den Fenced Frame freigegeben 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 sollten. Viele der Privacy Sandbox-Technologien sind auf websiteübergreifende Anwendungsfälle ausgerichtet, ohne Drittanbieter-Cookies oder andere Tracking-Mechanismen. Für bestimmte Privacy Sandbox APIs müssen ausgewählte Dokumente in einem Fenced Frame gerendert werden.
Beispielsweise wird für den Gewinner der FLEDGE API-Anzeigenauktion ein Fenced Frame erstellt. Die FLEDGE API bietet eine opake Quelle, ein standortunabhängiges URN-Schema, das in einem Fenced Frame gerendert werden kann. Bei intransparenten Quellen können Inhalte auf Websites dargestellt werden, ohne dass dem Websiteinhaber die URL der Anzeigenquelle offengelegt wird.
<fencedframe src="urn:uuid:c36973b5-e5d9-de59-e4c4-364f137b3c7a"></fencedframe>
Eingegrenzte Frames ersetzen keine iFrames. Sie müssen sie nicht verwenden. Fenced Frames werden für einen privateren Frame vorgeschlagen, wenn Daten aus verschiedenen Top-Level-Partitionen auf derselben Seite angezeigt werden müssen.
Mit Portalen einbetten
Portal (<portal>) ist ein vorgeschlagenes HTML-Element mit einem unabhängigen Browserkontext, das den Seitenwechsel verbessern könnte. Portale betten Inhalte wie iFrames ein, aber der Nutzer kann nicht auf den Code des Portals zugreifen. Ein Portal ist schreibgeschützt und kann von Nutzern nicht interagiert werden.
Portale bieten die geringe Komplexität einer mehrseitigen Anwendung mit den nahtlosen Übergängen einer einseitigen Anwendung. Diese Übergänge lassen sich animieren, 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 für Einbettungen verwendete HTML-Elemente
Im Laufe des Webprotokolls wurden eine Reihe von HTML-Elementen vorgeschlagen und APIs zum Einbetten von Inhalten entwickelt. Eine Zeit lang wurden Websites mit mehreren <frame>- und <frameset>-Elementen erstellt. Bei Websites mit mehreren <frameset>-Elementen wurde die URL der übergeordneten Seite in der Adressleiste angezeigt, unabhängig von der Quelle der vielen einzelnen Frames. Dadurch war es schwierig, Links zu Inhalten innerhalb der Website zu teilen. Diese APIs wurden inzwischen eingestellt.
Es gab auch eine Zeit, in der Plug-in-Technologien wie das Java-Element <applet> verwendet wurden, um andere Anwendungsfälle abzudecken. Dieses wurde später durch das Element <object> ersetzt. Beide Elemente wurden häufig zum Anzeigen von Flash-Plug-ins, aber auch zur Darstellung anderer HTML-Elemente (ähnlich wie iFrames) verwendet.
Durch andere Elemente wie <canvas>, <audio>, <video> und <svg> wurden sowohl das <object>- als auch das <applet>-Element als veraltet gerendert.
Obwohl <object> und <embed> noch nicht offiziell verworfen wurden, sollte sie vermieden werden, insbesondere da sie ein seltsames Verhalten haben.
<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, einschließlich <fencedframe> und <portal>, wurden zur Verbesserung der Sicherheit und des Stils vorgeschlagen. Wir informieren Sie laufend über den Fortschritt des Fenced Frames-Angebots.
Hero-Image von Jackson So.