Sanitizers Vs Dangerouslysetinnerhtml

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

Solution 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.

Solution 2:

I think the best, safest, and optimal approach, as it has been said through comments (especially by Corey Ward) is to avoid the usage of the dangerouslySetInnerHtml as long as it is possible (so sanitizers too). There are some amazing libraries such as markdown-to-jsx that extends the benefits of dangerouslySetInnerHtml (rendering HTML) without exposing the web to XSS attacks.

If the only solution for the use-case is to usedangerouslySetInnerHtml, then the solution must be using sanitizers, keeping in mind that it should be configured to keep styles, classes, and other desired behavior to avoid losing changes.