Safe alternative to dangerouslySetInnerHTML

Question

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.

Answer 1

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.

Answer 2

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.

Answer 3

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.)

Answer 4

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)}

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

Answer 5

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.

Answer 6

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>
);

Answer 7

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][1]