noDangerouslySetInnerHtml

Este conteúdo não está disponível em sua língua ainda.

Diagnostic Category: lint/security/noDangerouslySetInnerHtml

JSX and TSX

Since: v1.0.0

Sources:

Same as: react/no-danger

Description

Prevent the usage of dangerous JSX props

Examples

Invalid

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

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

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

React.createElement('div', {
    dangerouslySetInnerHTML: { __html: 'child' }
});

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

How to configure

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

noDangerouslySetInnerHtml

Description

Examples

Invalid

How to configure

Related links