noDangerouslySetInnerHtmlWithChildren

JSX and TSX

Summary

• Rule available since: v1.0.0
• Diagnostic Category: lint/security/noDangerouslySetInnerHtmlWithChildren
• 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-with-children

How to configure

biome.json

{
  "linter": {
    "rules": {
      "security": {
        "noDangerouslySetInnerHtmlWithChildren": "error"
      }
    }
  }
}

Description

Report when a DOM element or a component uses both children and dangerouslySetInnerHTML prop.

Examples

Invalid

function createMarkup() {
    return { __html: 'child' }
}
<Component dangerouslySetInnerHTML={createMarkup()}>"child1"</Component>

code-block.jsx:4:12 lint/security/noDangerouslySetInnerHtmlWithChildren ━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Avoid passing both children and the dangerouslySetInnerHTML prop.
  
    2 │     return { __html: ‘child’ }
    3 │ }
  > 4 │ <Component dangerouslySetInnerHTML={createMarkup()}>“child1”</Component>
      │            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    5 │ 
  
  ℹ This is the source of the children prop
  
    2 │     return { __html: ‘child’ }
    3 │ }
  > 4 │ <Component dangerouslySetInnerHTML={createMarkup()}>“child1”</Component>
      │                                                     ^^^^^^^^
    5 │ 
  
  ℹ Setting HTML content will inadvertently override any passed children in React
  

function createMarkup() {
    return { __html: 'child' }
}
<Component dangerouslySetInnerHTML={createMarkup()} children="child1" />

code-block.jsx:4:12 lint/security/noDangerouslySetInnerHtmlWithChildren ━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Avoid passing both children and the dangerouslySetInnerHTML prop.
  
    2 │     return { __html: ‘child’ }
    3 │ }
  > 4 │ <Component dangerouslySetInnerHTML={createMarkup()} children=“child1” />
      │            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    5 │ 
  
  ℹ This is the source of the children prop
  
    2 │     return { __html: ‘child’ }
    3 │ }
  > 4 │ <Component dangerouslySetInnerHTML={createMarkup()} children=“child1” />
      │                                                     ^^^^^^^^^^^^^^^^^
    5 │ 
  
  ℹ Setting HTML content will inadvertently override any passed children in React
  

React.createElement('div', { dangerouslySetInnerHTML: { __html: 'HTML' } }, 'children')

code-block.js:1:30 lint/security/noDangerouslySetInnerHtmlWithChildren ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Avoid passing both children and the dangerouslySetInnerHTML prop.
  
  > 1 │ React.createElement(‘div’, { dangerouslySetInnerHTML: { __html: ‘HTML’ } }, ‘children’)
      │                              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ This is the source of the children prop
  
  > 1 │ React.createElement(‘div’, { dangerouslySetInnerHTML: { __html: ‘HTML’ } }, ‘children’)
      │                                                                             ^^^^^^^^^^
    2 │ 
  
  ℹ Setting HTML content will inadvertently override any passed children in React
  

Related links

• Disable a rule
• Configure the code fix
• Rule options
• Source Code
• Test Cases