We updated an older post today. While editing one of the links got broken into multiple links. In order to fix it we had to switch to the Text editor. That’s when we noticed that some of the links had a “noopener” & “noreferrer” value in the “rel” attribute. We manually fixed all of them but as soon as we updated the post they all came back.
What is rel=”noopener”?
“noopener” is a rel attribute that makes sure that any browsing context created by following a link must not have an opener browsing context. This is useful when you are opening a link to an external site in a new tab/window via the target=”_blank” attribute.
Suppose, you have a page called “index.html” that contains a link to an external webpage “outside.html”. This link has a target=”_blank” attribute which means it will open in a new tab. The problem is “outside.html” page can have access to your “index.html” page via a window.opener object. This means that once the user clicks the link to go to “outside.html” it has full control over the other tab’s document object.
Now generally this is harmless. But if you are not careful as to who are linking to, the external site can use this for phishing purpose by automatically redirecting that tab to a different webpage that looks like the original “index.html” page.
Having rel=”noopener” in a link that will open an eternal site in a new tab prevents from abusing window.opener and ensures that it is null.
What is rel=”noreferrer”?
By default the browser sends an HTTP referrer header if the user follows a link. This allows the external page to determine which site/page the user came from. Having a rel=”noreferrer” attribute in a link prevents the browser from sending an HTTP referrer header.
rel=”noopener noreferrer” in WordPress
It turned out that a new feature got shipped with the recent WordPress 4.7.4 maintenance release that automatically adds these values in the rel attribute of links (which open in a new tab or have target=”_blank” in them). This was updated in the core WordPress code as part of a security fix to TinyMCE: https://www.tinymce.com/docs/configure/content-filtering/#allow_unsafe_link_target
In our case the problem was rel=”noreferrer”. We send leads to other websites as well as track our website performance via Google Analytics. With rel=”noreferrer” external websites could no longer track which users were sent from our website. It was also making some of our Google Analytics data tracking broken.
Disabling rel=”noopener noreferrer”
We understand that this feature was added as a security fix. But we need to have control over where exactly we want to apply it. So we found a piece of code that prevents WordPress from automatically adding these attributes to a link. If you know what you are doing and are not concerned about the security risk you can add these to the “functions.php” file of your theme.
// 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;
}
Alternatively, you can also add these code to a plugin file.