How to fix "target_blank" attribute for Security issue: “tabnabbing”?

[Administrator]

Almost every website has links that open in a new tab while keeping the original website accessible. For instance, news organizations will post about current events on Facebook; the post includes a link to the full article on the news organization's website as well as a brief synopsis of the article.

HTML links open in your current tab by default, which is typically beneficial. After all, you want visitors to stay on your website and avoid being diverted by too many open tabs or other websites. Because people's attention spans are finite, you want them to concentrate on your material. Additionally, links that open in a new tab are detrimental to accessibility if they don't offer ARIA attributes and hints.

There are still situations where linking to external pages is desirable or necessary. The example of the news agency stated above is a good one: news organizations want people to read news stories on their websites rather than on other websites like Facebook since they rely on visitor ad revenue. Facebook allows users to include links in their Posts for this reason. Links that belong to a third party rather than you are typically opened in a new tab.

How a User easily falls for the trap

So, how does one make an HTML link open in a new tab? There is no need to write any JavaScript code; in fact, this is probably too simple. Your anchor simply has to have the target=" blank" property added, and we're done.

Code Select Expand

<a href="https://filmsleague.com" target="_blank"> Visit Filmsleague </a>Now, whenever a user clicks on this link, a new tab will open with the website (in this case, we took Filmsleague as an example).

Assume for the purposes of this example that the website I'm linked to is secure (I can say this because I built it). But perhaps a third party is the owner of the external website (e.g. a service provider or a customer). Perhaps you let user-generated material on your website, such as comments where users can include links to other use external links to other websites. In these situations, you have no control over the linked web pages and have no idea what the individuals operating them are doing.

If you're unlucky, you might have accidentally set up a security and performance problem by stumbling directly into a trap.

What is Security issue: "tabnabbing"

When you click on a link that has target=" blank" to open a web page in a new tab, this page now has restricted access to the connecting page by default. The ability to alter window.opener.location of the connecting page is the most important security feature I can think of. For instance, a dubious news website may utilise Facebook to disseminate some stories. The Facebook user sees the Post and clicks to open the dubious news website in a new tab and read the whole article there. The dubious news site can utilise this embedded script on their page in the meantime.

window.opener.location = "http://fake.facebook.com"

The user is now on this phoney web page that imitates Facebook rather than Facebook itself. This false page prompts you to log in because you were signed out for some reason and appears precisely like Facebook. Without giving it any thought, the user enters his information and submits the form.

You just gave someone access to your confidential login information, allowing them to swiftly change your password or get into your Facebook account.

Reverse tabnabbing is the name for this particular phishing technique. Here is a reminder of what Phishing is according to Wikipedia.


How it Impacts Browsing Performance?

Interestingly, target=" blank" also affects how quickly you can navigate the web, as I can personally attest. Like Chrome and Firefox, every significant modern browser is multi-process. because the DOM provides us with synchronous cross-window access via window. windows opened through target=" blank" end up in the same process & thread, to start. The same holds true for windows opened using iFrames and windows. open.

I created a personal "start page" as a side project that resembles Opera's Speed Dial in appearance and functionality. The website is opened in a new tab when one of the tiles is clicked (each link has target=" blank"). I saw that for some reason, browsing the web took longer, and I surmised that my own page must be the source of this as it didn't happen when I didn't use it. When I modified my code after learning about the problem with target=" blank," the performance slowdown vanished.



Which well-known websites are at risk?

Although the problem is well recognised, it has recently gained increasing attention in recent years. These websites demonstrate how effective this tactic is at tabnabbing (as of the time of writing this article). I hope the millions of people who utilise these websites can rapidly resolve this problem:

Ebay.com (but the security impact should be mitigated as most external URLs run in an iFrame) (though the security impact should be reduced since most external links run in an iFrame)
Heroku.com
Nintendo 64
Several websites that successfully stop this tabnabbing technique include:

GitHub.com
Slack.com
Twitter.com
Facebook.com (when I alerted them, they repaired it. That is the intention!)
dev.to (they solved it shortly after I told them) (they fixed it quickly when I notified them)


Supported Browsers

Please refer to the link below for better knowledge about which version and what type of browsers are supported for this solution before proceeding to the Methods mentioned below

1. For Noreferrer
2. For Noopener


How to Fix the Issue with an super easy solution?

Method 1

There are two ways to deal with these issues. The first fix is to provide every link with a target of "_blank" the rel="noopener noreferrer" attribute. To ensure that linked pages cannot access the linking page, the value noopener is required. When there are few instances where you can manually fix this and you have access to the HTML code, use this strategy. Some content management systems, like WordPress ( 4.7.4), handle this automatically so you don't have to. The previously insecure example would now appear as follows:
1.For Noopener attribute

Code Select Expand

<a href="https://filmsleague.com" target="_blank" rel="noopener"> Visit Filmsleague </a>
2.For Noreferrer attribute

Code Select Expand

<a href="https://filmsleague.com" target="_blank" rel="noreferrer"> Visit Filmsleague </a>

3.For both Noopener & Noreferrer attribute (Recommended)

Code Select Expand

<a href="https://filmsleague.com" target="_blank" rel="noopener noreferrer"> Visit Filmsleague </a>
Method 2

To solve this problem, JavaScript is used. Use this if you're in charge of a CMS or if there are too many instances to manually fix all the broken links.

Code Select Expand

otherWindow.opener = null; otherWindow = window.open();

Please be sure to clean links if you allow user-generated content (for example, on a social network). Every link in a tweet on Twitter has rel="noopener" added automatically.


Conclusion

It's interesting to note that Google does not view this as a serious security concern.

Applying the first method (adding rel="noopener" to each target=" blank" link), in my opinion, has no significant drawbacks. This problem demonstrates how simple it is to build security flaws in your website. Target=" blank" links may also have a non-negligible influence on performance for web applications with high performance requirements. If you work as a web developer, I suggest checking your code to solve this problem.

I appreciate your reading what I have to say about this even if you have any issues while installing these attributes. please share your ideas with me in the comment section below.