Snippet

Validating Dynamic Anchor URLs to Prevent JavaScript Pseudo-Protocol Injection

Passing unsanitized dynamic user input directly into an `href` attribute allows attackers to inject `javascript:...` pseudo-protocols. Validating URLs with the native `URL` API ensures only safe protocols execute while `rel="noopener noreferrer"` guards against reverse tabnabbing.

snippet.js

javascript

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>
  );
}

react

Breakdown

const parsed = new URL(targetUrl, window.location.origin);

Parses the input string using the browser standard URL constructor to extract protocol components.

return ALLOWED_PROTOCOLS.includes(parsed.protocol);

Checks the parsed URL scheme against a strict allowlist to disallow unsafe schemes like javascript:.

rel="noopener noreferrer"

Prevents the target page from accessing window.opener and avoids sending referrer headers.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

Validating Dynamic Anchor URLs to Prevent JavaScript Pseudo-Protocol Injection

Related