src/content/docs/linter/rules/no-dangerously-set-inner-html.mdx
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/noDangerouslySetInnerHtml`](/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`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-danger.md){
"linter": {
"rules": {
"security": {
"noDangerouslySetInnerHtml": "error"
}
}
}
}
Prevent the usage of dangerous JSX props
function createMarkup() {
return { __html: 'child' }
}
<div dangerouslySetInnerHTML={createMarkup()}></div>
React.createElement('div', {
dangerouslySetInnerHTML: { __html: 'child' }
});