How to safely render html in react?

Question

I've got some user generated html markup from a text area and I'd like to render it on another part of the screen. The markup is saved as a string in the props of the component.

I don't want to use dangerouslysethtml for obvious reasons. Is there a parser such as marked but for html so that it strips out script tags and other invalid html.

Answer 1

Sanitize the html using the sanitize-html module, and render the sanitized string using dangerouslySetInnerHTML.

You can create a simple wrapper component:

const defaultOptions = {   allowedTags: [ 'b', 'i', 'em', 'strong', 'a' ],   allowedAttributes: {     'a': [ 'href' ]   },   allowedIframeHostnames: ['www.youtube.com'] };  const sanitize = (dirty, options) => ({   __html: sanitizeHtml(     dirty,      options: { ...defaultOptions, ...options }   ) });  const SanitizeHTML = ({ html, options }) => (   <div dangerouslySetInnerHTML={sanitize(html, options)} /> ); 

Usage:

<SanitizeHTML html="<img src=x onerror=alert('img') />" /> 

---

You can also use react-sanitized-html's SanitizedHTML component, which is a react wrapper around sanitize-html:

<SanitizedHTML   allowedAttributes={{ 'a': ['href'] }}   allowedTags={['a']}   html={ `<a href="http://bing.com/">Bing</a>` } /> 

Answer 2

An example based on the accepted answer:

import sanitizeHtml from 'sanitize-html';  const MyComponent = () => {   dirty = '<a href="my-slug" target="_blank" onClick="evil()">click</a>';   const clean = sanitizeHtml(dirty, {     allowedTags: ['b', 'i', 'em', 'strong', 'a'],     allowedAttributes: {       a: ['href', 'target']     }   });   return (     <div        dangerouslySetInnerHTML={{__html: clean}}     />   ); }; 

MyComponent renders div containing the link without onClick="evil()":

<a href="my-slug" target="_blank">click</a>