Performance, Security and target=”_blank”
It’s quite surprising and interesting to notice that a lot of developers are not aware of the consequences of using target="_blank" in anchor tags, which motivated me to write about it giving an overview of it’s performance and security impact.
Performance Impact
Whenever you add a hyperlink using anchor tags in your page and use target="_blank" there which is basically to open the linked page in a new tab or window, the browser runs the linked page on the same thread your current page is running on because of synchronous cross window access.
Thus, the size of the linked page affects the performance of your current page based on how heavy the linked page is, it’s scripts, assets, etc. It can even block the further execution of your page for considerable amount of time as your thread now is busy running javascript of the linked page. Your page speed is affected by this at a greater extent.
Browsers like chrome have been looking to use separate threads for the execution of the linked pages. Some browsers optimise this behaviour to run the linked pages on a separate thread thus avoiding the risk of affecting performance of your page.
Security Compromise
Adding the same exposes your website to cyber attacks as window’s opener api allows access to the window from where the linked page is opened. This means anyone can get reference to your window object through window.opener api and they can do anything they want like redirect your page to a phishing site, reverse tabnabbing, etc.
So doing this, you end up giving full control over your page increasing the attack surface of your website without even realising which makes it the worst.
eBay and Heroku are some of those popular names whose web pages were vulnerable at some point because of this.
Solution
Adding the attribute rel="noreferrer noopener" solves this problem. It avoids exploitation of the window.opener api and makes the linked page run in a separate thread or process. Doing this, your web pages are now secure and faster. So, make it a practice to add it to every anchor tag where you use target="_blank". And yes, the solution is as simple as that.
I would recommend you to avoid linking your pages to external links at all or if it can’t be avoided at least be careful about it as it can increase the attack surface for your page in ways you won’t even realise.
Lastly, please don’t forget how rel="noreferrer noopener" saves the day.
References:
https://jakearchibald.com/2016/performance-benefits-of-rel-noopener/
https://developers.google.com/web/tools/lighthouse/audits/noopener
