innerHTML prop for a React DOM element should not be used

• REACT_MISUSED_INNER_HTML
• Error
• High
• react

This rule applies when innerHTML prop for a React DOM element is used.

innerHTML prop is risky because it is easy to expose your users to a cross-site scripting (XSS) attack. React provides dangerouslySetInnerHTML as a replacement for innerHTML prop to remind yourself that it is dangerous.

Therefore, you should use dangerouslySetInnerHTML prop instead of innerHTML prop. Otherwise, React outputs a warning message.

Noncompliant Code Example

import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(
  <div innerHTML="Hello" /> // REACT_MISUSED_INNER_HTML alarm because 'innerHTML' is used.
);

Compliant Code Example

import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(
  <div dangerouslySetInnerHTML={{ __html: "Hello" }} />
);

Version

This rule was introduced in DeepScan 1.6.0-beta.

See

• Dangerously Setting the Inner HTML

• React Warning: Directly setting property innerHTML is not permitted. For more information, lookup documentation on dangerouslySetInnerHTML.