Snippet

Sanitizing External Hyperlinks to Prevent XSS in Anchor Tags

Rendering user-provided URLs in href attributes can allow Cross-Site Scripting (XSS) via javascript: URI schemes. Validating protocol prefixes and adding secure rel attributes protects the application.

snippet.js

javascript

function SafeLink({ targetUrl, label }) {
  const isSafe = /^https?:\/\//i.test(targetUrl);
  const safeHref = isSafe ? targetUrl : '#';
 
  return (
    <a href={safeHref} rel="noopener noreferrer" target="_blank">
      {label}
    </a>
  );
}

react

Breakdown

const isSafe = /^https?:\/\//i.test(targetUrl);

Validates that the provided URL explicitly starts with http:// or https://.

const safeHref = isSafe ? targetUrl : '#';

Falls back to a safe placeholder hash if the URL contains unsafe protocols.

rel="noopener noreferrer"

Prevents reverse tabnabbing and isolates window context for external links.

Previous snippet Next snippet

More Beginner JavaScript exercises →

Sanitizing External Hyperlinks to Prevent XSS in Anchor Tags

Related