How to Display Iframe in React Application

1. Use dangerouslySetInnerHTML Attribute to Display Iframe in React
2. Create a Custom Component for Iframe in React
3. the Effect of Putting iframe in React Applications

Every modern application needs an HTML structure. React developers use JSX to structure the markup of their applications easily. The syntax of JSX looks a lot like HTML, so it’s easy to write even if you’re completely new to React.

Use dangerouslySetInnerHTML Attribute to Display Iframe in React

In some cases, you need to inject an HTML code into your existing markup. In this article, we’ll discuss the case of inserting an iframe tag into your application.

It’s not uncommon to get a pre-structured HTML code as a response from the server. Most of the time, it is formatted as a string.

The most difficult part of inserting an iframe into your React application is parsing the string value to get its properties, such as source, width, and height. It’s a bit easier if the data received from the server has more structure and specifies the width, height, and source of an iframe. For instance, it can be an object with properties corresponding to these values.

The easiest way to insert an iframe into your React application is to use the dangerouslySetInnerHTML attribute. This attribute’s value should be an object with __html key and the string HTML value.

Let’s look at an example:

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

It’s a fairly simple demonstration. We have the iframeSource prop with a default value, an iframe tag in the shape of a string.

We return only one div element with a dangerouslySetInnerHTML attribute, which is set to the object with __html key and an HTML string.

You can test the sample code on codesandbox.

Create a Custom Component for Iframe in React

Depending on the structure of your source, it might be better to create a custom component that doesn’t use dangerouslySetInnerHTML. If the iframe properties like source, width, and height are available, you can pass them down as props and avoid using dangerouslySetInnerHTML altogether.

Let’s look at an example:

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

It’s a much simpler solution. You may use this component anywhere in your application, as long as you have the necessary values to pass down as props.

Sometimes you’ll have to parse the string to extract the values like height, width, and source for the iframe tag. It’s always better to avoid using the dangerouslySetInnerHTML attribute for safety reasons described below.

the Effect of Putting iframe in React Applications

In general, putting iframe in your React applications is considered an unsafe practice. The problem is that you don’t control the source page, and it could display anything.

The page in the iframe might take too long to load, which can also affect the performance of the entire page.

In addition to that, the dangerouslySetInnerHTML attribute exposes your visitors to XSS attacks. There are other risks of security and potential leaks as well.

As a rule of thumb, if your React application must contain an iframe tag, make sure you trust the source page not to attempt anything malicious.