336

I see people recommending that whenever one uses target="_blank" in a link to open it in a different window, they should put rel="noopener noreferrer". I wonder how does this prevent me from using Developer Tools in Chrome, for example, and removing the rel attribute. Then clicking the link...

Is that an easy way to still keep the vulnerability?

3
  • What kind of protection do you think it would (or would not, in this case) grant?
    – user241244
    Commented Jun 5, 2018 at 22:14
  • I was considering browser extensions that can manipulate the DOM.
    – Miro J.
    Commented Jul 25, 2018 at 13:38
  • 2
    Firefox 79 will do this automatically (well, noopener at least, but as pointed out below, noreferrer is rendundant): hacks.mozilla.org/2020/07/firefox-79
    – Kev
    Commented Jul 31, 2020 at 9:29

7 Answers 7

450

You may be misunderstanding the vulnerability. You can read more about it here: https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/

Essentially, adding rel="noopener noreferrer" to links protects your site's users against having the site you've linked to potentially hijacking the browser (via rogue JS).

You're asking about removing that attribute via Developer Tools - that would only potentially expose you (the person tampering with the attribute) to the vulnerability.

Update as of 2021: All current versions of major browsers now automatically use the behavior of rel="noopener" for any target="_blank" link, nullifying this issue. See more at chromestatus.com.

10
141

Links with target="_blank" on them are vulnerable to having the referrer page being swapped out in the background while the user's attention is diverted by the newly-opened tab. This is known as reverse tabnapping:

Example malicious flow

The referring page is stored in window.opener, and a malicious site could modify this through:

if (window.opener) {
   window.opener.location = "https://phish.example.com";
}

Adding rel="noopener noreferrer" fixes this vulnerability in all major browsers.

Note that you could theoretically remove the rel client-side through manipulation... but why would you want to? All you are doing is deliberately making yourself vulnerable to the attack.

Other users who visit the same website (and don't modify their own client-side code) would still be safe, as the server would still serve up the rel="noopener noreferrer". Your removal of it only applies to you.

2
  • 1
    just wander, what benefit of rel="noopener noreferrer" gives to my internal application? It opens same internal domain, in same internal network, there is 0 chance that it will be referring to some external site. And if it still would beneficial, why not to add it to all links in general?
    – Dainius
    Commented Dec 11, 2020 at 9:05
  • This will stop pages learning about how they are being referred. Potential this is an unwanted situation, especially when you interested in tracking how users are referred to your site. I'm not sure if google analytics can get that information if rel="noopener" is set. Commented Feb 1, 2022 at 13:22
57

Browsers fix

All major browsers have fixed this issue by updating the default behaviour to be secure without having to specify rel property. Read more in About rel=noopener.

0
35

Regarding the Lighthouse Best Practices audits report:

Add rel="noopener" or rel="noreferrer" to any external links to improve performance and prevent security vulnerabilities.

In general, when you use target="_blank", always add rel="noopener" or rel="noreferrer":

For example:

<a href="https://www.kaiostech.com/store/" target="_blank" rel="noreferrer">
  KaiStore
</a>
  • rel="noopener" prevents the new page from being able to access the window.opener property and ensures it runs in a separate process.
  • rel="noreferrer" has the same effect but also prevents the Referer header from being sent to the new page.

See the official document for more information.

2
  • 1
    Can you add both? Commented Dec 7, 2020 at 22:57
  • 3
    Yes @blessed U can add both like rel="noopener noreferrer"
    – ashuvssut
    Commented Jan 31, 2021 at 17:43
7

There's no answer pointing out a case when you would actually want to pass referrer just ignoring any "security risk" warnings: for instance, when you are linking your own external website, which is controlled by you/your org and which presumably has no described security vulnerabilities.

For instance, in my case, in I want to see in Google Analytics how many of my visitors read docs by clicking links inside the web app (which uses a separate domain from where docs are) and how many come from search engines, and hence I want to utilize the referrer header for distinguishing these user groups.

Here's how you can do it when linking websites like your own docs that are safe for sure:

{/* Safe link to the own website *//* eslint-disable-next-line react/jsx-no-target-blank */}
<a href="https://my-own-website.com" target="_blank">
  Learn more
</a>

In React, I made a wrapper common component to avoid putting eslint-disable everywhere in the code (an opposite to UnsafeExternalLink component):

import React, { ReactNode } from 'react';

/* eslint-disable react/jsx-no-target-blank */

/**
 * Safe link to own external websites only.
 */
const SafeExternalLink = ({
  href,
  children,
}: {
  href: string;
  children: ReactNode;
}) => (
  <a href={href} target="_blank">
    {children}
  </a>
);

export default SafeExternalLink;
2
  • You should still add rel="noopener" in this scenario, no?
    – Shoelaced
    Commented Sep 21, 2021 at 14:46
  • @Shoelaced I believe rel="noopener" is not necessary either when linking the web pages you own (web pages you trust), but anyway adding it would potentially lower any security risks. In my case, I needed to avoid using just "noreferrer". Commented Sep 22, 2021 at 17:03
4

The anchor tag rel=”noopener” or rel=”noreferrer” attributes improve the website security, but some people want to ignore them because they think they will affect their website search engine optimization, but that is just a myth. It protects the confidentiality of your website audience and prevents external website by spreading malicious code.

1
  • 14
    It would be nice if you can cite some source for "myth" statement. Especially, for the noreferrer part.
    – Miro J.
    Commented Oct 16, 2019 at 16:26
0

If developer console is showing warning regarding noopener noreferrer, make sure you add both noopener and noreferrer in rel. link should be something like below:

<a href="www.google.com" target="_blank" rel="noopener noreferrer" />
1
  • 4
    This does not appear to be addressing the question that was asked.
    – TylerH
    Commented Dec 4, 2020 at 18:47

Not the answer you're looking for? Browse other questions tagged or ask your own question.