Mostrar iframe en la aplicación React

1. Use el atributo dangerouslySetInnerHTML para mostrar Iframe en React
2. Crear un componente personalizado para iframe en React
3. El efecto de poner iframe en aplicaciones React

Toda aplicación moderna necesita una estructura HTML. Los desarrolladores de React usan JSX para estructurar fácilmente el marcado de sus aplicaciones. La sintaxis de JSX se parece mucho a HTML, por lo que es fácil de escribir incluso si eres completamente nuevo en React.

Use el atributo dangerouslySetInnerHTML para mostrar Iframe en React

En algunos casos, debe inyectar un código HTML en su marcado existente. En este artículo, discutiremos el caso de insertar una etiqueta iframe en su aplicación.

No es raro obtener un código HTML preestructurado como respuesta del servidor. La mayoría de las veces, se formatea como una cadena.

La parte más difícil de insertar un iframe en su aplicación React es analizar el valor de la cadena para obtener sus propiedades, como fuente, ancho y alto. Es un poco más fácil si los datos recibidos del servidor tienen más estructura y especifican el ancho, el alto y la fuente de un iframe. Por ejemplo, puede ser un objeto con propiedades correspondientes a estos valores.

La forma más fácil de insertar un iframe en su aplicación React es usar el atributo dangerouslySetInnerHTML. El valor de este atributo debe ser un objeto con la clave __html y el valor de cadena HTML.

Veamos un ejemplo:

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

Es una demostración bastante simple. Tenemos el accesorio iframeSource con un valor predeterminado, una etiqueta iframe en forma de cadena.

Devolvemos solo un elemento div con un atributo dangerouslySetInnerHTML, que se establece en el objeto con la clave __html y una cadena HTML.

Puede probar el código de muestra en codesandbox.

Crear un componente personalizado para iframe en React

Dependiendo de la estructura de su fuente, podría ser mejor crear un componente personalizado que no use dangerouslySetInnerHTML. Si las propiedades del iframe como source, width y height están disponibles, puedes pasarlas como props y evitar el uso de dangerouslySetInnerHTML por completo.

Veamos un ejemplo:

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

Es una solución mucho más simple. Puede usar este componente en cualquier parte de su aplicación, siempre que tenga los valores necesarios para transmitirlos como accesorios.

A veces tendrá que analizar la cadena para extraer los valores como alto, ancho y fuente para la etiqueta iframe. Siempre es mejor evitar el uso del atributo dangerouslySetInnerHTML por razones de seguridad que se describen a continuación.

El efecto de poner iframe en aplicaciones React

En general, poner iframe en sus aplicaciones React se considera una práctica insegura. El problema es que no controlas la página de origen y podría mostrar cualquier cosa.

La página en el iframe puede tardar demasiado en cargarse, lo que también puede afectar el rendimiento de toda la página.

Además de eso, el atributo dangerouslySetInnerHTML expone a sus visitantes a ataques XSS. Existen otros riesgos de seguridad y posibles fugas también.

Como regla general, si su aplicación React debe contener una etiqueta iframe, asegúrese de confiar en que la página de origen no intentará nada malicioso.