no-dangerously-set-innerhtml

Full Name in eslint-plugin-react-dom

react-dom/no-dangerously-set-innerhtml

Full Name in @eslint-react/eslint-plugin

@eslint-react/dom/no-dangerously-set-innerhtml

Features

🔍

Presets

• dom
• recommended
• recommended-typescript
• recommended-type-checked

What it does

Warns when using dangerouslySetInnerHTML.

This should be used with extreme caution! If the HTML inside isn’t trusted (for example, if it’s based on user data), you risk introducing an XSS vulnerability.

Read more about using dangerouslySetInnerHTML.

Examples

Failing

import React from "react";
 
function MyComponent() {
  return <div dangerouslySetInnerHTML={{ __html: "Hello, World!" }} />;
}

Implementation

• Rule source
• Test source

See Also

• no-dangerously-set-innerhtml-with-children
  Disallows DOM elements using children and dangerouslySetInnerHTML at the same time.
• no-void-elements-with-children
  Prevents the use of children in void DOM elements.