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.
Need a WordPress website? Or you prefer the more performant headless and static solutions? We can help!
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.
It means that if you embed a link into your site or article which point to another page – and opened in a new window – the target page can modify the original page in some way through JavaScript using window.opener object. It’s easy to imagine the wicked problems this can cause. A basic answer can be the modification of the links or cookie read (this is just in the same domain, it is limited but can happen). A more sophisticated solution would be some redirection where a malicious script asks for personal credentials after a redirect.
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>
This also applies if you open the window through JavaScript window.open(); function because you also open a window. In this case, you have to clear the opener object:
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.
Summary
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?
