Security and Performance Benefit from the rel=”noopener”
Opening links in a new window is a generic method to navigate the users to another domain. We can achieve this using target=”_blank”. I’m sure everybody used the target with _blank value in some of his projects, but I’m not sure everybody knows the drawbacks of it.
Fortunately knowing the disadvantages of opening a link is more widespread thanks to Mathias Bynens (who come up with this problem first) and other authors. As usual, this is a kind of topic which worth to mention again mostly for our user’s safety and who didn’t know about it.
About the Security
When you open a new document through a link with target=”_blank” the opened document can access the opener document’s object. If you are open the same origin you have full access – to the document object too – on cross-origin this is disabled (window.opener.document), but you can still access the location object.
To see this in work, please navigate to this link – just for the test, it won’t harm you I swear.
So what happens here? After you click on the link (in the opened document), the browser opens the page which runs a script that using the window.opener object to modify the original page (which you come from). Plain dull but can be harmful.
The last question is: how we can disable this behavior? Use rel=”noopener” on every link which is using target=”_blank” and navigate to another document.
<a href="https://adamlaki.com" rel="noopener"></a>
In older browsers, you can use rel=”noreferrer”, but this also removes the referral header.
<a href="https://adamlaki.com" rel="noopener noreferrer"></a>
var newWindow = window.open(); newWindow.opener = null;
About the Performance
In some extreme cases, the opener object can lead to performance problems which are connected to the browsers main thread handling. Jake Archibald came up with the exciting find which is nice to know.
It is a small and ridiculous problem which can cause some headache. As a developer, we need to protect the users against this kind of vulnerabilities. Now, this parameter is default in WordPress if you use blank target, but this is not a big job to make a filter in other systems too so why not to do it?
Follow us on Twitter
Do you want to support and help us? A Twitter following or a sharing means a lot to us. Thank you!