Iframes with React: Best Practices
Learn how to use Iframes with React following the best practices for Security and Performance
Today it’s challenging to find standalone web apps. We can find most of these apps work with each other where the integrations happen either from the frontend or backend. When looking at these integrations, one of the oldest yet simple integration strategy is using Iframes.
In a Nutshell, Iframes allow you to embed content from other websites into yours.
When looking at the history, an “Inline frame” called Iframe was introduced in 1997 with HTML 4.01 by Microsoft Internet Explorer.
First and foremost, let’s look at how to embed an Iframe in a React project.
Embed an Iframe in React
Technically, an Iframes could be as small as the following code snippet.
<iframe src="https://www.youtube.com/embed/cWDJoK8zw58"></iframe>
Similarly, as you can see in the below code snippet, embedding a YouTube Iframe in React is straight forward.
import React from "react";
import ReactDOM from "react-dom";class App extends React.Component {
render() {
return <iframe src="https://www.youtube.com/embed/cWDJoK8zw58" />;
}
}ReactDOM.render(<App />, document.getElementById("container"));
However, though it’s easy to embed an Iframe into your React app, making it secure, fast, and reliable requires specific expertise. Therefore, it’s essential to understand the best practices around using Iframes with React.
Can We Add Any URL to SRC Attribute?
As an experiment, I’ve used YouTube to embed a video into a React app. When I copy-paste a YouTube video link directly into the Iframe, it threw an error saying “www.youtube.com refused to connect.” To embed a YouTube video to an Iframe, I had to use their embed URLs.
Verify the X-Frame-Options
Suppose you closely observe the error in Chrome Dev Tools. In that case, you can find that YouTube prevents the loading of their direct URLs (Not the embeddable one) by using X-Frame-Options set to “same-origin” returning in the HTTP Header from YouTube servers.
Therefore, we must embed only URLs that are advertised as embeddable. Otherwise, even if it works initially (Unlike the case of YouTube), these could get blocked without your knowledge using X-Frame-Options.
And I hope it’s clear that adding any URL into an Iframe doesn’t work with React or any other frontend library or framework unless the embedding site allows your web app domain to embed it.
Tip: Share your reusable components between projects using Bit(Github).
Bit makes it simple to share, document, and reuse independent components between projects. Use it to maximize code reuse, keep a consistent design, collaborate as a team, speed delivery, and build apps that scale.
Bit supports Node, TypeScript, React, Vue, Angular, and more.
But What About React App’s Security?
Embedding an Iframe inside a React app comes with some risks where Iframe will load content outside your control unless you take the necessary measures.
Using Sandbox Attribute
You can use the sandbox attribute, which will ensure the content within the Iframe cannot change the parent(Host) web URL, access browser storage, cookies, or run plugins. If you add sandbox without any value document will be fully sandboxed.
<iframe src="https://www.youtube.com/embed/cWDJoK8zw58" sandbox=''/>But YouTube embedded Iframe will give you the following error.
The error is self-explanatory, and for YouTube embedded video to work, you need both allow-scripts and allow-same-origin to be set with sandbox.
However, adding both of these attributes together defies the purpose of using the sandbox as a malicious attacker can execute a script and remove sandboxing.
Therefore, using sandbox is the best fit for HTML content embedding, which doesn’t depend on JavaScript for rendering HTML.
Can We Use Content Security Policies (CSP)?
Having a CSP is a great defense for your React app against cross-site scripting attacks. Unfortunately, there aren’t any restrictions we can enforce using CSP for the content loaded inside Iframes.
However, a working draft by W3C allows the embedding site to propose a CSP for the Iframe by setting an attribute on it. Therefore, we have to wait for some time to see the CSP restrictions on Iframe.
You can use the <iframe> tag directly in React to embed external content, but if you were to incorporate these tips and create your own IFrame components, you’d get a simplified API, custom styling and event handling, and lazy-loading. Plus, you could then use Bit to independently publish and version these components, making them modular, reusable, and easily shared. Learn more here.
What About Performance?
Page loading performance is a topic discussed along with Iframes. Since the content loaded in Iframe is out of your control, it could lead to performance degradation in your web app if it’s poorly designed.
However, the issue is not universal. After testing the YouTube embedded React app with Chrome DevTools Lighthouse, it clearly showed minimal impact, as shown below.
To boost page loading speed, set the iframe src/url attribute with JavaScript after the main content has been loaded. This makes your website available earlier and reduces your official page load time which is an important SEO metric.” ~ MDN mozilla
Besides, if you trust the Iframe source, you could also embed it using dangerouslySetInnerHTML. Here, the React will bypass the Iframe content while checking the differences between Virtual and Real DOM, which slightly improves your app performance.
import React from "react";
import ReactDOM from "react-dom";class App extends React.Component {
render() {
return <div dangerouslySetInnerHTML={{ __html: "<iframe src='https://www.youtube.com/embed/cWDJoK8zw58' />"}} />;
}
}ReactDOM.render(<App />, document.getElementById("container"));
However, as the name implies, it is dangerous to use the attribute unless you trust the Iframe source or take care of the sanitization of content passed to __html.
Therefore, use this with caution only if a need arise due to performance limitations.
Conclusion
As you have seen, adding an Iframe is straightforward. However, you should follow several best practices to use Iframes appropriately in web apps to reduce the overall risks of including an external site in your web app.
Besides, if you allow dynamic additions of Iframes, you should trust these embedded URLs unless you use sandbox mode. Otherwise, the risk is high for XSS attacks on the web app. And if an incident happens, the possibility of sending sensitive information could be leaked to the Iframe origins.
I hope this article has provided awareness for you to use Iframes properly in React apps.
Thanks for Reading!
Build React Apps with reusable components, just like Lego
Bit’s open-source tool help 250,000+ devs to build apps with components.
Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.
Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:
