DOMPurify VS html-react-parser

Pure functions, by their nature, reduce the attack surface. Because they don’t modify external state, they’re less susceptible to side-effect vulnerabilities like object pollution or prototype attacks. However, if a pure function processes user input, it’s still crucial to validate and sanitize that input to prevent XSS or other injection attacks. Libraries like DOMPurify (https://github.com/cure53/DOMPurify) can be used to sanitize HTML content, and schema validation libraries like zod (https://github.com/colyseus/zod) can be used to validate data structures. Always treat user input as untrusted.

ECMAScript features like Proxy can be exploited if not used carefully. Avoid creating proxies that intercept sensitive operations without proper validation. Prototype pollution attacks are a concern; sanitize user input and avoid modifying the Object.prototype. XSS vulnerabilities can arise from improperly handling user-provided data in dynamic contexts. Use DOMPurify (https://github.com/cure53/DOMPurify) to sanitize HTML before rendering it. Validation libraries like zod (https://github.com/colyseus/zod) can enforce data schemas and prevent unexpected input.

Let's take a look at how we implement sanitization in the secure version of our vulnerable application. Since this application is primarily written using JavaScript, we use the dompurify library for the client side and the isomorphic-dompurify library for server-side sanitization. In the app.js program that acts as our web server, you will find an express endpoint /sanitized with a GET and POST implementation:

After several hours of code review, I finally spotted something unfamiliar in the Markdown Renderer component: a function called escapeHTML was being used to escape HTML, even though DOMPurify was already being used for sanitization right after!

DOMPurify Documentation

Use libraries such as DOMPurify to sanitize input.

//https://github.com/cure53/DOMPurify import React from "react"; import DOMPurify from "dompurify"; const sanitize = (dirty) => DOMPurify.sanitize(dirty); const DangerousHtml = ({ innerHTML, tag }) => { const clean = sanitize(innerHTML); if (typeof tag === "undefined") { return

; } return ; }; export default DangerousHtml;

Input Sanitization: The most crucial step in preventing XSS attacks is to ensure that all user-generated content is properly sanitized before it is rendered on the page. Use libraries like DOMPurify or built-in sanitization functions provided by your framework (e.g., React's dangerouslySetInnerHTML) to strip out any potentially harmful code.

When using dangerouslySetInnerHTML, it is crucial to sanitize the HTML strings to prevent XSS attacks. DOMPurify is a robust library that cleans HTML content by removing or neutralizing potentially dangerous scripts or tags.

Since marked doesn't do it for you, make sure you sanitize the user input (the text on the user profiles) before rendering it to visitors.

Some libraries for doing that with good defaults:

- https://github.com/cure53/DOMPurify

- https://github.com/apostrophecms/sanitize-html

- https://github.com/bevacqua/insane

(right now your site looks vulnerable to XSS)

using libraries like html-react-parser but it did not work see: https://github.com/remarkablemark/html-react-parser/discussions/1015

I was thinking about some sanitization library but found this: https://github.com/remarkablemark/html-react-parser which i have reviewed to deeply yet.

I'm glad I could help! Please be careful though and check the FAQ section of the library. It says that it does not sanitize and it's not XSS safe. This is the issue where they explain: https://github.com/remarkablemark/html-react-parser/issues/94

I then switched to html-react-parser, but same result.

by using dangerouslySetInnerHTML, entire html in the string is preserved. Other alternative would be to use a html-react-parser library.

However, when I insert the body_html field into my JSX map, it's just displaying a string with a bunch html tags in it. One quick google showed me html-react-parser and after the easiest install and application, my blogs are loading beautifully with pictures and links. All I had to add was the import (import parse from 'html-react-parser';) and a couple lines to my blogList map: