noDangerouslySetInnerHtmlWithChildren

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs> <TabItem label="JSX and TSX" icon="seti:javascript"> ## Summary - Rule available since: `v1.0.0` - Diagnostic Category: [`lint/security/noDangerouslySetInnerHtmlWithChildren`](/reference/diagnostics#diagnostic-category) - This rule is **recommended**, meaning it is enabled by default. - This rule doesn't have a fix. - The default severity of this rule is [**error**](/reference/diagnostics#error). - This rule belongs to the following domains: - [`react`](/linter/domains#react) - Sources: - Same as [`react/no-danger-with-children`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-danger-with-children.md)

How to configure

json

{
	"linter": {
		"rules": {
			"security": {
				"noDangerouslySetInnerHtmlWithChildren": "error"
			}
		}
	}
}

Description

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">code-block.jsx:4:12 <a href="https://biomejs.dev/linter/rules/no-dangerously-set-inner-html-with-children">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">code-block.jsx:4:12 <a href="https://biomejs.dev/linter/rules/no-dangerously-set-inner-html-with-children">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>

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

<pre class="language-text"><code class="language-text">code-block.js:1:30 <a href="https://biomejs.dev/linter/rules/no-dangerously-set-inner-html-with-children">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>

</TabItem> </Tabs>

How to configure

Description

Examples

Invalid

Related links