How to Display an iframe in a React Application

To display an iframe in React, prefer an <iframe> element with explicit props when you have its source and dimensions as data. Use dangerouslySetInnerHTML only when the input is already an HTML string that must be inserted as markup.

Render an iframe from structured data with a React component

When the iframe source, title, and dimensions are separate values, pass them as props to a function component. This keeps the iframe attributes visible in the component and avoids parsing an HTML string. A typical component is function IframeEmbed({ src, title, width = 640, height = 360 }) { return <iframe src={src} title={title} width={width} height={height} />; }; render it with values such as <IframeEmbed src="https://example.com/embed" title="Example content" />.

Here is the corresponding browser markup for those values:

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

In your React component, pass the values directly as shown above. Give the iframe a useful title so assistive technology users can identify its content. If the server sends a string instead of separate fields, use the HTML-string approach below only when that representation is needed; do not parse markup just to recover values you can request as structured data.

This JavaScript example shows the structured data shape and prints its title and dimensions. To pass the same values to the component, render <IframeEmbed {...iframe} />; the spread supplies src, title, width, and height as props:

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

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

Embed an iframe from an HTML string with dangerouslySetInnerHTML

Some APIs return a complete iframe tag as a string. React can insert that markup using the dangerouslySetInnerHTML prop, whose value is an object with the __html key. For example, set const iframeSource = '<iframe src="https://example.com/embed" title="Example content" width="640" height="360"></iframe>'; and render <div dangerouslySetInnerHTML={{ __html: iframeSource }} />.

This form expects HTML markup, not an object of iframe properties. Treat the string as trusted HTML: rendering attacker-controlled content through dangerouslySetInnerHTML can enable cross-site scripting (XSS). Validate or sanitize data at the appropriate trust boundary before rendering it. For new integrations, ask the server for structured iframe values when possible and use a normal <iframe> element.

Understand iframe security and loading tradeoffs

An iframe is not inherently unsafe in a React application. The browser’s same-origin policy limits a cross-origin embedded page from reading or changing the parent page’s document, though the pages can communicate through mechanisms such as postMessage. A same-origin embedded page may interact with its parent unless restrictions prevent it. The source page still matters: choose a trusted destination and use the iframe sandbox attribute when its restrictions fit the embedded content. Sandboxing applies restrictions such as limiting scripts or navigation; add only the sandbox permission tokens the content requires, since some combinations can weaken isolation.

An embedded page may take time and resources to load, which can affect the overall page experience. The impact depends on the embedded site, the device, and how the iframe is loaded; it is not a guaranteed performance penalty. Where supported by your use case, the loading="lazy" attribute can defer loading an off-screen iframe. Set an appropriate size to reduce layout shifts, and test the embedded page’s behavior with your application’s security policy.