noDangerouslySetInnerHtmlWithChildren
Summary
Section titled Summary- Rule available since:
v1.0.0 - Diagnostic Category:
lint/security/noDangerouslySetInnerHtmlWithChildren - 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-with-children
- Same as
Description
Section titled DescriptionReport when a DOM element or a component uses both children and dangerouslySetInnerHTML prop.
Examples
Section titled ExamplesInvalid
Section titled Invalidfunction 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
How to configure
Section titled How to configure{ "linter": { "rules": { "security": { "noDangerouslySetInnerHtmlWithChildren": "error" } } }}