Sanitizing dangerouslySetInnerHTML to Prevent XSS

Snippet

Sanitizing dangerouslySetInnerHTML to Prevent XSS

Using dangerouslySetInnerHTML is a security risk. To prevent Cross-Site Scripting (XSS), you must sanitize the input using a library like DOMPurify inside a useMemo hook for performance.

snippet.js
javascript
import DOMPurify from 'dompurify';
 
const MarkdownPreview = ({ rawHtml }) => {
  const cleanHtml = React.useMemo(
    () => DOMPurify.sanitize(rawHtml),
    [rawHtml]
  );
 
  return <div dangerouslySetInnerHTML={{ __html: cleanHtml }} />;
};

react

Breakdown

DOMPurify.sanitize(rawHtml)

Strips dangerous scripts and attributes (like 'onerror') from the HTML string.

dangerouslySetInnerHTML={{ __html: cleanHtml }}

React's explicit API for injecting HTML, now safe due to the previous sanitization step.

Previous snippet Next snippet

More Expert JavaScript exercises →

From your library

Sanitizing dangerouslySetInnerHTML to Prevent XSS

Related