noDangerouslySetInnerHtmlWithChildren (since v0.10.0)

This rule is recommended by Rome.

Report when a DOM element or a component uses both children and dangerouslySetInnerHTML prop.

Examples

Invalid

jsx

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

<pre class="language-text"><code class="language-text">security/noDangerouslySetInnerHtmlWithChildren.js:4:12 <a href="https://docs.rome.tools/lint/rules/noDangerouslySetInnerHtmlWithChildren">lint/security/noDangerouslySetInnerHtmlWithChildren</a> ━━━━━━━━━━ ✖ 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 </code></pre>

jsx

function createMarkup() {
    return { __html: 'child' }
}
<Component dangerouslySetInnerHTML={createMarkup()} children="child1" />

<pre class="language-text"><code class="language-text">security/noDangerouslySetInnerHtmlWithChildren.js:4:12 <a href="https://docs.rome.tools/lint/rules/noDangerouslySetInnerHtmlWithChildren">lint/security/noDangerouslySetInnerHtmlWithChildren</a> ━━━━━━━━━━ ✖ 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 </code></pre>

jsx

React.createElement('div', { dangerouslySetInnerHTML: { __html: 'HTML' } }, 'children')

<pre class="language-text"><code class="language-text">security/noDangerouslySetInnerHtmlWithChildren.js:1:30 <a href="https://docs.rome.tools/lint/rules/noDangerouslySetInnerHtmlWithChildren">lint/security/noDangerouslySetInnerHtmlWithChildren</a> ━━━━━━━━━━ ✖ 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 </code></pre>

Lint Rule noDangerouslySetInnerHtmlWithChildren

noDangerouslySetInnerHtmlWithChildren (since v0.10.0)

Examples

Invalid

Related links