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:
<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:
<a href="https://wikipedia.org" target="_blank" rel="noopener noreferrer">Wikipedia homepage</a>