How to safely render html in react?

react render html string
react-html-parser
react display text as html
react dangerouslysetinnerhtml
react sanitize-html
react-render html without dangerouslysetinnerhtml
html to react
react component to html string

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.

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

How to render HTML in React, Find out how to render an HTML string in the DOM without escaping, using React . If you want know how to safely render html in react? Sanitize the html using the sanitize-html module, and render the sanitized string using dangerouslySetInnerHTML. You can create a simple wrapper component:

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>

milesj/interweave: React library to safely render HTML, filter , Interweave. Safely render HTML without using dangerouslySetInnerHTML . Safely strip HTML tags. Automatic XSS and injection protection. Clean HTML attributes using filters. Interpolate components using matchers. Autolink URLs, IPs, emails, and hashtags. Render Emoji and emoticon characters. And much more! If you need to inject HTML into your React app and you don’t want to use dangerouslySetInnerHTML (in most cases you shouldn’t ;-P ) because isn’t safe, this article is for you. let’s say

For XSS filtering, there is a good alternative to sanitize-html written by security people, called dompurify.

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

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:

<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 module which unifies use of DOMPurify on frontend and backend.

Dangerously Set innerHTML, Sanitizing user input for display is notoriously error-prone, and failure to Our design philosophy is that it should be “easy” to make things safe, and create a new object containing only the key __html and your sanitized data as the value. React library to safely render HTML, filter attributes, autowrap text with matchers, render emoji characters, and much more. Tags: UI Components, Miscellaneous, Form Components.

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� react-safe-html allows you to render user provided html (e.g. from ckeditor) safely. You choose how each element renders and which attributes get passed through. It has defaults for basic elements and attributes but is fully customizable. Note: you may wish to use a more popular library like react-html-parse or safe-html.

Sanitizing HTML Data in React. Problem: given an API response that , Problem: given an API response that returns a string of HTML, how do I render a sanitized version of that inside a React component? The React� Interweave is a react library to safely render HTML, filter attributes, autowrap text with matchers, render emoji characters, and much more. Interweave is a robust React library that can: Safely render HTML without using dangerouslySetInnerHTML. Safely strip HTML tags. Automatic XSS and injection protection. Clean HTML attributes using filters

How To Write Secure Code In React | by rezaduty, “Easy” to make thing safe is one of React philosophy. React is JavaScript; HTML; CSS; Result. class Hello extends React.Component { render() { return < div>Hello {this.props.name}</div>; } } ReactDOM.render( <Hello� Interweave is a robust React library that can Safely render HTML without using dangerouslySetInnerHTML. Safely strip HTML tags. Automatic XSS and injection protection. Clean HTML attributes using filters. Interpolate components using matchers. Autolink URLs, IPs, emails, and hashtags. Render Emoji and emoticon characters. And much more!

Comments
  • I don't understand how react-sanitized-html@2.0.0 is just 2kb if is a wrapper of sanitize-html, when sanitize-html@1.20.0 is 157.2kB :/ !
  • Ok, because is needed to install both packages for separate... react-sanitized-html and sanitize-html :/
  • Because sanitize-html is a peer dependency, and not actual part of the package.
  • Hi there @ori , I'm following ur instruciton but i got error on my compiler [11:40:00] Starting 'browserify_typescript'... [11:40:04] 'browserify_typescript' errored after 4.29 s [11:40:04] Error in plugin 'gulp-browserify' module "./tagtypes" not found from "/d/myProject/web/node_modules/sanitize-html/dist/sanitize-html.js" it said ./tagtypes not found
  • This is a build related issue. You should open a new question.