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 React from 'react';
import ReactDOM from 'react-dom';

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

Compliant Code Example

import React from 'react';
import ReactDOM from 'react-dom';

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

Version

This rule was introduced in DeepScan 1.6.0-beta.

See

• dangerouslySetInnerHTML

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