Don’t Use The Target=”_Blank” Link Attribute In These Cases

Using the _blank link attribute will cause the link to open in a new browser window or tab.

But it is not as straightforward as it seems.

It turns out that not only is the _blank link attribute a security risk, but there are also multiple situations when using something other than _blank is recommended.

In this article, you’ll learn when using the _blank attribute is not a good idea.

What Is The _Blank Link Attribute?

The _blank link attribute tells the browser to open a link within a brand new tab.

You can have multiple links that use the _blank link attribute, and every different link with that _blank attribute, when clicked, will spawn a brand new browser tab.

What’s more, if a user clicks the same link over and over, the browser will keep spawning more and more tabs.

Is The _Blank Attribute Unethical?

There are some who are of the opinion that it’s best to give the user the choice to open a new browser tab.

Some people assert that it’s unethical to “trap” a user on your site by opening links on a new browser window and keeping your own web page open, as well.

The problem with that point of view is that quite likely most people don’t know that they have a choice to open a new browser window.

Every site audience is technically adept at different levels.

But it’s probably safe to say that many people still don’t know that they can right-click (or long-click on a mobile device) and choose to open a new browser tab.

So, giving users a “choice” really isn’t a choice.

They’re just going wherever you send them.

One person’s “ethical” choice to open a link in the same web browser can confuse the site visitor if they try to get back to the original web page by closing the browser tab they are currently in.

The question of ethics has largely been set aside nowadays.

The choice of whether to use the _blank link attribute or not is a personal and a business choice.

There’s A Security Reason For Not Using _Blank

The target=”_blank” link attribute is risky and opens a website to security and performance issues.

Google’s Web.dev page on the risks of using the _blank link attribute is summarized as such:

“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.

The other page can access your window object with the window.opener property. This may allow the other page to redirect your page to a malicious URL.”

The solution?

Use the rel=”noopener” or rel=”noreferrer” link attributes for every link.

• The rel=”noopener” link attribute prevents the linked site from receiving access to the original web page that is linking out. This prevents the linked site from taking control or otherwise influencing the linking site.
• The rel=”noreferrer” link attribute hides the referrer information from the site that is being linked to. When a site visitor clicks a rel=”noreferrer” link, the site being linked to won’t know what site referred the visitor.

The rel=”noreferrer” link attribute also functions the same as the “noopener” link attribute in that it prevents the linked site from taking control of the linking site.

So, if you want to send websites referrer information while protecting yourself from the _blank link attribute security issues, use the “noopener” link attribute.

If you’d rather stay private and not pass along referrer information while also protecting yourself from security issues associated with using the _blank link attribute, then use the rel=”noreferrer” link attribute.

Data Security Considerations For Sensitive Pages

There are specific situations related to security where a publisher may not want a user spawning multiple web pages. One such case is a website that deals with sensitive customer information.

If a health or finance-related website uses _blank for links to private information, it may cause the site visitor to spawn multiple web pages with sensitive information.

They may unknowingly leave these windows open unintentionally.

For example, they may close the main window and another window and be unaware there might be a third window with highly confidential information still open in a background tab of the browser.

In that case a site publisher may choose to use a different link attribute like “blank” (with the underscore _).

The “blank” link attribute will open a link on a brand new browser tab.

However, unlike the _blank link attribute, all the other links on the original web page will also open the linked page on the same tab as the first clicked link.

So, if you have five links on a page that use the “blank” link attribute, and a user clicks the first link, any of the other four links when clicked will open the web pages on the same browser tab as the first clicked link.

Alternate To _Blank Attribute

You don’t have to use _blank, by the way. You can use a different word.

The difference between using _blank and any other word is that using another word will restrict every link on that page to opening within the same new browser tab.

For example, if you code a link like this:

<a href="https://www.example.com/" target="_SEJ" rel="noreferrer">

The above link will open in a brand new browser tab.

Now, if you have two links with the same link attribute:

<a href="https://www.example.com/" target="_SEJ" rel="noreferrer">

<a href="https://www.example.net/" target="_SEJ" rel="noreferrer">

If a site visitor clicks on the first link, it will spawn a new browser tab.

If the site visitor clicks the second link, it will open the link in the same browser tab as the first link that was clicked, essentially reusing that same browser tab.

You May Not Want To Use _Blank For Inline Frames

There may be times when a publisher may need to use something other than the _blank attribute.

One such case is for inline frames.

An inline frame is an HTML element that can contain another web document within it.

For example, some advertisements are contained within an iframe so that they end up being a web page within a web page.

An inline frame is coded with the iframe element (also called an iframe tag).

Because an iframe is essentially a web page that’s embedded within another web page, the HTML specifications have link attributes that are specific to the iframes that will cause links embedded within an iframe to behave a certain way.

It’s still possible to use the _blank within an iframe to spawn a web page in a new browser tab. But, it’s not recommended if you want a specific behavior for an iframe.

There are three iframe-specific link attributes to choose from:

1. _parent: It will open a link outside of an iframe (as well as within the same web page).
2. _self: It will open the link within the same iframe (or the same web page) but only if the link is on the same domain. It won’t work if the link is to another domain.
3. _top: It will open outside of an iframe (as well as within the same web page).

_Blank Link Attributes

When it comes to the _blank link attribute, it’s probably okay to generalize and simply use it as long as you have a noreferrer or noopener link attribute attached to it.

With that said, it’s good to know there are alternatives.

Ultimately, the use of the _blank link attribute is as easy and as complicated as you want to make it, and it depends on your specific needs.

More resources:

Featured Image: Viktoria Kurpas/Shutterstock