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