noDangerouslySetInnerHtml (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v1.0.0
Diagnostic Category: lint/security/noDangerouslySetInnerHtml
This rule is recommended, meaning it is enabled by default.
This rule doesn’t have a fix.
The default severity of this rule is error.
This rule belongs to the following domains:
- react
Sources:
- Same as react/no-danger
- Same as react-dom/no-dangerously-set-innerhtml
- Same as @eslint-react/dom-no-dangerously-set-innerhtml

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "security": {
5
        "noDangerouslySetInnerHtml": "error"
6
      }
7
    }
8
  }
9
}

Description

Disallow React’s dangerouslySetInnerHTML property.

This property inserts HTML directly and bypasses React’s normal escaping. If the HTML contains untrusted data, attackers can inject code through a cross-site scripting (XSS) vulnerability. Prefer rendering content as JSX children.

Examples

Invalid

1
function createMarkup() {
2
    return { __html: "child" };
3
}
4
<div dangerouslySetInnerHTML={createMarkup()} />;

code-block.jsx:4:6 lint/security/noDangerouslySetInnerHtml ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Avoid passing content using the dangerouslySetInnerHTML prop.
  
    2 │     return { __html: "child" };
    3 │ }
  > 4 │ <div dangerouslySetInnerHTML={createMarkup()} />;
      │      ^^^^^^^^^^^^^^^^^^^^^^^
    5 │ 
  
  ⚠ Setting content using code can expose users to cross-site scripting (XSS) attacks

1
React.createElement("div", {
2
    dangerouslySetInnerHTML: { __html: "child" },
3
});

code-block.js:2:5 lint/security/noDangerouslySetInnerHtml ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Avoid passing content using the dangerouslySetInnerHTML prop.
  
    1 │ React.createElement("div", {
  > 2 │     dangerouslySetInnerHTML: { __html: "child" },
      │     ^^^^^^^^^^^^^^^^^^^^^^^
    3 │ });
    4 │ 
  
  ⚠ Setting content using code can expose users to cross-site scripting (XSS) attacks

Valid

1
function Message({ text }) {
2
    return <div>{text}</div>;
3
}