Validating Dynamic Anchor URLs to Prevent JavaScript Pseudo-Protocol Injection

import React from 'react';
 
const ALLOWED_PROTOCOLS = ['https:', 'http:', 'mailto:'];
 
export function SafeExternalLink({ href, children, ...rest }) {
  const isSafeProtocol = (targetUrl) => {
    try {
      const parsed = new URL(targetUrl, window.location.origin);
      return ALLOWED_PROTOCOLS.includes(parsed.protocol);
    }
    catch {
      return false;
    }
  };
 
  const safeHref = isSafeProtocol(href) ? href : '#';
 
  return (
    <a
      href={safeHref}
      target="_blank"
      rel="noopener noreferrer"
      {...rest}
    >
      {children}
    </a>
  );
}