javascriptreactjsdecodedompurify

Decode string in React

I'm displaying user comments on react with DomPurify. When the user enters a dangerous strings: eg ' it gets encoded, how can I safely decode it?

Encoded string react

Here is the code:

 <p className="donor-comment">
    {DOMPurify.sanitize(hit.comment)}
 </p>

Thanks in advance

Solution

  • You don't have to escape user input manually or by using third-party libs like DOMPurify. React DOM does it by default.

    https://reactjs.org/docs/introducing-jsx.html#jsx-prevents-injection-attacks

    By default, React DOM escapes any values embedded in JSX before rendering them. Thus it ensures that you can never inject anything that’s not explicitly written in your application. Everything is converted to a string before being rendered. This helps prevent XSS (cross-site-scripting) attacks.