sanitize-html VS DOMPurify

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)

Sometimes I use sanitize-html to clean up the html and ask chatgpt to help me refine my selectors.

One thing to watch out for is that the content of each reply is HTML. To be safe (paranoid), I'm running the HTML through sanitize-html to make sure nobody can inject sketchy HTML into my site.

Don't forget to sanitize your HTML using https://github.com/apostrophecms/sanitize-html or upcoming feature: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Sanitizer_API because https://nimb.ws/leTXDt

Vue does not have as much support for Vue as there is for React. Examples are markdown-it, Remark.js, marked.js. But hopefully in the future, there should be more support, and after much research, I picked marked.js because it has the most stars and has zero vulnerability. Marked does not sanitize (meaning it does not secure HTML documents from attacks like cross-site scripting (XSS) ) marked output HTML as that feature is deprecated and has vulnerability but however, it supports the use of other libraries to secure output HTML such as DOMPurify (recommended), sanitize-html or insane.

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)

DOMPurify