Safe alternative to dangerouslySetInnerHTML

I would like to have a dynamic blog on my site (which uses React). Initially, I was going to store the posts in raw HTML in my database and generate the content using dangerouslySetInnerHTML. I am however concerned about the security implications. While my app doesn't have any sensitive data, I'm not well enough versed in XSS to know all the dangers I'd be opening my app up to.

I'm curious if there's a performant, safe way to dynamically load blog pages within my app. Would using https://github.com/odysseyscience/react-router-proxy-loader be useful in this case? Have a folder of blog post JSX separate from the rest of my app and load it using this (admittedly, I'm not sure how react-router-proxy-loader works).

I'm open to suggestions.

If XSS is your primary concern, you can use DOMPurify to sanitize your HTML before inserting it in the DOM via dangerouslySetInnerHTML. It's just 10K minified. And it works in Node too.

The article How to prevent XSS attacks when using dangerouslySetInnerHTML in React suggests to use jam3/no-sanitizer-with-danger eslint rule to check that the content passed to dangerouslySetInnerHTML is wrapped in this sanitizer function

Example of valid code is

const sanitizer = dompurify.sanitize;
return <div dangerouslySetInnerHTML={{__html: sanitizer(title)}} />; // Good

It also describes 3 sanitizer libraries:
DOMPurify
Xss.
xss-filters.

https://facebook.github.io/react/tips/dangerously-set-inner-html.html

"The prop name dangerouslySetInnerHTML is intentionally chosen to be frightening. ..."

"After fully understanding the security ramifications and properly sanitizing the data..."

I figure, if you trust your own CMS/Server (and not receiving from a 3rd party), which has sanitized the data (this step is also done), then you can insert using dangerouslySetInnerHTML.

As Morhaus said, maybe use DOMPurify as it (bonus) probably handles this unfortunate bit: "so the HTML provided must be well-formed (ie., pass XML validation)." I suspect some content using the non-XML version of HTML5 might otherwise be an issue. (Note: I haven't used it myself yet, since i'm new like you.)

If you're sure the input HTML is safe (without XSS risk) but might be malformed (e.g. have a random < in text), and you want to prevent your app from failing because of unexpected DOM change, then you could try this:

function sanitize(html) {
  var doc = document.createElement('div');
  doc.innerHTML = html;
  return doc.innerHTML;
}

^{(Based on https://stackoverflow.com/a/14216406/115493)}</sup>

But if you have the slightest doubt that your HTML might be not-XSS-safe, use DOMPurify as mentioned above.

As stated in other answers, a lot of libraries (dompurify, xss, etc) can parse the HTML you are giving to the browser, remove any malicious part and display it safely.

The issue is: how do you enforce these libraries are used.

To do so, you can install RisXSS which is an ESLint plugin that will warn the uses of dangerouslySetInnerHTML if you do not sanitize it before (in a sense, this is an improved version of react/no-danger ESLint rule).

To do so, install dompurify and eslint-plugin-risxss:

npm install dompurify eslint-plugin-risxss

Add risxss to your ESLint plugins then use DOMPurify:

import { sanitize } from 'dompurify';

export const MyArticle = ({ post }) => (
  <>
    <div dangerouslySetInnerHTML={{ post.content }} /> {/* You will receive a warning */}
    <div dangerouslySetInnerHTML={{ __html: sanitize(post.content) }} /> {/* All good here */}
  </>
);

Disclaimer: I am a contributor of RisXSS plugin.

Use React library Interweave.

1. Safely render HTML without using dangerouslySetInnerHTML.
2. Safely strip HTML tags.
3. Automatic XSS and injection protection.
4. Clean HTML attributes using filters.
5. Interpolate components using matchers.
6. Autolink URLs, IPs, emails, and hashtags.
7. Render Emoji and emoticon characters.

https://www.npmjs.com/package/interweave

I'm faced the same issue and ended with better solution. if your input something like below and solution will work for you using lodash

<em>paragraph text example:</em>

My Solution:

import _ from 'lodash';

const createMarkup = encodedHtml => ({
  __html: _.unescape(encodedHtml),
});

/* eslint-disable react/no-danger */
const Notes = ({ label }) => (
  <div>
    <div dangerouslySetInnerHTML={createMarkup(label)} />
  </div>
);

> Safe alternative to dangerouslySetInnerHTML

> I'm curious if there's a performant, safe way to dynamically load blog pages within my app

It's interesting that, while the question is for an alternative to dangerouselySetInnerHTML, all of the answer instruct to use it anyway. Does this mean you're stuck with no alternative? No, just no easy one.

Alternative 1: Rewrite your app to pass data to components instead

> Initially, I was going to store the posts in raw HTML

It doesn't seem from the answer like this is a requirement. It might be implemented as an easy solution, to not worry about the data schema matching your components. But it's unlikely this is a hard requirement.

It should be possible to re-architect your app to not rely on storing raw HTML, though it might mean a lot of work, depending on the app.

Alternative 2: Don't write your own page builder

If you're just interested in having a blog on your site, it's maybe not worth it to write your own page builder. Even if you want tight integration with other parts of your site, that's still possible if you use something like WordPress.

Alternative 3 (WordPress only): Use InnerBlocks

If you're currently using dangerouselySetInnerHTML in a WordPress block, you can convert it to use InnerBlocks instead.