Stop Opening External Links In New Windows (and what to do instead)

For many years, web developers have been in the habit of adding the attribute target="_blank" to an <a> tag to open a link in a new window (or tab). There are various reasons for doing this – some good and some not so good.

What has become clear is that using this attribute on its own creates accessibility issues and potential performance problems but also raises a serious security risk.

This article will discuss the reasons for using target="_blank", the issues with using it and lay out a safe approach.

If you’re short on time, here’s our safe approach:

1. Using the target="_blank" attribute to force the user to open a new window is poor accessibility, so we should avoid doing it (except in a small number of legitimate cases, see below). Clients sometimes insist however, so if you need to do it…
2. You should always add a rel="noopener noreferrer" attribute to deal with the known security and performance risks.
3. You should always apply this approach to new code and you should also spot and fix existing code that's missing the correct rel attribute.

Read on for rationale and background…

Why Does Anyone Want This Anyway?

If you want to open a link in a new window, your browser makes that easy enough – you can use the context menu on a link by right-clicking (or use a keyboard shortcut). So why would a developer want to force it to happen?

There are some good reasons to do this, one is because there is an ongoing action on the page that you don’t want to disrupt by loading a new page.

For example, a user is partway through filling out a form, some fields have “more information” links next to them to explain what’s required. If you open that link in a new window, the user’s partly completed form remains intact.

The other good reason is when the current page is in a secure area of your site, but opening the link would terminate the user’s secure session. Opening the insecure link in a new window leaves the user logged on in the original window.

Most often though, you might be tempted to ask for this action on external links because you worry that visitors will get "lost" by clicking an external link and then fail to return to your site. By opening the external link in a new window, we create a situation in which the visitor is "returned" to your site when they close the new window.

We don’t think this is a good reason. It breaks the basic principles of letting the user choose, but the main argument against doing this (and this is what we tell our clients) is that it breaks WCAG guidelines on accessibility.

Accessibility Issues

The Web Content Accessibility Guidelines (WCAG) are developed by the W3C (the web’s de facto governing body) to provide a shared standard for web content accessibility. The guidelines explain how to make web content more accessible to people with disabilities. Most government agencies and many commercial organisations must adhere to specific levels of compliance with WCAG guidelines.

Guideline 3.2 is very simple and specific:

If a user can’t tell whether clicking a link is going to open in the same window or a new window, that breaks 3.2. To make sense of that, consider how the interaction might seem to a person with a vision impairment using a screen reader to navigate your website. Unexpected behaviour like this adds a whole other level of difficulty to making sense of your content.

Technique G200 (Opening new windows and tabs from a link only when necessary) adds some nuance for the cases we’ve already discussed.

Lastly, Technique H83 (Using the target attribute to open a new window on user request and indicating this in link text) recommends the text of the link should also indicate that a new window is about to be opened. For example:

NOTE: Some resources on the web advise developers to use Javascript to open a new window instead of using the target="_blank" attribute (this can avoid the security and performance issues we’re about to discuss), but this approach would make the interaction even more difficult for person with a vision impairment. Avoid at all costs.

In summary, only do it when it’s preferable from an accessibility perspective and when you do, make sure it’s clear what’s about to happen.

Security Risk

In addition to the accessibility issues, using the target="_blank" attribute can create security risks and, potentially, performance issues.

Google's Lighthouse documentation summarises the security issue in brief as:

Consider that the target, external URL you intend to open in the new window might get taken over by a third party without anyone's knowledge after the link is created. If that URL now points to a malicious site, code on that site can reach “back” into the original browser window and tell it to go somewhere else.

Very dangerous. It relies on a malicious takeover of the external URL, which might seem unlikely, however it happens and – let’s be honest – how often does anyone check that your external links are all still valid and pointing to the right sites?

The HTML Living Standard by WHATWG defines a bunch of values which can be assigned using the rel attribute to define the type of a link and browsers interpret some of these to define behaviours.

Types which specifically relate to this security issue:

• noopener - Prevents the new page from accessing the window.opener object and manipulating the original browser window.
• noreferrer - Don't send referrer information – which prevents potentially malicious sites gathering information about yours.

Hence, adding rel="noopener noreferrer" to an <a> tag when it has target="_blank" effectively addresses the security issue.

Internet Explorer was notorious for not supporting noopener but now that IE has begun to vanish, we treat it as having baseline support.

Performance Problems

Lastly, there are also potential performance issues with using target="_blank". As the Lighthouse docs note:

“The other page may run on the same process as your page. If the other page is running a lot of JavaScript, your page's performance may suffer.”

However, using the noopener type ensures that the new window runs in its own process, thus quarantining it from the origin window. Therefore the same approach handles both the security and performance issues.

Summary

That’s it. So to summarise the recommended approach:

1. Avoid opening links in a new window at all unless it’s preferable, from an accessibility perspective, to do so.
2. If you do it,
   1. use the target="_blank" attribute (not Javascript),
   2. always add a rel="noopener noreferrer" attribute to safeguard your original window,
   3. and always add an explanation in the link text of what’s going to happen (eg “(opens new window)”).
3. Always apply this approach to new code but also spot and fix older, existing code that's missing the correct rel attribute.

If you’ve learned web development recently, you have probably started with good habits. You probably already always use a rel="noopener noreferrer" attribute. However, you might not know why you should. So this article has hopefully helped you understand why this is important and gives you better ways to make informed decisions about using the target="_blank" attribute.

If you have to deal with developers and you’ve had someone shake their grey beard at you and mutter about accessibility, we hope this has helped make sense of why the target="_blank" attribute is often the wrong step to take.

The internet is full of bugs. Let’s not add to them.