title: Alternative to dangerouslySetInnerHTML
body: <p>I use React to build a web app that stores documents. Those are created in HTML and are then stored in a database. To show them in the app I load the HTML inside a <code>div</code> by making use of <code>dangerouslySetInnerHTML</code>.</p>
  
  <pre><code>&lt;div dangerouslySetInnerHTML={{__html: this.props.page.content}} /&gt;
  </code></pre>
  
  <p>Even through this works perfectly fine, the name <code>dangerouslySetInnerHTML</code> suggests to pay more attention to this case, but I wonder what exactly can be done to remain flexible enough to load HTML and make it appear in the web app. I believe that the word <em>dangerous</em> addresses the danger of cross-site scripting, meaning that a script could be injected, executing harmful code.</p>
  
  <p>As a countermeasure I thought of cleaning the HTML code before parsing it over to the <code>div</code>. One library addressing this is <a href="https://github.com/cure53/DOMPurify" rel="nofollow noreferrer">DOMPurify</a>. Another way would be to convert the HTML code from the database directly into React Elements using <a href="https://www.npmjs.com/package/html-react-parser" rel="nofollow noreferrer">html-react-parser</a>.</p>
  
  <p>Would that be the right approach? Or are there alternatives to <code>dangerouslySetInnerHTML</code>?</p>