Snippet

Protecting Outbound Links Against Reverse Tabnabbing

When opening links in a new browser tab with target="_blank", omitting rel="noopener noreferrer" can expose users to reverse tabnabbing, allowing malicious external sites to access the window.opener property.

snippet.js

javascript

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

react

Breakdown

target="_blank"

Directs the browser to load the destination URL into a new tab or window.

rel="noopener noreferrer"

Blocks the target page from referencing the opening window and strips referrer header info.

Previous snippet Next snippet

More Beginner JavaScript exercises →

Protecting Outbound Links Against Reverse Tabnabbing

Related