Einbetten: iframes, SVG & Sicherheit

Keine Webseite ist eine Insel. Das Erklärvideo vom Videoportal, die Anfahrtskarte, das Icon neben dem Menüpunkt – moderne Seiten betten ständig Inhalte ein, die von fremden Servern kommen oder als Grafik direkt im Quelltext leben. In dieser Lektion lernst du die zwei wichtigsten Werkzeuge dafür kennen: das <iframe>-Element für fremde Dokumente und SVG für gestochen scharfe Vektorgrafiken. Und weil man sich mit fremdem Inhalt immer auch fremde Interessen auf die Seite holt, ziehen sich zwei Fragen als roter Faden durch: Wie bettest du sicher ein – und was bedeutet das Ganze für den Datenschutz deiner Besucher?

Ein <iframe> („inline frame“) erzeugt ein rechteckiges Fenster in deiner Seite, in dem ein komplett eigenständiges HTML-Dokument lebt – mit eigenem CSS, eigenen Skripten, eigener Herkunft. Dein Stylesheet greift dort nicht hinein, und umgekehrt bleibt das fremde CSS draußen. Das Attribut src nennt die Adresse des eingebetteten Dokuments; width und height reservieren den Platz – genau wie bei Bildern verhindert das ein Springen des Layouts beim Laden.

Ein Attribut ist dabei keine Kür, sondern Pflicht: title. Screenreader kündigen ein iframe als eigenen Bereich an – und ohne title hören ihre Nutzerinnen nur „Frame“ und müssen blind entscheiden, ob sich das Hineinspringen lohnt. Ein title="Anfahrtskarte zur Backstube" beantwortet die Frage in einem Wort. Ohne aussagekräftigen title ist jedes iframe ein Barrierefreiheits-Fehler.

Und weil eingebettete Dokumente teuer sind – der Browser lädt ein komplettes zweites Dokument samt aller seiner Ressourcen –, gilt auch hier: loading="lazy" lädt das iframe erst, wenn es in die Nähe des sichtbaren Bereichs scrollt. Für ein Video im Fußbereich spart das spürbar Ladezeit und Datenvolumen.

Ohne weitere Angaben darf ein eingebettetes Dokument erstaunlich viel: Skripte ausführen, Formulare absenden, Pop-ups öffnen, in manchen Konstellationen sogar die äußere Seite umleiten. Bei Inhalten, die du nicht selbst kontrollierst, ist das ein Blankoscheck. Das Attribut sandbox dreht die Logik deshalb um – und zwar nach dem Whitelist-Prinzip: Ein leeres sandbox verbietet erst einmal alles. Danach erlaubst du gezielt nur das, was der Inhalt wirklich braucht:

• allow-scripts – JavaScript darf laufen.
• allow-forms – Formulare dürfen abgesendet werden.
• allow-popups – neue Fenster oder Tabs dürfen geöffnet werden.
• allow-same-origin – der Inhalt behält seine Herkunft und darf z. B. auf seine Cookies zugreifen.

Zwei weitere Attribute ergänzen die Zähmung: allow steuert über die sogenannte Permissions Policy, welche Browser-Funktionen das eingebettete Dokument nutzen darf – etwa allow="fullscreen" für den Vollbildknopf eines Videos oder allow="geolocation" für eine Karte, die den Standort anzeigen soll. Alles, was du nicht ausdrücklich nennst (Kamera, Mikrofon, Autoplay …), bleibt tabu. Und referrerpolicy="no-referrer" sorgt dafür, dass der fremde Server nicht erfährt, von welcher Unterseite deiner Website der Besuch kommt.

Warum die ganze Vorsicht? Ein Angriffsszenario macht es greifbar: Clickjacking. Dabei bettet eine Angreiferseite eine fremde Seite – etwa das eingeloggte Konto eines sozialen Netzwerks – per CSS unsichtbar über einen harmlos wirkenden Knopf. Die Besucherin glaubt, „Gewinnspiel starten“ zu klicken. Tatsächlich trifft ihr Klick den durchsichtigen „Teilen“- oder „Kaufen“-Knopf im iframe darüber – ausgeführt mit ihren echten, eingeloggten Rechten. Der Klick wurde gestohlen, daher der Name.

Die Lehre daraus gilt in beide Richtungen. Erstens: Fremde Inhalte auf deiner Seite bekommen nur so viele Rechte wie nötig – genau dafür gibt es sandbox und allow. Denn ein fremder Dienst kann morgen andere Inhalte ausliefern als heute, kann übernommen werden oder schlicht neue Tracker nachladen; „gestern war es harmlos“ ist keine Sicherheitsstrategie. Zweitens: Auch deine Seite kann Opfer werden, wenn andere sie einbetten. Dagegen schützt man sich serverseitig – der HTTP-Header Content-Security-Policy legt mit der Direktive frame-ancestors fest, wer deine Seite einrahmen darf. Das ist Server-Konfiguration statt HTML, aber du solltest wissen, dass es diese Schutzschicht gibt.

