How to remove rel=”noopener noreferrer” from WordPress?

Why WordPress added rel=”noopener noreferrer” ?

I guess before removing them from your site you should know about them. I will present Pros and Cons of having them on your site. So in the end you can decide whether you want to remove them or keep them as it is.

This tag was added to address a security vulnerability. The problem is with links having target=’_blank’ tag in them. If any link has target=’_blank’ the link gets open into new tab or window. The new tab or window has access to previous window as well.

Note for sake of clarity we will use child window term for new window opened after link click. We will use parent window term for page which have the link on it.

So the child window has some access to the parent window. Child window page can do something suspicious to parent window page. For example they can execute JavaScript on parent window page.

To solve this problem WordPress added rel=”noopener noreferrer” tag to links with target=’_blank”. Now lets see when WordPress adds rel=”noopener noreferrer” and target=’_blank’ to a link. For visitors looking for technical details on issue solved by this tag refer to this link. I am producing the below text from this link.

The rel="noreferrer" attribute indicates that the browser should not send a Referer header when following the link. It enhances privacy by allowing users to avoid leaking referrer information when they click on (or prefetch) links to external sites. It also enhances security by preventing the linked page from gaining access to the linking page via the window.opener object.

When WordPress adds rel=”noopener noreferrer”?

I have experienced couple of situations were WordPress added these tags. First one was quite obvious but second one was not expected. I will cover both the situations below.

First Case

We all add links to our posts. The links can be internal or external. People prefer that new links are opened in new window or tab. So that reader are present on the original page as well. This is achieved by clicking open link in a new tab while adding or editing a link dialog.

wordpress-adding-noopener-noreferrer

WordPress now by default adds rel=”noopener noreferrer” tag to all links (external or internal).

Second case

Above one is expected behavior of WordPress. Now this one is unexpected. On my other site I use Amazon Affiliate network. Sometimes I use method described in first step to add affiliate link. Sometimes I paste the affiliate link (Amazon product link) directly on post.

To my surprise WordPress automatically adds rel=”noopener noreferrer” tag to links directly pasted. On closer inspection I was able to understand reason of doing so. Amazon Product links always have target=’_blank’ tag in them.

So it seems WordPress Editor looks for target=’_blank’ tag. If it finds any link with target=’_blank’ then it adds rel=”noopener noreferrer”.

What are impacts of rel=”noopener noreferrer”?

Below image summarizes impact of rel=”noopener noreferrer” . I will explain each of the impact in details as well.

rel-noopener-noreferrer-impact

Security Impact

Above we discussed reason this tag was added. You also know when this tag is getting added. Now lets discuss if we should remove it or not. If this feature was added in WordPress then it should have some benefit. Also Drupal has plugin for it.

This tag definitively address a security concern. Below is Google’s thought on this issue ( source link)

Over the past few months, we have received a significant number of reports about a “reverse tabnabbing” attack, where a foreground tab opened from a trusted application, and displaying an attacker-controlled website, uses window.opener.location.assign() to replace the background tab with a malicious document.

Unfortunately, we believe that this class of attacks is inherent to the current design of web browsers and can’t be meaningfully mitigated by any single website; in particular, clobbering the window.opener property limits one of the vectors, but still makes it easy to exploit the remaining ones.

Now WordPress by adding this tag helps you eliminate window.opener property. But there are other ways attackers can exploit.

SEO Impact

There has been discussion on SEO impacts of this tag. Above you have seen views of Google on this issue. So there is no question of Google being bothered about this tag. Also this tag should not be confused with rel=”nofollow” or rel=”follow”.

This tag has no relationship with rel=”follow” or rel=”nofollow”. So there will not be any impact on your site if you use this tag or does not use this.

Affiliate Earning Impact

Above I mentioned that this tag was added into Amazon Affiliate links. rel=”noopener noreferrer” tag hides referral information if a link is clicked. So Amazon will not be able to know that referral came form your website.

But Amazon does know that it is your referral link which got clicked. So in short Amazon knows

  1. Your referral link was clicked. So you should get the commission
  2. But it does not know if the link was placed on your site.

Now You have to add your site on Amazon Affiliate account to get approved. So this lack of source may create problem. They may think that you are emailing users with your Affiliate link or using any other way of promoting the links.

This is the very reason I will recommend removing this tag from your affiliate links. However there is no direct statement from Amazon. But you should not wait for your account to get banned. It is better to get rid of this tag. It is now solving some new problem.

Above I have mentioned issue that this rel=”noopener noreferrer” causes with Amazon Affiliate account. But this tag may also impact other Affiliate Accounts which depend on source referrer information. So if you are using Affiliate networks on your website then it is better to remove this tag from your site.

How to remove rel=”noopener noreferrer” ?

Now that you have decided whether to keep or remove this tag on your site lets discuss ways to remove it from your WordPress site.There are two parts of removing this tag from your WordPress site.

  1. Making change that no new link will have this tag
  2. Removing this tag from existing links

I will share 3 ways to remove this tag from your site. Below is comparison of all the three ways

  • Method 1 – Removes the tag from New links and existing links
  • Method 2 – The tag is removed from new links only
  • Method 3 -The tag is removed from new links only

Method 1 (Best Method)

It automatically restricts WordPress from adding this tag to new links. So after installing this plugin no new links will have rel=”noopener noreferrer” tag. Also it removes this tag from all your existing link. Note this is the only plugin as of now which removes this tag from existing links.

Remove Noopener Noreferrer plugin link

noopener-noreferrer-remove-content

Method 2

I have also releases a plugin on WordPress.org that removes this tag from new links. You just have to install the plugin and it works. Note the plugin is still in review phase. I will update the post with plugin link once it gets approved.

In the meantime you can download the plugin for free by liking our Facebook page.

Download Plugin


Click on Like button to download file


Method 3

This method is similar to method 2. It removes this tag from new links. You have to modify your theme files. Follow below steps

  1. Open functions.php file of your theme in Editor.
  2. Paste below code
  3. Save the file
function udinra_remove_link_target( $mceInit ) {
    $mceInit['allow_unsafe_link_target']=true;
    return $mceInit;
}

add_filter('tiny_mce_before_init','udinra_remove_link_target');

Was your site affected by this tag? Feel free to share your thoughts.

One comment How to remove rel=”noopener noreferrer” from WordPress?

Leave a Reply

Your email address will not be published. Required fields are marked *