Why am I seeing rel=”noopener noreferrer” in my WordPress links?

As of WordPress 4.7.4, when you include a link in a post that opens in a new tab, WordPress will automatically modify the link to include the following rel attribute:

<a href="https://www.google.com" target="_blank" rel="noopener noreferrer">Google</a>

With the rel attribute set this way, the site you browse to will not receive the Referrer in the header of your request. That means any tracking they are doing, like through Google Analytics, will not display your website as being a referring site. You may depend on external sites seeing your domain in their analytics to prove value or popularity or something, so you may not want this new functionality in 4.7.4.

Discussion

First, let’s look at what these two rel types do. MDN has the information we need:

  • noopener
    “Instructs the browser to open the link without granting the new browsing context access to the document that opened it — by not setting the Window.opener property on the opened window (it returns null).”
  • noreferrer
    “Prevents the browser, when navigating to another page, to send this page address, or any other value, as referrer via the Referer: HTTP header.”

In a forum thread about this reported issue at WordPress.org, a user wrote:

This has probably been done to avoid what is known as Reverse Tabnabbing. Reverse Tabnabbing occurs [when] the attacker uses window.opener.location.assign() to replace the background tab with a malicious document.

What is “reverse tabnabbing”? Ben Halpern wrote an article about this vulnerability and goes into some good detail, so feel free to read that.

If noopener fixes reverse tabnabbing, why is noreferrer also included in the fix for this problem in WordPress?

According to Ben Halpern’s article, it’s because Firefox doesn’t support the noopener attribute, so since noreferrer also fixes this vulnerability, that one can be included too as a fallback.

Let’s also note that this is actually an issue with TinyMCE, the WYSIWYG editor that WordPress uses to write posts and pages. In version 4.7.4, WordPress included an update from TinyMCE that changes the handling of target=_blank links in the editor, so that’s actually what changed behind the scenes in WordPress.

Another question I’ve seen is why these attributes are being added to both external and internal links. If the link is to your own site, shouldn’t it be OK? While the answer may be yes, it appears these attribute modifications are being made regardless where the link is going. I asked why they did it this way on the GitHub issue where they discussed the vulnerability, so I’ll update this post if someone responds.

We’ve had some good discussion in the comments below about this vulnerability, so I would encourage you to give the comments a read! One topic that came up is if including rel="noopener noreferrer" would affect affiliate links, like through Amazon’s affiliate program. It will depend on how your affiliate program works, but the majority will include a query string parameter with your affiliate ID. Amazon does it this way – they add the query string parameter of  tag=[YOUR_AFFILIATE_ID]  to Amazon links. The user Tasha correctly pointed out in the comments that the Referrer request header is unreliable, as it can be modified or removed entirely, so most affiliate services will use the query string. To sum up affiliate links: if you use Amazon’s affiliate program or another program that tracks affiliate click-throughs via a query string parameter, you can safely allow rel="noopener noreferrer" on your links.

Daniel St. Jules wrote a handy cross-browser plugin called blankshield to accommodate for the Reverse Tabnabbing vulnerability, but since we’re using WordPress, let’s find a WP solution.

The Solution

Keep in mind, if you choose to remove the noopener and noreferrer attributes on target=_blank links, you are vulnerable to reverse tabnabbing, so do this at your own risk.

Steve Stern wrote this solution in the forums at WordPress.org:

If, after reading the above, you want to disable the new setting, you can overide it with this in your functions.php or in a plugin. It is not recommended.

// Note that this intentionally disables a tinyMCE security feature.
// Use of this code is NOT recommended.
add_filter('tiny_mce_before_init','tinymce_allow_unsafe_link_target');
function tinymce_allow_unsafe_link_target( $mceInit ) {
    $mceInit['allow_unsafe_link_target'] = true;
    return $mceInit;
}

Note if you implement this solution, it will not change any posts or pages that already exist. This only changes the way TinyMCE works when you click to edit a post or page from then on.

If you do end up doing this, I would highly suggest still at least manually adding the noopener attribute to your target=_blank links. That will protect your site in many cases, although not all.

Your Turn!

