Preventing javascript: URI Injection in Dynamic React Anchor Hrefs

function sanitizeExternalUrl(rawUrl) {
  try {
    const parsed = new URL(rawUrl, window.location.origin);
    const allowedProtocols = ['http:', 'https:', 'mailto:'];
    if (!allowedProtocols.includes(parsed.protocol)) {
      return '#';
    }
    return parsed.href;
  } catch {
    return '#';
  }
}
 
function SafeExternalLink({ userProvidedUrl, linkText }) {
  const safeHref = sanitizeExternalUrl(userProvidedUrl);
  const isSafe = safeHref !== '#';
 
  return (
    <a
      href={safeHref}
      rel={isSafe ? 'noopener noreferrer' : undefined}
      target={isSafe ? '_blank' : undefined}
    >
      {linkText}
    </a>
  );
}