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

Presets

dom recommended recommended-typescript recommended-type-checked strict strict-typescript strict-type-checked

Rule Details

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

Using dangerouslySetInnerHTML to render raw HTML

Using dangerouslySetInnerHTML bypasses React's built-in XSS protections and should be avoided whenever possible.

// Problem: dangerouslySetInnerHTML exposes the application to XSS risks.
function MyComponent() {
  return <div dangerouslySetInnerHTML={{ __html: "Hello, World!" }} />;
}

Versions

Resources

• Rule Source
• Test Source
• Rule Changelog

Further Reading

• React Docs: dangerouslySetInnerHTML

See Also

• react-dom/no-dangerously-set-innerhtml-with-children
  Disallows DOM elements from using dangerouslySetInnerHTML and children at the same time.
• react-dom/no-void-elements-with-children
  Disallows children in void DOM elements.