Afficher Iframe dans l'application React

1. Utilisez l’attribut dangerouslySetInnerHTML pour afficher Iframe dans React
2. Créer un composant personnalisé pour Iframe dans React
3. l’effet de mettre iframe dans les applications React

Chaque application moderne a besoin d’une structure HTML. Les développeurs React utilisent JSX pour structurer facilement le balisage de leurs applications. La syntaxe de JSX ressemble beaucoup à HTML, il est donc facile à écrire même si vous êtes complètement nouveau dans React.

Utilisez l’attribut dangerouslySetInnerHTML pour afficher Iframe dans React

Dans certains cas, vous devez injecter un code HTML dans votre balisage existant. Dans cet article, nous aborderons le cas de l’insertion d’une balise iframe dans votre application.

Il n’est pas rare d’obtenir un code HTML pré-structuré en réponse du serveur. La plupart du temps, il est formaté comme une chaîne.

La partie la plus difficile de l’insertion d’un iframe dans votre application React consiste à analyser la valeur de la chaîne pour obtenir ses propriétés, telles que la source, la largeur et la hauteur. C’est un peu plus simple si les données reçues du serveur sont plus structurées et précisent la largeur, la hauteur et la source d’une iframe. Par exemple, il peut s’agir d’un objet avec des propriétés correspondant à ces valeurs.

Le moyen le plus simple d’insérer un iframe dans votre application React est d’utiliser l’attribut dangerouslySetInnerHTML. La valeur de cet attribut doit être un objet avec la clé __html et la valeur HTML de la chaîne.

Regardons un exemple :

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

C’est une démonstration assez simple. Nous avons le prop iframeSource avec une valeur par défaut, une balise iframe sous la forme d’une chaîne.

Nous renvoyons un seul élément div avec un attribut dangerouslySetInnerHTML, qui est défini sur l’objet avec la clé __html et une chaîne HTML.

Vous pouvez tester l’exemple de code sur codesandbox.

Créer un composant personnalisé pour Iframe dans React

Selon la structure de votre source, il peut être préférable de créer un composant personnalisé qui n’utilise pas dangerouslySetInnerHTML. Si les propriétés iframe telles que source, width et height sont disponibles, vous pouvez les transmettre comme accessoires et éviter d’utiliser dangerouslySetInnerHTML.

Regardons un exemple :

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

C’est une solution beaucoup plus simple. Vous pouvez utiliser ce composant n’importe où dans votre application, tant que vous avez les valeurs nécessaires à transmettre en tant qu’accessoires.

Parfois, vous devrez analyser la chaîne pour extraire les valeurs telles que la hauteur, la largeur et la source de la balise iframe. Il est toujours préférable d’éviter d’utiliser l’attribut dangerouslySetInnerHTML pour des raisons de sécurité décrites ci-dessous.

l’effet de mettre iframe dans les applications React

En général, mettre iframe dans vos applications React est considéré comme une pratique dangereuse. Le problème est que vous ne contrôlez pas la page source et qu’elle peut afficher n’importe quoi.

La page dans l’iframe peut prendre trop de temps à charger, ce qui peut également affecter les performances de la page entière.

En plus de cela, l’attribut dangerouslySetInnerHTML expose vos visiteurs aux attaques XSS. Il existe également d’autres risques de sécurité et de fuites potentielles.

En règle générale, si votre application React doit contenir une balise iframe, assurez-vous de faire confiance à la page source pour ne rien tenter de malveillant.