rel='noopener' Keeps You Safe and Fast
Last Updated -
When a hyperlink opens a new browser window or tab you should add the rel="noopener" attribute to the link. This prevents the new page from reaching back to control the initial page.
Anytime you open a new window using the window.open method or with a hyperlink using the target attribute. By default the new page has access to the window.opener object, which can be used to drive the original page.
It is common to open external links in a new browser window. This means the visitor does not 'leave' your site for the target site. The two ways to do this are using anchor tags with the target attribute set to the new window's name:
<a href="{external url}" target="_blank">anchor text</a> The other way is via JavaScript using window.open:
window.open("external url");
As you can imagine this opens up a variety of potential security issues. Fortunately you can disable this property by adding the rel="noopener" attribute to hyperlinks.
You will also see how opening new browser tabs opens you up to performance issues because you are inheriting the target page's performance issues.
The Security Issue of Opening a New Browser Window
Maybe you control all the external pages you link to, by that I mean you only link to pages you feel you can trust. But as soon as you allow user generated content, like comments, you have outsourced control of those target pages to someone you don't really know.
They could link to anything, including a malicious site.
Over time the pages you link to change. Domains expire and 'bad guys' purchase them. Now you have a link to a bad site and worse, it could be used to control your page.
The number one problem is the new page could reach back to your page and access the navigator.location object. This means they can change the page loaded in your window.
Now they have complete control over the page in the tab where you page once was. You may have linked to what you think is a 'clean' page, but it could be hiding a script to change your page to their malware page.
Once they change your page to their page they could do anything they want and you were the gateway to loading the page.
Opening External Links with JavaScript window.open
It is a bit trickier to shield against this attack when you open pages using JavaScript.
You could create a reference to the new window and set the opener property to null like this:
var newWindow = window.open(); newWindow.opener = null; newWindow.location = url; In this example you create reference to a new window, set the opener to null and then set the new window's location. Now the new page will have no access to the opener object because it simply does not exist.
You can also create a temporary iframe to open the new tab. Once the new tab opens you can then delete the iframe. This removes the window.opener reference in the new page.
Performance Impact
A few years back Jake Archibald wrote about this same topic and discussed how using the noopener has a positive performance impact.
To understand why opening a new window poses performance issues you need a little primer on how browsers work. Each window is more or less single threaded. The new window opened when a link using the target attribute is clicked runs in the same thread.
Now the new window's rendering and script parsing runs in the same thread as your page. This means you are allowing someone else's code to slow your page's ability to respond to the user.
If you are not aware most web pages use excessive and slow JavaScript, especially pages with cascading third party requests. All those scripts are now your scripts.
When you use the rel="noopener" attribute the second window is executed within its own thread, freeing your page from suffering from the target page's performance issues.
So now you are not only protecting against a potential security issue you are protecting yourself from inheriting performance problems the target page has and maybe their malicious third party scripts.
Summary
It may seem innocuous and simple, but the this little trick can save you and your customers some grief later on. Make sure any link on your site using the target attribute uses the rel="noopener" attribute.
You will also want to make sure any external pages you load via the JavaScript window.open method are isolated as well.
Even if the target page is not owned by a bad actor, you need to guard against performance impact due to their poor page architecture.
Make sure your web pages always use the rel=noopener when opening external links in a new window to prevent access to your window.