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](https://github.com/chjj/marked) but for html so that it strips out script tags and other invalid html.

Answer: 
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>

```
For XSS filtering, there is a good alternative to [sanitize-html](https://www.npmjs.com/package/sanitize-html) written by security people, called [dompurify](https://www.npmjs.com/package/dompurify).

Here is how the wrapper from <https://stackoverflow.com/a/38663813/1762849> would look with DOMPurify:

```js
const defaultOptions = {
  ALLOWED_TAGS: [ 'b', 'i', 'em', 'strong', 'a' ], 
  ALLOWED_ATTR: ['href']
};

const sanitize = (dirty, options) => ({
  __html: DOMPurify.sanitize(
    dirty, 
    { ...defaultOptions, ...options }
  )
});

const SanitizeHTML = ({ html, options }) => (
  <div dangerouslySetInnerHTML={sanitize(html, options)} />
);

```

Usage:

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

```

---

Also, if you you need to sanitize HTML on client and server, consider using the [isomophic-dompurify](https://www.npmjs.com/package/isomorphic-dompurify) module which unifies use of DOMPurify on frontend and backend.