DOMPurify | tolerant XSS sanitizer for HTML , MathML and SVG | Hacking library

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.

Performing async operations while iterating does not work as you might expect it.

When you do forEach each element will be iterated over synchronously. Thus each element will be iterated over and invoke the callback function, which is why you see the 'a' log first for each element.

The exception to this is using a for...of loop, but for other iterators the await will only be blocking inside the callback function.

If you are attempting to limit the amount of request over time to an API you could implement a leaky bucket algorithm. Or you may refactor your iteration to a for...of loop with your delay function to block requests which maintain sequence but is less optimal as the pace of requests will be your delay time plus the time to finish the other async tasks.

You should add the { new: true } flag to return the updated object:

Looks like sanitize is a bit too opinionated for your needs out-of-the-box, the iframe is stripped out. You can pass a configuration and allow the iframe tag.

add this to your server.js file
app.use(express.static(path.join(__dirname, 'public')))

app.use('/uploads', express.static(path.join(__dirname, 'uploads')))

Actually, html-react-parser returns ReactJs object, and its return type is like React.createElement or like type of called JSX.

Using DOMPurify.sanitize will return safe pure HTML elements which those are different to the object that html-react-parser returns. the risxss ESLint plugin will force you to use sanitizing with any kind of sanitize function or library, that I left an answer to your other question to how to Sanitize your string HTML.

Eventually, using sanitizing is better because is the html-react-parser will convert your string HTML to ReactJs object with some tiny changes that would be dangerous because it is possible to have some script of string HTML in the project and it maybe will be harmful it just remove the onclick or onload, etc, from HTML tags but sanitizing will remove all possible harmful tags. also sanitizing will receive configuration, which means you can have your own options for sanitizing.

For testing the functionality, I'd suggest using something like React Testing Library. It should be (fairly) simple to write tests that can simply render your component with malicious data and then assert that it doesn't do bad stuff (like render Script elements or whatever else you're concerned about).

This has the benefit of not only testing sanitize but also your usage thereof in a much more holistic way.

I can't speak to the actual quality/security of your solution, that would be more of a Code Review question I think.

Checkmarx does not have DOMPurify in the list of its recognized sanitizers. What it does recognize are the ESAPI library, xss-filters and htmlescape packages

https://www.npmjs.com/package/xss-filters

https://www.npmjs.com/package/node-esapi

https://www.npmjs.com/package/htmlescape

While technically your code can prevent XSS, I would rewrite it using using any of the packages above. For instance if we are to use xss-filters:

Try this: