noDangerouslySetInnerHtml
Summary
Section titled Summary- Rule available since:
v1.0.0 - Diagnostic Category:
lint/security/noDangerouslySetInnerHtml - This rule is recommended, which means is enabled by default.
- This rule doesn’t have a fix.
- The default severity of this rule is error.
- Sources:
- Same as
react/no-danger
- Same as
Description
Section titled DescriptionPrevent the usage of dangerous JSX props
Examples
Section titled ExamplesInvalid
Section titled Invalidfunction 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
Section titled How to configure{ "linter": { "rules": { "security": { "noDangerouslySetInnerHtml": "error" } } }}