Understanding `target="_blank"`

#webdev #frontend #learning #html

Since I read about target="_blank" for hypertext links, I’ve come to understand its role in building for accessibility and user convenience. Its primary purpose is to open links in new tabs, which can be beneficial for retaining user engagement on the original page. However, I've learned that it's not appropriate for every situation and comes with significant security considerations. Let's dive deeper into when to use target="_blank", and the downsides of it.

The Purpose of `target="_blank"`

The target="_blank" attribute in an HTML anchor (<a>) tag directs the browser to open the linked document in a new tab. This can enhance the user experience by allowing them to continue browsing the original page without interruption. Here’s a basic example:

<a href="https://www.learnmore.com" target="_blank">Learn more</a>

Appropriate Use Cases for `target="_blank"`

Initially, I was using target="_blank" on every, and I mean every, (<a>) element in any project I was working on. Turns out, this is not how it should be used, as some pages do not require opening in another tab. Here’s when it makes sense to use target="_blank":

External Links: Links to external websites are prime candidates for target="_blank" since they take users away from your site. Opening these links in new tabs allows users to easily return to your site without losing their place.
Supplementary Information: If a link provides additional information that complements the current content, opening it in a new tab can be helpful. For example, a link to a glossary term or a related article that enhances the understanding of the current page’s content.
Forms and Documents: Links to forms, documents, or other downloadable content often benefit from opening in a new tab. Users can download or fill out forms without navigating away from the page they are currently viewing.

However, not all links need to open in a new tab. Here are some examples of when target="_blank" should not be used:

Internal Links: Links that navigate within the same site generally should not use target="_blank". These links should help users move through the site seamlessly without fragmenting their browsing experience.
Navigation Links: Menu items or navigation links should typically open in the same tab to maintain a cohesive user experience.

The Downsides of Using `target="_blank"`

While target="_blank" can be beneficial, it also introduces potential security vulnerabilities:

Security Risks: One of the main risks is tabnabbing. This occurs when a new tab opened with target="_blank" can manipulate the original page, potentially redirecting it to a malicious site. This can be exploited for phishing attacks.
User Control: Overriding user preferences can be intrusive. Users often prefer to decide how links open, using their browser settings or shortcuts.

Addressing Security with `noopener` and `noreferrer`

To mitigate the security risks associated with target="_blank", it is crucial to use the rel="noopener noreferrer" attribute:

noopener: This prevents the new page from being able to access the window.opener property, which stops potential manipulation of the original page. This is the key defense against tabnabbing.
noreferrer: This attribute ensures that the new page does not receive any information about the referring page. While this can be less critical, it adds another layer of privacy and security.

Here’s how you should structure your links to enhance security:

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Visit Example</a>

By combining noopener and noreferrer, you safeguard your site and your users against potential threats while still providing the benefits of target="_blank".

Check my previous article where I talked about the other target attribute values here.

Till we meet again, your neighborhood web developer🫡

Top comments (10)

Ying Zhang • Jul 26

To others who had a mini panic attack after reading this post, browsers actually assume rel=“noopener” by default now chromestatus.com/feature/614006406...