Lint Rules

noDangerouslySetInnerHtml (since v0.10.0)

This rule is recommended by Rome.

Prevent the usage of dangerous JSX props

Examples

Invalid

function createMarkup() {
    return { __html: 'child' }
}
<div dangerouslySetInnerHTML={createMarkup()}></div>
security/noDangerouslySetInnerHtml.js: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' }
});
security/noDangerouslySetInnerHtml.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