Most of the clients I work for what the external links on their website to open a new browser window or tab. This article is not about the debate whether outbound links should open a new tab or stay in the current one. All I want to do is share how to meet this frequent need properly.

In the next articles in this series you will see some available options on how you can identify external links of a Drupal site, and even modify them to be opened in a new browser tab. But if you simply just add a target="_blank" to them, you put your site visitors at risk of tabnapping.

What?

Tabnapping is a phishing attack that takes advantage of user trust and inattention to detail in regard to tabs, and forces the browser to navigate to an impersonated page after the page has been left. Mathias Bynens created a great Github page for demonstrating this attack.

This is why Google Chrome’s built-in Lighthouse validation warns you when it finds an external link with a _blank target on the audited page:

Google Chrome Lighthouse audit reports unsafe links Lighthouse audit report warning about unsafe cross-origin link destinations.

The solution

The best thing is: this problem is really easy to solve. Whenever you have a _blank target on a cross-origin link, add rel="noopener" (or rel="noreferrer") as well. It also worths a mention that by using noopener or noreferrer relation, you can take some performance benefits as well (these are described and demonstrated in an article by Jake Archibald).

Sources:

Article about the debate (further posts on the bottom of the page):