React dangerouslySetInnerHTML should not be used

Improper use of the innerHTML can open you up to a cross-site scripting (XSS) attack. Sanitizing user input for display is notoriously error-prone, and failure to properly sanitize is one of the leading causes of web vulnerabilities on the internet.

Our design philosophy is that it should be "easy" to make things safe, and developers should explicitly state their intent when performing “unsafe” operations. The prop name `dangerouslySetInnerHTML` is intentionally chosen to be frightening, and the prop value (an object instead of a string) can be used to indicate sanitized data.

After fully understanding the security ramifications and properly sanitizing the data, create a new object containing only the key __html and your sanitized data as the value.

function MyComponent() {
  const title = response.from.backend.title;
  // FLAW: vulnerable to potential XSS attack
  return <div dangerouslySetInnerHTML={{__html: title}} />;
}

import dompurify from 'dompurify';

function MyComponent() {
  const title = response.from.backend.title;
  const sanitizer = dompurify.sanitize;
  // FLAW: vulnerable to potential XSS attack
  return <div dangerouslySetInnerHTML={{__html: sanitizer(title)}} />;
}