Sanitizing Dynamic Href Values against Javascript Scheme Injection

import React from 'react';
 
const RESTRICTED_SCHEMES = ['javascript:', 'data:', 'vbscript:'];
 
function sanitizeDestination(rawUrl) {
  if (!rawUrl || typeof rawUrl !== 'string') return '#';
  const normalized = rawUrl.trim().toLowerCase();
  const isRestricted = RESTRICTED_SCHEMES.some((scheme) => normalized.startsWith(scheme));
  return isRestricted ? '#' : rawUrl.trim();
}
 
export function SecureExternalLink({ targetUrl, linkText }) {
  const safeUrl = sanitizeDestination(targetUrl);
  const isNavigable = safeUrl !== '#';
 
  return (
    <a
      href={safeUrl}
      target={isNavigable ? '_blank' : undefined}
      rel={isNavigable ? 'noopener noreferrer' : undefined}
    >
      {linkText}
    </a>
  );
}