Contextual HTML Sanitization and CSP Nonce Verification in React Components

import { useMemo } from 'react';
 
function sanitizeUntrustedHTML(rawHtml) {
  const parser = new DOMParser();
  const doc = parser.parseFromString(rawHtml, 'text/html');
  const scripts = doc.querySelectorAll('script, iframe, object, embed');
  scripts.forEach((node) => node.remove());
  
  const allElements = doc.body.querySelectorAll('*');
  allElements.forEach((el) => {
    Array.from(el.attributes).forEach((attr) => {
      if (attr.name.startsWith('on') || attr.value.trim().startsWith('javascript:')) {
        el.removeAttribute(attr.name);
      }
    });
  });
  return doc.body.innerHTML;
}
 
export function SecureSafeHTML({ untrustedContent, cspNonce }) {
  const cleanHTML = useMemo(() => {
    if (!cspNonce) return '';
    return sanitizeUntrustedHTML(untrustedContent);
  }, [untrustedContent, cspNonce]);
 
  return (
    <div
      data-nonce={cspNonce}
      dangerouslySetInnerHTML={{ __html: cleanHTML }}
    />
  );
}