If you created a static HTML web page and inserted links, they will open in the same window after you click any of them. This is the default behavior of any web browser.
But if you want to open a link in a new tab, you have to specify
_blank in the
In this post, I will show you how to do it and also discuss some other security concerns & their fixes.
Let’s get started.
As I mentioned earlier, you need to specify
_blank inside the
target attribute. See the syntax below.
<a href="#" target="_blank">This is a link</a>
This will open the link in a new window/tab without leaving the current page.
Just like the
target is another HTML attribute that specifies how the link will open.
Target attribute values
It has 5 different values as mentioned below.
_self is the default value. If you don’t specify the
target attribute to a link, it means that the link has a target attribute of
Security concerns of the (target) _blank attribute
You don’t need to worry if you’re dealing with internal links. But the
target="_blank" can be dangerous for certain external links.
Because the external link gets some sort of access to your web page using DOM.
For example, you linked to my website from your HTML webpage and you used the
target="_blank" attribute. In this case, I will get access to the webpage. Though this access is limited, it’s enough to manipulate user requests. Even I could receive the visitors’ data instead of showing the actual page you linked to mine.
This is just an example of vulnerabilities. So you need to protect your visitors from possible phishing activities. See the next section to learn how to fix it.
How to fix (_blank) vulnerabilities?
To fix the security issues, you need to specify another attribute which is
rel (relation) with a value of
noopener. It refers to the relationships between your website and the external website (that you linked to).
See the syntax below.
<a href="#" target="_blank" rel="noopener">This is a link</a>
rel="noopener" attribute prevents the browser to grant any access from the external website (that you linked to).
Firefox 63 & newer versions also support this relation attribute. See the more detailed compatibility chart in the screenshot below.
Going another level deeper
From the above compatibility chart, you see that old browsers don’t support
noopener. What if some of your visitors use old browsers? There is also a fix for it.
Old browsers support
noreferrer. So if you also specify it in the
rel attribute, your link will be cent percent safe.
See the revised (final) link below.
<a href="#" target="_blank" rel="noopener noreferrer">This is a link</a>
- How to add a link in HTML?
- How to open a link in a new tab in HTML?
- How to create an HTML download link?
- What is the difference between a link & button?
- How to create an HTML button that works like a link?
- How to make a div clickable link?
- How to create HTML anchor links that jump to another section?
- How to create an HTML mailto link (including email subject)?
- How to center a link in HTML & CSS?
- How to deactivate links using CSS?
- How to remove the underline from a link?
Now you know how to create an anchor tag or link that will open in a new tab. Not only that but also you learned how to fix the security vulnerabilities for the
No one wants their visitors to go to other websites leaving their own websites. And this is where the
_blank attribute comes into play. But it has some security concerns as it grants access from third-party websites.
However, it also has a very small fix.
To prevent granting access from the external website, specify
rel="noopener noreferrer" in the link tag.
But you don’t need to specify the
rel for internal links.