Using dangerouslySetInnerHTML in a React application

This article covers the reasoning behind using the dangerouslySetInnerHTML property in a React application, which is the equivalent of the innerHTML attribute in the browser DOM.

What is dangerouslySetInnerHTML?

dangerouslySetInnerHTML is a property that you can use on HTML elements in a React application to programmatically set their content. Instead of using a selector to grab the HTML element and then setting its innerHTML, you can use this property directly on the element.

When dangerouslySetInnerHTML is used, React also knows that the contents of that specific element are dynamic, and, for the children of that node, it simply skips the comparison against the virtual DOM to gain some extra performance.

As the name of the property suggests, it can be dangerous to use dangerouslySetInnerHTML because it makes your code vulnerable to cross-site scripting (XSS) attacks. This becomes an issue, especially if you are fetching data from a third-party source or rendering content submitted by users.

When to use dangerouslySetInnerHTML?

The best case of this is when you need to set the html content of a DOM element is when you populate a div element with the data which is coming from any text editor.

Imagine you have created a webpage where people can submit comments and you allow them to use a rich text editor. In this case, the output of that rich text editor is likely to be HTML with tags such as <p>, <b>, and <img>.

Consider the following code snippet, which would render the string without being aware of the <b> tag in it — meaning that the output would be just the string itself without any bold text, like lorem <b>ipsum</b>:

const App = () => {
  const data = 'lorem <b>ipsum</b>';

  return (
    <div>
      {data}
    </div>
  );
}

export default App;

But when dangerouslySetInnerHTML is used, React becomes aware of the HTML tags and renders them properly. This time, the output would be rendered correctly with bold text (i.e., lorem ipsum):

const App = () => {
  const data = 'lorem <b>ipsum</b>';

  return (
    <div
      dangerouslySetInnerHTML={{__html: data}}
    />
  );
}

export default App;

Security risks associated with dangerouslySetInnerHTML

Using dangerouslySetInnerHTML makes your site vulnerable to cross-site scripting (XSS) attacks, which can cause damage to your site and its users. XSS attacks can have various forms and can lead to issues like unauthorized access, session hijacking, and the theft of sensitive information.

These attacks can happen when you fetch HTML from an untrusted third-party source or when rendering content submitted by users. These two forms of attacks are known as DOM based XSS and persistent/stored XSS, respectively.

Sanitization when using dangerouslySetInnerHTML

Sanitizing your HTML code detects potentially malicious parts in HTML code and then outputs a clean and safe version of it. The most popular sanitizer for HTML is DOMPurify.

Original
lorem <b onmouseover="alert('mouseover');">ipsum</b>

Sanitized
lorem <b>ipsum</b>

It’s good practice to use a sanitizer even when we trust the source of the data. With the DOMPurify package used, one of the examples above would be as follows:

Alternative to dangerouslySetInnerHTML

Instead of using dangerouslySetInnerHTML, you could make use of a library to render your executable HTML code. A good example is react-html-parser:

Instead of using dangerouslySetInnerHTML, you could make use of a library to render your executable HTML code. A good example is react-html-parser and dompurify:

import DOMPurify from "dompurify";
import ReactHtmlParser from "react-html-parser";

const App = () => {
  const data = `lorem <b onmouseover="alert('mouseover');">ipsum</b>`;
  const sanitizedData = DOMPurify.sanitize(data);
  return <div>{ReactHtmlParser(sanitizedData)}</div>;
};

export default App;

Conclusion:

dangerouslySetInnerHTML is nothing but a replacement of innerHTML in React and should be used with care. Although the name suggests danger in its use, taking the necessary measures by using a well-developed sanitizer ensures the code is clean and does not run unexpected scripts when rendered within the React node.

By using libraries like react-html-parser, you can avoid using dangerouslySetInnerHTML entirely and also have the benefits of parsing your HTML strings as React components.