So zeigen Sie ein iframe in einer React-Anwendung an

Um ein iframe in React anzuzeigen, verwenden Sie vorzugsweise ein <iframe>-Element mit expliziten Props, wenn Ihnen Quelle und Abmessungen als Daten vorliegen. Setzen Sie dangerouslySetInnerHTML nur dann ein, wenn die Eingabe bereits als HTML-Zeichenfolge vorliegt und als Markup eingefügt werden muss.

Ein iframe mit einer React-Komponente aus strukturierten Daten rendern

Wenn Quelle, Titel und Abmessungen des iframes als einzelne Werte vorliegen, übergeben Sie sie als Props an eine Funktionskomponente. So bleiben die Attribute des iframes in der Komponente sichtbar und Sie müssen keine HTML-Zeichenfolge parsen. Eine typische Komponente ist function IframeEmbed({ src, title, width = 640, height = 360 }) { return <iframe src={src} title={title} width={width} height={height} />; }; rendern Sie sie mit Werten wie <IframeEmbed src="https://example.com/embed" title="Example content" />.

Das zugehörige Browser-Markup für diese Werte lautet:

<iframe src="https://example.com/embed" title="Example content" width="640" height="360"></iframe>

Übergeben Sie die Werte in Ihrer React-Komponente wie oben gezeigt direkt. Versehen Sie das iframe mit einem aussagekräftigen title, damit Nutzer assistiver Technologien seinen Inhalt erkennen können. Wenn der Server statt einzelner Felder eine Zeichenfolge sendet, verwenden Sie den HTML-Zeichenfolgen-Ansatz weiter unten nur dann, wenn diese Darstellung erforderlich ist. Parsen Sie Markup nicht, nur um Werte herauszulösen, die Sie als strukturierte Daten anfordern können.

Dieses JavaScript-Beispiel zeigt die Form der strukturierten Daten und gibt Titel und Abmessungen aus. Die sichtbaren Beschriftungen im unveränderten Beispiel bleiben auf Englisch. Um dieselben Werte an die Komponente zu übergeben, rendern Sie <IframeEmbed {...iframe} />; die Spread-Syntax übergibt src, title, width und height als Props:

const iframe = {
  src: "https://example.com/embed",
  title: "Example content",
  width: 640,
  height: 360
};

console.log(`${iframe.title}: ${iframe.width}×${iframe.height}`);

Ein iframe aus einer HTML-Zeichenfolge mit dangerouslySetInnerHTML einbetten

Manche APIs liefern ein vollständiges iframe-Tag als Zeichenfolge zurück. React kann dieses Markup über die Prop dangerouslySetInnerHTML einfügen. Ihr Wert ist ein Objekt mit dem Schlüssel __html. Setzen Sie zum Beispiel const iframeSource = '<iframe src="https://example.com/embed" title="Example content" width="640" height="360"></iframe>'; und rendern Sie <div dangerouslySetInnerHTML={{ __html: iframeSource }} />.

Dieser Ansatz erwartet HTML-Markup und kein Objekt mit iframe-Eigenschaften. Behandeln Sie die Zeichenfolge als vertrauenswürdiges HTML: Werden über dangerouslySetInnerHTML von Angreifern kontrollierte Inhalte gerendert, kann dadurch Cross-Site-Scripting (XSS) ermöglicht werden. Validieren oder bereinigen Sie Daten an der passenden Vertrauensgrenze, bevor Sie sie rendern. Bitten Sie bei neuen Integrationen nach Möglichkeit den Server um strukturierte iframe-Werte und verwenden Sie ein normales <iframe>-Element.

Sicherheit und Ladeverhalten von iframes verstehen

Ein iframe ist in einer React-Anwendung nicht grundsätzlich unsicher. Die Same-Origin-Policy des Browsers schränkt eine eingebettete Seite mit einer anderen Origin dabei ein, das Dokument der übergeordneten Seite zu lesen oder zu ändern. Über Mechanismen wie postMessage können die Seiten dennoch kommunizieren. Eine eingebettete Seite derselben Origin kann mit ihrer übergeordneten Seite interagieren, sofern keine Einschränkungen dies verhindern. Auch die Quelle der Seite ist wichtig: Wählen Sie ein vertrauenswürdiges Ziel und verwenden Sie das iframe-Attribut sandbox, wenn dessen Einschränkungen zum eingebetteten Inhalt passen. Sandboxing kann beispielsweise Skripte oder Navigation einschränken. Fügen Sie nur die Berechtigungstoken hinzu, die der Inhalt benötigt, da manche Kombinationen die Isolation schwächen können.

Das Laden einer eingebetteten Seite kann Zeit und Ressourcen beanspruchen und dadurch das Gesamterlebnis der Seite beeinflussen. Die Auswirkungen hängen von der eingebetteten Website, dem Gerät und der Art des iframe-Ladens ab; eine Leistungseinbuße tritt nicht zwangsläufig ein. Wenn es Ihr Anwendungsfall unterstützt, kann das Attribut loading="lazy" das Laden eines iframe außerhalb des sichtbaren Bereichs aufschieben. Legen Sie eine geeignete Größe fest, um Layoutverschiebungen zu verringern, und prüfen Sie das Verhalten der eingebetteten Seite mit der Sicherheitsrichtlinie Ihrer Anwendung.