Snippet

Securing External Hyperlinks with Safe Target Attributes

Opening external links in a new browser tab with target="_blank" can expose apps to security vulnerabilities (tabnabbing). Adding rel="noopener noreferrer" prevents the target page from accessing window.opener and blocks referrer leakage.

snippet.js

javascript

function SafeExternalLink({ href, text }) {
  return (
    <a
      href={href}
      target="_blank"
      rel="noopener noreferrer"
    >
      {text}
    </a>
  );
}

react

Breakdown

function SafeExternalLink({ href, text }) {

Creates a reusable wrapper component for outbound hyperlinks.

target="_blank"

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

rel="noopener noreferrer"

Security attribute that isolates the new tab context and suppresses the Referer HTTP header.

Previous snippet Next snippet

More Beginner JavaScript exercises →

Securing External Hyperlinks with Safe Target Attributes

Related