How to safely render html in react?

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.

Answers 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>` }
    />
    

Related Articles