If you click on a normal HTML link, it will open in the current tab or window of the browser by default.
A link will open in the current or a new tab is controlled by HTML’s target
attribute. By default, the target
attribute is set to _self
which opens the link in the current tab of the browser.
To open a link in the new tab you have to set the target
attribute to _blank
. When you add the target="_blank"
attribute to an anchor tag(<a>
), it tells the browser that this link should be opened up in a new tab.
Here is an example that would open up the Wikipedia home page in a new tab on clicking:
Example:
<a href="https://wikipedia.org" target="_blank">Wikipedia homepage</a>
Security issues with target=”_blank”
When you are using target="_blank"
on an anchor tag, you should also add rel="noopener noreferrer"
attribute to it. If you aren’t adding this, you are making the original webpage vulnerable to phishing attacks.
The moment you open up a webpage in a new tab by clicking the link that does not have the rel="noopener noreferrer"
attribute, the newly opened site still has ongoing access to the site opened in the original tab and attackers can take advantage of it.
So long story short, you should always add rel="noopener noreferrer"
whenever you are using the target="_blank"
attribute to prevent your site from any malicious activity.
So, here is the modified version of the above example:
Example:
<a href="https://wikipedia.org" target="_blank" rel="noopener noreferrer">Wikipedia homepage</a>