Do not inject unsanitized HTML

Documentos > Code Analysis > Static Analysis Rules > Do not inject unsanitized HTML

This page is not yet available in Spanish. We are working on its translation.
If you have any questions or feedback about our current translation project, feel free to reach out to us!

Metadata

ID: typescript-browser-security/react-dangerously-inner-html

Language: TypeScript

Severity: Warning

Category: Security

CWE: 79

Description

Always sanitize HTML data before injecting it in the DOM. Use libraries such as DOMPurify before using it.

Non-Compliant Code Examples

const App = () => {
  const data = `lorem <b onmouseover="alert('mouseover');">ipsum</b>`;

  return (
    <div
      dangerouslySetInnerHTML={{__html: data}}
      foobar={{foo: bar}}
    >
    </div>
  );
}

Compliant Code Examples

const App = () => {
  const data = `lorem <b onmouseover="alert('mouseover');">ipsum</b>`;

  return (
    <div
      dangerouslySetInnerHTML={{__html: sanitize(data)}}
    />
  );
}