Zeigen Iframe in der React-Anwendung an

1. Verwendung von das Attribut dangerouslySetInnerHTML zur Anzeige von Iframe in React
2. Erstellen Sie eine benutzerdefinierte Komponente für Iframe in React
3. Die Auswirkung des Einfügens von iframe in React-Anwendungen

Jede moderne Anwendung benötigt eine HTML-Struktur. React-Entwickler verwenden JSX, um das Markup ihrer Anwendungen einfach zu strukturieren. Die Syntax von JSX sieht sehr nach HTML aus, daher ist es einfach zu schreiben, selbst wenn Sie React noch nicht kennen.

Verwendung von das Attribut dangerouslySetInnerHTML zur Anzeige von Iframe in React

In einigen Fällen müssen Sie einen HTML-Code in Ihr vorhandenes Markup einfügen. In diesem Artikel besprechen wir den Fall des Einfügens eines iframe-Tags in Ihre Anwendung.

Es ist nicht ungewöhnlich, einen vorstrukturierten HTML-Code als Antwort vom Server zu erhalten. Meistens ist es als String formatiert.

Der schwierigste Teil beim Einfügen eines iframe in Ihre React-Anwendung ist das Parsen des String-Werts, um seine Eigenschaften wie Quelle, Breite und Höhe zu erhalten. Etwas einfacher ist es, wenn die vom Server empfangenen Daten strukturierter sind und die Breite, Höhe und Quelle eines iframe angeben. Beispielsweise kann es sich um ein Objekt handeln, dessen Eigenschaften diesen Werten entsprechen.

Der einfachste Weg, einen iframe in Ihre React-Anwendung einzufügen, ist die Verwendung des dangerouslySetInnerHTML-Attributs. Der Wert dieses Attributs sollte ein Objekt mit dem Schlüssel __html und dem String-HTML-Wert sein.

Schauen wir uns ein Beispiel an:

export default function App(props) {
  const {
    iframeSource = '<iframe src="https://codesandbox.io/"></iframe>'
  } = props;
  return <div className="App" dangerouslySetInnerHTML={{__html: iframeSource}}></div>;
}

Es ist eine ziemlich einfache Demonstration. Wir haben das Prop iframeSource mit einem Standardwert, ein iframe-Tag in Form einer Zeichenfolge.

Wir geben nur ein div-Element mit einem dangerouslySetInnerHTML-Attribut zurück, das auf das Objekt mit __html-Schlüssel und einem HTML-String gesetzt wird.

Sie können den Beispielcode auf codesandbox testen.

Erstellen Sie eine benutzerdefinierte Komponente für Iframe in React

Abhängig von der Struktur Ihrer Quelle ist es möglicherweise besser, eine benutzerdefinierte Komponente zu erstellen, die kein dangerouslySetInnerHTML verwendet. Wenn die iframe-Eigenschaften wie source, width und height verfügbar sind, können Sie diese als Requisiten weitergeben und ganz auf dangerouslySetInnerHTML verzichten.

Schauen wir uns ein Beispiel an:

export default function Component(props){
   const {source, height, width} = this.props
   return (
   	<div>          
      <iframe src={source} height={height} width={width}/>         
    </div>
   ) 
}   

Es ist eine viel einfachere Lösung. Sie können diese Komponente überall in Ihrer Anwendung verwenden, solange Sie über die erforderlichen Werte verfügen, die Sie als Requisiten weitergeben können.

Manchmal müssen Sie den String parsen, um die Werte wie Höhe, Breite und Quelle für das iframe-Tag zu extrahieren. Es ist immer besser, das Attribut dangerouslySetInnerHTML aus den unten beschriebenen Sicherheitsgründen zu vermeiden.

Die Auswirkung des Einfügens von iframe in React-Anwendungen

Im Allgemeinen gilt das Einfügen von iframe in Ihre React-Anwendungen als unsichere Vorgehensweise. Das Problem ist, dass Sie die Quellseite nicht kontrollieren und sie alles anzeigen könnte.

Das Laden der Seite im iframe kann zu lange dauern, was sich auch auf die Performance der gesamten Seite auswirken kann.

Darüber hinaus setzt das Attribut dangerouslySetInnerHTML Ihre Besucher XSS-Angriffen aus. Es gibt auch andere Sicherheitsrisiken und potenzielle Lecks.

Als Faustregel gilt: Wenn Ihre React-Anwendung ein iframe-Tag enthalten muss, stellen Sie sicher, dass Sie darauf vertrauen, dass die Quellseite keine böswilligen Versuche unternimmt.