How to safely inject HTML in React using an iframe

Published in

Thinkmill

3 min readDec 13, 2019

If you need to inject HTML into your React app and you don’t want to use dangerouslySetInnerHTML (in most cases you shouldn’t
;-P ) because isn’t safe, this article is for you.

Why (in most cases) you shouldn’t use dangerouslySetInnerHTML

As the react documentation says

dangerouslySetInnerHTML is React’s replacement for using innerHTML in the browser DOM. In general, setting HTML from code is risky because it’s easy to inadvertently expose your users to a cross-site scripting (XSS) attack.

In fewer words, dangerouslySetInnerHTML isn’t safe.

Why?

let’s say that you have a database with a bunch of article in HTML format that you want to display in your React app. Using dangerouslySetInnerHTML that would be quite easy to achieve:

The problem with this is that the HTML you are injecting to your app could be malformed, it could have CSS/JS that breaks your app, or even worse, JS that steals data from your app.

How to make an iframe secure?

In order to make the iframe really safe, you need to add extra restrictions to the content inside of it. To do that, you should use the sandbox attribute.

You should avoid using both allow-scripts and allow-same-origin, as that lets the embedded document remove the sandbox attribute — making it no more secure than not using the sandbox attribute at all.

How to inject and update the content in an iframe?

Here you have two options:

by using the iframe attribute srcdoc (which is not supported by IE and Edge)
by using the iframe.document.open()/write()/close()

Using srcdoc

the srcdoc property allows you to specify the content of the iframe, so using it is quite simple:

Unfortunately srcdoc isn’t supported in IE and Edge. There is a polyfill but it isn’t useful in this case because it requires allow-scripts (and remember that’s not safe)