Mostrar iframe en la aplicación React

Para mostrar un iframe en React, conviene usar un elemento <iframe> con propiedades explícitas cuando se dispone de su origen y sus dimensiones como datos. Usa dangerouslySetInnerHTML solo si la entrada ya es una cadena HTML que debe insertarse como marcado.

Renderizar un iframe desde datos estructurados con un componente de React

Cuando el origen, el título y las dimensiones del iframe son valores independientes, pásalos como propiedades a un componente de función. Así, los atributos del iframe quedan visibles en el componente y no hace falta analizar una cadena HTML. Un componente habitual es function IframeEmbed({ src, title, width = 640, height = 360 }) { return <iframe src={src} title={title} width={width} height={height} />; }; puedes renderizarlo con valores como <IframeEmbed src="https://example.com/embed" title="Example content" />.

Este es el marcado del navegador correspondiente a esos valores. El texto del atributo title, Example content, permanece en inglés porque el bloque se conserva idéntico:

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

En tu componente de React, pasa los valores directamente como se muestra arriba. Asigna al iframe un title descriptivo para que las personas que usan tecnologías de asistencia puedan identificar su contenido. Si el servidor envía una cadena en lugar de campos independientes, usa el enfoque con una cadena HTML que se explica abajo solo cuando necesites esa representación; no analices el marcado para recuperar valores que puedes solicitar como datos estructurados.

Este ejemplo de JavaScript muestra la estructura de los datos y escribe el título y las dimensiones. No se ha ejecutado como parte de esta localización. Para pasar los mismos valores al componente, renderiza <IframeEmbed {...iframe} />; la expansión proporciona src, title, width y height como propiedades:

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

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

Insertar un iframe desde una cadena HTML con dangerouslySetInnerHTML

Algunas API devuelven una etiqueta iframe completa como cadena. React puede insertar ese marcado mediante la propiedad dangerouslySetInnerHTML, cuyo valor es un objeto con la clave __html. Por ejemplo, define const iframeSource = '<iframe src="https://example.com/embed" title="Example content" width="640" height="360"></iframe>'; y renderiza <div dangerouslySetInnerHTML={{ __html: iframeSource }} />.

Este formato espera marcado HTML, no un objeto con las propiedades del iframe. Trata la cadena como HTML de confianza: insertar contenido controlado por un atacante mediante dangerouslySetInnerHTML puede permitir ataques de secuencias de comandos entre sitios (XSS). Valida o sanea los datos en el límite de confianza adecuado antes de renderizarlos. Para integraciones nuevas, pide al servidor valores estructurados para el iframe cuando sea posible y usa un elemento <iframe> normal.

Comprender la seguridad y las concesiones de carga de los iframe

Un iframe no es inseguro por naturaleza en una aplicación de React. La política del mismo origen del navegador limita la capacidad de una página incrustada de otro origen para leer o modificar el documento de la página principal, aunque ambas páginas pueden comunicarse mediante mecanismos como postMessage. Una página incrustada del mismo origen puede interactuar con la página principal si no se aplican restricciones. El origen sigue siendo importante: elige un destino de confianza y usa el atributo sandbox del iframe cuando sus restricciones sean adecuadas para el contenido incrustado. El aislamiento puede imponer restricciones, como limitar los scripts o la navegación; añade solo los permisos de sandbox que el contenido necesite, ya que algunas combinaciones pueden debilitar el aislamiento.

Una página incrustada puede tardar en cargarse y consumir recursos, lo que podría afectar la experiencia general. El impacto depende del sitio incrustado, del dispositivo y de cómo se cargue el iframe; no es una penalización de rendimiento garantizada. Si se ajusta a tu caso de uso, el atributo loading="lazy" puede aplazar la carga de un iframe que esté fuera de la pantalla. Define un tamaño adecuado para reducir los cambios de diseño y comprueba el comportamiento de la página incrustada con la política de seguridad de tu aplicación.