Enforcing DOM XSS Defense via Trusted Types Policy in React Extensions

import React, { useEffect, useRef } from 'react';
 
const sanitizePolicy = window.trustedTypes?.createPolicy('reactHTMLPolicy', {
  createHTML: (input) => input.replace(/<script[^>]*>([\s\S]*?)<\/script>/gi, '')
});
 
export function TrustedHTMLRenderer({ rawHtml }) {
  const containerRef = useRef(null);
 
  useEffect(() => {
    if (containerRef.current) {
      const trusted = sanitizePolicy ? sanitizePolicy.createHTML(rawHtml) : rawHtml;
      containerRef.current.innerHTML = trusted;
    }
  }, [rawHtml]);
 
  return <div ref={containerRef} />;
}