How to create a link that opens a new web page window or tab
To create a new window or tab when a link is clicked, the target="_blank" attribute must be in the a href tag, as shown below.
<a href="https://www.computerhope.com/" target="_blank" rel="noreferrer">Computer Hope</a>
Keep in mind that, when opening a link in a new tab, you're changing the default behavior of how the browser operates. For some users, this change can be confusing and frustrating.
Below is an example of what the above code would create. If you click the link below, it opens the Computer Hope homepage in a new window or tab. Today, all new browsers open these types of links in new tabs.
Open Computer Hope in a new tab.
Tabnabbing security vulnerability
When opening a link is a new tab, the new tab gains partial access to the referring page through the window.opener object, which leaves the origin page vulnerable to tabnabbing.
Tabnabbing is a phishing technique that could change the origin page content or location, making it vulnerable to stealing user content. For example, if a link to a malicious page was opened in a new tab, it could switch the origin page's window.opener.location to a new location (e.g., fake login page). If the user attempted to log back into the site through the fake login page, they would have their login details shared with the attacker.
To prevent tabnabbing, add the rel="noopener no referrer" attribute to the links opening in a new tab. For example, below is the same code we used above with this attribute added to the tag.
<a href="https://www.computerhope.com/" rel="noopener noreferrer" target="_blank" class="external">
For more information about this vulnerability, see: How to fix target="_blank" links: a security and performance issue in web pages.