HTML iFrames

Ein HTML iFrame (inline frame) ist ein Element, das es ermöglicht, eine externe Webseite oder ein anderes Dokument in die eigene Webseite einzubetten. iFrames werden häufig verwendet, um Inhalte von Drittanbietern wie Videos, Karten oder Werbeanzeigen in eine Seite zu integrieren, ohne den ursprünglichen Inhalt der Seite zu verändern.

1. Grundstruktur eines iFrames

Das <iframe>-Element wird verwendet, um ein externes Dokument auf einer Webseite einzubinden. Es hat mehrere Attribute, um das Aussehen und Verhalten des eingebetteten Inhalts zu steuern.

Beispiel für ein einfaches iFrame:

<iframe src="https://www.beispielseite.de" width="600" height="400" title="Beispiel Webseite"></iframe>

In diesem Beispiel wird die Webseite https://www.beispielseite.de innerhalb eines iFrames auf der aktuellen Webseite angezeigt. Das iFrame ist 600 Pixel breit und 400 Pixel hoch.

2. Attribute des iFrames

iFrames haben eine Vielzahl von Attributen, um ihre Funktionalität und Darstellung anzupassen:

• src: Die URL der eingebetteten Seite.
• width: Die Breite des iFrames in Pixeln (oder in Prozent).
• height: Die Höhe des iFrames in Pixeln (oder in Prozent).
• title: Eine Beschreibung des Inhalts des iFrames (wichtig für Barrierefreiheit).
• name: Gibt einen Namen für den iFrame an, der z. B. in einem Link oder Formular verwendet werden kann.
• sandbox: Beschränkt die Aktionen, die innerhalb des iFrames durchgeführt werden können (z. B. das Deaktivieren von Scripten oder das Öffnen von Pop-ups).
• allowfullscreen: Ermöglicht das Umschalten in den Vollbildmodus für den eingebetteten Inhalt.

Beispiel für ein iFrame mit mehreren Attributen:

<iframe src="https://www.beispielseite.de" width="800" height="600" title="Beispiel Webseite" allowfullscreen></iframe>

Hier wird ein iFrame mit der Möglichkeit zum Umschalten in den Vollbildmodus angezeigt.

3. Verwendung des sandbox-Attributs

Das sandbox-Attribut bietet eine Reihe von Sicherheitsoptionen für iFrames. Es beschränkt das Verhalten des eingebetteten Inhalts und verhindert Aktionen wie das Ausführen von Scripten oder das Navigieren auf eine andere Seite.

Beispiel für ein iFrame mit eingeschränktem Verhalten:

<iframe src="https://www.beispielseite.de" width="600" height="400" sandbox></iframe>

In diesem Beispiel wird das sandbox-Attribut verwendet, um alle möglichen Aktionen innerhalb des iFrames zu blockieren.

Erlaubte Werte für das sandbox-Attribut:

• allow-same-origin: Erlaubt dem eingebetteten Inhalt, als wäre er von derselben Quelle (Domain).
• allow-scripts: Erlaubt das Ausführen von JavaScript im iFrame.
• allow-popups: Erlaubt das Öffnen von Pop-ups.
• allow-forms: Erlaubt das Absenden von Formularen im iFrame.

Sie können mehrere Werte kombinieren, um die gewünschten Berechtigungen zu erteilen.

<iframe src="https://www.beispielseite.de" width="600" height="400" sandbox="allow-scripts allow-same-origin"></iframe>

In diesem Beispiel darf der iFrame JavaScript ausführen und auf die Ressourcen der gleichen Domain zugreifen.

4. iFrames und responsive Design

Standardmäßig haben iFrames eine feste Größe, die durch die Attribute width und height festgelegt wird. Um iFrames in einem responsiven Design zu verwenden, sollten Sie CSS verwenden, um die Größe dynamisch an verschiedene Bildschirmgrößen anzupassen.

Beispiel für ein responsives iFrame:

<iframe src="https://www.beispielseite.de" style="width: 100%; height: 400px; border: none;"></iframe>

In diesem Beispiel passt sich das iFrame an die Breite des übergeordneten Containers an, während die Höhe auf 400 Pixel festgelegt bleibt.

Flexibles iFrame mit CSS:

.responsive-iframe {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* Verhältnis 16:9 */
}

.responsive-iframe iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

<div class="responsive-iframe">
    <iframe src="https://www.beispielseite.de" frameborder="0" allowfullscreen></iframe>
</div>

In diesem Beispiel bleibt das Seitenverhältnis des iFrames (16:9) erhalten, während sich die Größe an die Breite des Containers anpasst.

5. Sicherheitsaspekte von iFrames

iFrames können ein Sicherheitsrisiko darstellen, wenn sie Inhalte von nicht vertrauenswürdigen Quellen laden. Angreifer können versuchen, schädliche Skripte auszuführen oder Benutzerinteraktionen zu manipulieren. Es gibt verschiedene Maßnahmen, um iFrames sicherer zu machen:

• sandbox-Attribut verwenden, um den Zugriff einzuschränken.
• Content Security Policy (CSP) verwenden, um zu kontrollieren, welche Inhalte in iFrames geladen werden dürfen.
• Das Attribut allowfullscreen gezielt verwenden, um zu verhindern, dass iFrames den Vollbildmodus aktivieren können.

Häufig gestellte Fragen