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