javascript - Sanitizers VS dangerouslySetInnerHtml

Question

According to some React documentation:

Improper use of the innerHTML can open you up to a cross-site scripting (XSS) attack. Sanitizing user input for display is notoriously error-prone, and failure to properly sanitize is one of the leading causes of web vulnerabilities on the internet.

It seems that improper usage of the sanitizers and the innerHTML can expose the site XSS (Cross-Site Scripting) attacks.

On the other hand, according to other documentation (such as Gatsby or sanitizers itself), they are recommended:

The most straightforward way to prevent a XSS attack is to sanitize the innerHTML string before dangerously setting it. Fortunately, there are npm packages that can accomplish this; packages like sanitize-html and DOMPurify.

What's the best and safest approach to avoid exposing an application to XSS attacks in React while also avoiding improper usage of sanitizers?

Answer 1

The two options are not in contrast with each other:

Improper use of the innerHTML can open you up to a cross-site scripting (XSS) attack

Emphasis on 'improper'.

sanitize the innerHTML string before dangerously setting it

Using an established and well-known library to sanitize the input before setting it is safe, because it is not an improper use of innerHTML.