Snippet

Hardening External Anchor Links with noopener in JSX

When opening links in a new browser tab using target='_blank', malicious destination pages can access window.opener to redirect or exploit the parent page. Adding rel='noopener noreferrer' isolates the new browsing context and safeguards user session security.

snippet.js

javascript

export function SecureExternalLink({ url, label }) {
  return (
    <a
      href={url}
      target="_blank"
      rel="noopener noreferrer"
    >
      {label}
    </a>
  );
}

react

Breakdown

target="_blank"

Instructs the browser to open the target destination URL in a new window or browser tab.

rel="noopener noreferrer"

Prevents the new tab from referencing window.opener and stops referrer headers from leaking sensitive URLs.

Previous snippet Next snippet

More Beginner JavaScript exercises →

Hardening External Anchor Links with noopener in JSX

Related