Es gibt einen zweiten Grund, fremde Embeds nicht bedenkenlos einzubauen – und der betrifft nicht deine Seite, sondern deine Besucher. In dem Moment, in dem der Browser ein eingebettetes YouTube-Video oder eine Karte lädt, kontaktiert er die Server des Anbieters: Er übermittelt die IP-Adresse, häufig werden Cookies gesetzt und Nutzungsdaten erfasst – und zwar bevor die Besucherin auch nur einmal geklickt hat. In der EU ist das datenschutzrechtlich heikel, denn für solche Datenflüsse an Dritte braucht es in aller Regel eine Einwilligung.

Die etablierte Antwort darauf ist die „Zwei-Klick-Lösung“: Beim Laden der Seite erscheint statt des echten iframes zunächst nur ein lokal gehostetes Vorschaubild mit einem Hinweis („Beim Abspielen werden Daten an YouTube übertragen“). Erst wenn die Besucherin aktiv klickt, tauscht ein kleines Skript den Platzhalter gegen das echte iframe aus. Kein Klick, kein Datenfluss – so einfach ist das Konzept. Ob und wie du es rechtlich umsetzen musst, klärst du im Zweifel mit fachkundiger Beratung; das technische Prinzip aber solltest du kennen und anbieten können:

Wechseln wir die Perspektive: vom Einbetten fremder Dokumente zum Einbetten von Grafiken. SVG (Scalable Vector Graphics) ist ein XML-Format, das Grafiken nicht als Pixelraster speichert, sondern als Beschreibung von Formen: „ein Kreis hier, eine geschwungene Linie dort“. Die Folgen sind bemerkenswert: SVGs bleiben in jeder Größe gestochen scharf – vom Favicon bis zur Plakatwand –, sind oft nur wenige hundert Bytes groß und lassen sich als Text lesen, durchsuchen und versionieren. Für Icons, Logos und Diagramme sind sie heute die erste Wahl.

Das Beste daran: Einfache SVGs kannst du von Hand lesen und schreiben. Das viewBox-Attribut spannt ein Koordinatensystem auf (im Beispiel: 100 × 100 Einheiten, Ursprung oben links), <circle> zeichnet einen Kreis mit Mittelpunkt (cx, cy) und Radius r, und <path> folgt den Anweisungen in seinem d-Attribut: M heißt „gehe zu diesem Punkt“, Q zeichnet eine Kurve. Lies das Beispiel Zeile für Zeile – es ist zugänglicher, als es aussieht:

Für den Einbau in deine Seite gibt es drei Wege mit klar unterschiedlichen Eigenschaften:

1. Als Bild: <img src="logo.svg" alt="Logo der Backstube">. Der einfachste Weg – cachebar, vertraut, und eventuell im SVG enthaltene Skripte werden gar nicht erst ausgeführt (ein Sicherheitsplus bei Dateien aus fremder Quelle). Der Preis: Von außen kommst du per CSS nicht an die Innereien der Grafik heran; sie ist eine Blackbox wie ein JPEG.
2. Inline: Du schreibst das <svg>-Element direkt ins HTML. Jetzt ist jede Form Teil des DOM und per CSS stylebar – Hover-Effekte, Animationen und Dark-Mode inklusive. Der wichtigste Trick heißt currentColor: Setzt du fill="currentColor" oder stroke="currentColor", erbt die Grafik automatisch die Textfarbe ihrer Umgebung. Ein Icon neben einem Link färbt sich dann beim Hover einfach mit – ganz ohne Zusatzcode.
3. Legacy: <object> und <embed> waren früher für SVG und Browser-Plugins gängig. Du wirst sie in altem Code antreffen; für neue Projekte brauchst du sie nicht mehr.

Zum Schluss die Abgrenzung zu einem Element, das oft im selben Atemzug genannt wird: <canvas> ist eine leere Pixel-Zeichenfläche, auf die ausschließlich JavaScript malt – ohne Skript bleibt sie schlicht leer. Ihre Inhalte sind keine DOM-Elemente, haben also weder Semantik noch eingebaute Barrierefreiheit. Merke dir die Arbeitsteilung: SVG für Icons, Logos und Diagramme – <canvas> für Spiele und Visualisierungen mit tausenden bewegten Objekten.

Deine Seiten können jetzt sicher einbetten – Zeit, sie auch für Maschinen unmissverständlich zu machen. In der nächsten Lektion „Strukturierte Daten & Maschinenlesbarkeit“ lernst du, wie du Suchmaschinen mit schema.org und JSON-LD erklärst, was deine Inhalte bedeuten – und dir damit auffälligere Suchergebnisse verdienst.