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
dangerouslySetInnerHTMLis React’s replacement for using
innerHTMLin 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.
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
You should avoid using both
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()
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)
This method is not straightforward as using srcdoc, but it works the good thing is that works in all browsers.