Prevent XSS in React via dangerouslySetInnerHTML

DangerousHtml.jsx

/*
Exampmes:

// 1
const markup = `<p>Hola <img src='none.png' onerror='alert("Rainbow mode FTW!")'> Sharon</p>`
<DangerousHtml innerHTML={markup} /> // <p>Hola <img src='none.png'> Sharon</p>

// 2
<DangerousHtml
  content={`<p>
    Hi
    <script src="https://example.com/malicious-tracking"></script>
    Fiona, here is the link to enter your bank details:
    <iframe src="https://example.com/defo-not-the-actual-bank"></iframe>
  </p>`}
/>

// Notes
 * Remember to include or install https://github.com/cure53/DOMPurify
 
 */

import React from 'react'
import DOMPurify from 'dompurify'

const sanitize = dirty => DOMPurify.sanitize(dirty)

const DangerousHtml = ({ innerHTML, tag }) => {
  const clean = sanitize(innerHTML)

  if (typeof Tag === 'undefined') {
    return <div dangerouslySetInnerHTML={{ __html: clean }} />
  }
  return <tag dangerouslySetInnerHTML={{ __html: clean }} />
}

export default DangerousHtml