Afficher Iframe dans l'application React

Pour afficher un iframe dans React, privilégiez un élément <iframe> avec des props explicites lorsque sa source et ses dimensions sont disponibles sous forme de données. Utilisez dangerouslySetInnerHTML uniquement si l’entrée est déjà une chaîne HTML qui doit être insérée comme balisage.

Afficher un iframe à partir de données structurées avec un composant React

Lorsque la source, le titre et les dimensions de l’iframe sont des valeurs distinctes, transmettez-les comme props à un composant fonctionnel. Les attributs de l’iframe restent ainsi visibles dans le composant, sans avoir à analyser une chaîne HTML. Un composant courant est function IframeEmbed({ src, title, width = 640, height = 360 }) { return <iframe src={src} title={title} width={width} height={height} />; } ; vous pouvez le rendre avec des valeurs comme <IframeEmbed src="https://example.com/embed" title="Example content" />.

Voici le balisage du navigateur correspondant à ces valeurs :

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

Dans votre composant React, transmettez directement les valeurs comme indiqué ci-dessus. Donnez à l’iframe un title explicite afin que les personnes utilisant des technologies d’assistance puissent identifier son contenu. Si le serveur renvoie une chaîne plutôt que des champs distincts, n’utilisez l’approche par chaîne HTML ci-dessous que si cette représentation est nécessaire ; n’analysez pas le balisage pour récupérer des valeurs que vous pouvez demander sous forme de données structurées.

Cet exemple JavaScript montre la structure des données et affiche le titre et les dimensions. Pour transmettre ces mêmes valeurs au composant, rendez <IframeEmbed {...iframe} /> ; la syntaxe de décomposition fournit src, title, width et height comme props. La sortie associée affiche le titre et les dimensions ; ses éventuels libellés visibles restent en anglais, car le bloc est conservé à l’identique :

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

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

Intégrer un iframe à partir d’une chaîne HTML avec dangerouslySetInnerHTML

Certaines API renvoient une balise iframe complète sous forme de chaîne. React peut insérer ce balisage avec la prop dangerouslySetInnerHTML, dont la valeur est un objet contenant la clé __html. Par exemple, définissez const iframeSource = '<iframe src="https://example.com/embed" title="Example content" width="640" height="360"></iframe>';, puis rendez <div dangerouslySetInnerHTML={{ __html: iframeSource }} />.

Cette forme attend du balisage HTML, et non un objet contenant les propriétés de l’iframe. Traitez la chaîne comme du HTML de confiance : afficher du contenu contrôlé par un attaquant avec dangerouslySetInnerHTML peut permettre une attaque de script intersites (XSS). Validez ou assainissez les données à la frontière de confiance appropriée avant de les afficher. Pour les nouvelles intégrations, demandez si possible au serveur des valeurs d’iframe structurées et utilisez un élément <iframe> standard.

Comprendre les enjeux de sécurité et de chargement des iframe

Un iframe n’est pas dangereux par nature dans une application React. La politique de même origine du navigateur empêche une page intégrée provenant d’une autre origine de lire ou de modifier le document de la page parente, même si les deux pages peuvent communiquer par des mécanismes comme postMessage. Une page intégrée de même origine peut interagir avec sa page parente, sauf si des restrictions l’en empêchent. La page source reste importante : choisissez une destination de confiance et utilisez l’attribut sandbox de l’iframe lorsque ses restrictions conviennent au contenu intégré. Le bac à sable impose des restrictions, par exemple en limitant les scripts ou la navigation. N’ajoutez que les jetons d’autorisation nécessaires au contenu, car certaines combinaisons peuvent affaiblir l’isolation.

Le chargement d’une page intégrée peut prendre du temps et consommer des ressources, ce qui peut affecter l’expérience globale. L’impact dépend du site intégré, de l’appareil et de la façon dont l’iframe est chargée ; il ne s’agit pas d’une pénalité de performance systématique. Selon votre cas d’usage, l’attribut loading="lazy" peut différer le chargement d’un iframe situé hors écran. Définissez une taille appropriée pour réduire les décalages de mise en page, puis vérifiez le comportement de la page intégrée au regard de la politique de sécurité de votre application.