Have you encountered this problem? What are your thoughts on this vulnerability and possible solution? Did you disable the noopener/noreferrer functionality on your WordPress site? Leave a comment below, and let’s discuss!

  • > Another question I’ve seen is why WordPress is adding these attributes to both external and internal links. If the link is to your own site, shouldn’t it be OK? Couldn’t that hurt SEO? While the answer may be yes to both questions, it appears these attribute modifications are being made wholly by TinyMCE (i.e. WordPress plays no part in this). So TinyMCE is doing the changes, and it must not be distinguishing between external and internal links.

    Are we saying here that it’s happening to external and internal links just because it’s what TinyMCE does? The [Github](https://github.com/tinymce/tinymce/issues/3177) issue about this doesn’t really explain why we can’t omit internal links either so I’m just trying to understand the reasoning and wondering if the WP filter can be modified so that it only applies to internal links.

    • johndubya

      Yes, sadly, that’s currently what TinyMCE is doing. See their documentation about this setting:

      By default all links with a target of _blank will get a rel attribute of noopener noreferrer.

      -https://www.tinymce.com/docs/configure/content-filtering/#allow_unsafe_link_target

      The WP fix I referenced above simply appears to be turning the TinyMCE setting of “allow_unsafe_link_target” off. There’s no customizing it, as it’s only changing a setting in TinyMCE.

      Their reasoning must be that any link with target=”_blank” could be reverse tabnabbed. That’s the only thing I can figure. I haven’t read if that is true or not though. Have you?

      Thanks for the comment!

      • Tasha

        I added your code to my functions.php file and I haven’t noticed a change. You’ve mentioned the WP fix you referenced above simply appears to be turning the TinyMCE setting of “allow_unsafe_link_target” off. There’s no customizing it, as it’s only changing a setting in TinyMCE. I am still seeing target=”_blank” rel=”noopener noreferrer”> on all links in my post editor.

        Would it not make sense to add this code to tinymce-advanced/tinymce-advanced.php instead?

        • johndubya

          Tasha, it may also work to add the function where you referenced, but it does work the way Steve Stern wrote in the solution above. Notice that you won’t see anything change on previous posts. After you include the function “fix,” the only thing that changes is once you add/edit a post, it will stop modifying target=”_blank” links and adding the two rel values. So to test that the function is working, go to a post, add a link that specifies the link should open in a new tab, then go to “Text” mode and ensure rel=”noopener noreferrer” didn’t get added. Let me know if I can help any further. Thanks for the comment!

  • Shahariar Lenin

    What I understand after few hours of research that ”noopener noreferrer” wont hurt my websites SEO. However, I have another question. Should I add “nofollow” tag after ”noopener noreferrer” to make a link nofollow? I see that, “nofollow” tags are gone from the link I nofollowed before.

    • johndubya

      Yes, you are correct. Those two attributes will not hurt SEO, but it is important to consider that with noreferrer, the site you are sending your users to will NOT see your domain as the referrer of that click. If the value or popularity of your site depends on external sites seeing your domain as referring clicks, do NOT use noreferrer on your outbound links.

      I’m not sure if TinyMCE cares where nofollow is in the rel attribute, but before I turned off the TinyMCE feature, I had rel=”nofollow noopener noreferrer” on one of my links, and it was saving correctly. Is that working for you?

      • Tasha

        I learned something new today. 🙂 I thought that noreferrer was nofollow. That isn’t the case. This does not add nofollow. The noopener and noreferrer are not at all the same thing, and have no SEO impact at all. The way you can tell that it has nothing to do with “nofollow” is because of the spelling. It’s not the same word. They have totally different meanings and do not affect each other at all. The nofollow keyword tells search engines to do certain things. The other two tell browser engines to do things with JavaScript. Not even close to the same thing. Don’t get them confused. Really, they’re not even close.

        source: https://wordpress.org/support/topic/remove-rel-noopener-noreferrer-in-wordpress-4-7-4/page/2/

        johndubya “with noreferrer, the site you are sending your users to will NOT see your domain as the referrer of that click.”

        That isn’t the case here.

        Affiliate links contains information in that link that is specific to the persons account. Somebody clicking that link is clicking that special link and explicitly telling them where they came from. A noreferrer in the rel won’t change that or indeed have any effect on
        affiliate whatsoever.

        “before I turned off the TinyMCE feature, I had rel=”nofollow noopener
        noreferrer” on one of my links, and it was saving correctly. Is that
        working for you?”

        I also turned off the TinyMCE feature and turned it back on. Either way I am still seeing rel=”noopener noreferrer” in my post editor.

        • johndubya

          Tasha, yes, those two are different and have very different purposes. Check out the link in my post to MDN where they explain all the link types in detail. I found it very helpful!

          With the noreferrer attribute set on a link, as you will read at MDN, browsers will not include the Referrer header in the request to the external website. That means they will not see your domain as the referrer of the click, so I’m not sure what you mean by “that isn’t the case here.” Can you help explain please?

          Affiliate links are a different deal, as you describe. See my comment in response to Raquel on this blog post. Amazon’s affiliate links include tag=[AFFILIATE_ID], which is how they know who to credit, and it has nothing to do with the referrer.

          I mentioned this in reply to your other comment, but note that after including that function “fix” in your functions.php file, you will only see changed behavior when you add/edit links. Changing the allow_unsafe_link_target setting in TinyMCE does not go back and update previous posts.

  • Hi Josh –

    Thanks for the great article. Question: do you know what impact this will have on affiliate referrals? If an affiliate link is clicked from a website, but the link has “noreferrer” in it, will that prevent the affiliate merchant from properly tracking the commissions? Amazon has been a big question mark here, and so far hasn’t given a response.

    • johndubya

      Hi Raquel! It depends on how the provider is tracking affiliate click-throughs. If they are depending on the Referrer being sent with the HTTP request with your domain in it, you absolutely cannot include “noreferrer” in the rel attribute of your site links. But my assumption would be that most providers include some type of referrer ID in each referral URL. If that was the case, “noreferrer” is fine in the rel attribute for the purposes of affiliate click-through tracking.

      In the specific case of Amazon, affiliate links should include “?tag=[AFFILIATE_ID]”, which is how they know which affiliate to give credit. You should be fine with noreferrer in your links for Amazon’s affiliate program!

    • Tasha

      Amazon does not need referrer information to process affiliate links. When they give you an affiliate link, then it contains information in that link that is specific to your account. Somebody clicking that link is clicking that special link and explicitly telling them where they came from. A noreferrer in the rel won’t change that or indeed have any effect on Amazon whatsoever.

      Referrer data from the browser in header requests is inaccurate, misleading, and basically useless for pretty much all purposes. Nobody really relies on it, because it’s almost never accurate to start with. Privacy software, anti-virus software, even some ad blockers routinely
      prevent referrer information from being sent at all, to the point where there’s no point in advertisers and others to rely on it. So, they don’t. Haven’t for a long time.

      These tags are specifically a solution to a problem where links that open in a new window or tab can access the window or tab that opened them and potentially do malicious things. The noopener prevents that from happening in most browsers, and the noreferrer does the same thing in Firefox versions earlier than 52.

      If you want to turn it off, the method given previously in this thread will work. However, note that this is not considered to be a “solved” problem, and it is thus likely that future versions of
      WordPress will make this the default for all links. It’s not in core yet, but I believe that it eventually will be.

      source: https://wordpress.org/support/topic/remove-rel-noopener-noreferrer-in-wordpress-4-7-4/page/2/

      • johndubya

        Tasha, I don’t think I’d go so far as to say that referrer data is “basically useless.” The referrer request header is there for a reason, and it does come in handy. For instance, on the main web application I work on, we get referrer information tracked to Google Analytics. It allows us to see that users are clicking through to our site from quora.com, facebook.com, and many other sites.

        Maybe what you’re referring to is that spammers are known to include spammy links in their referrers (stuff like “best-website-seo.biz” and such), which can cloud your analytics. But there are lots of sites, such as this at Analytics Edge, that help you create filters for your Analytics to filter out spam referrers.

        I agree with your point that referrers cannot be relied upon by themselves. You’re right that referrers can be modified or removed entirely, which makes them unreliable. I think the point I would make here is that while they are unreliable on their own, they are still helpful for other purposes.

        Thanks for the comments, Tasha, and helping flesh out the discussion!

      • Thanks for the extra info, Tasha!

      • Sean

        Great info. However, the concern for affiliate programs, especially Amazon, isn’t whether or not you’ll get your money. That is fine with the URL string.

        The problem is the noopener and noreferrer being added to your target=_blank links will start to disallow these programs from seeing WHERE your sale came from in their own analytics. In result, this is against the program policies, resulting in a possible consequence for doing so. These programs, in specific Amazon, need to see WHERE your sales come from to disallow spammers from posting their links everywhere on the internet and getting free sales. If they see a sale without a referrer code to double-check that it’s your legitimate website you have listed in their back-end of account settings, there will be a problem.

        I do not recommend continuing to open links in new tabs. At least for now until we hear back from these programs. If you do, this article is great at providing how to stop TineMCE from adding these auto-codes; however, this also allows the vulnerability to continue being present for your visitors. Pick your poison.

  • Hi, I have a question! If another blog linked my blog site with the rel=”noopener noreferrer”, will it still be a good backlink to my blog? And will this be okay for links on sponsored posts too?

    Thanks!

    • johndubya

      Hi Janine! Yes, Google’s crawler will still follow a link, even if it has rel="noopener noreferrer" in it. Those will count as backlinks. Those two attribute values don’t change the way Google handles a link. The primary rel attribute value Google handles is rel="nofollow". With nofollow, Google doesn’t pass link juice through the link to the external site. Nofollow links are still helpful to your site though.

    • johndubya

      Hi Janine! Yes, Google’s crawler will still follow a link, even if it has rel="noopener noreferrer" in it. Those will count as backlinks. Those two attribute values don’t change the way Google handles a link. The primary rel attribute value Google handles is rel="nofollow". With nofollow, Google doesn’t pass link juice through the link to the external site. Nofollow links are still helpful to your site though.

  • functions.php code change will be wiped out after theme update.So it is better to use a plugin for this purpose. https://wordpress.org/plugins/udinra-noopener-noreferrer-remove/