What is Tabnabbing and How Can You Safeguard Your Elementor Site Against It?

I recently came across the term “tabnabbing”.

In short, tabnabbing is a phishing attack that manipulates web pages. It can be harmful to both your website (and its reputation) and your visitors alike.

Naturally, I wanted to learn more about how we, as website owners, can help safeguard our visitors. So I did a little digging …

In this short article, I’ll be explaining what tabnabbing is in more detail, and what you can do to mitigate it.

What is Tabnabbing Anyway?

Tabnabbing is a phishing attack that may occur when a site visitor clicks on a link that opens in a new tab or window. This action allows hackers the opportunity to place a redirect to a duplicate site that is totally in their control.

What’s the Point of Tabnabbing?

The objective here is pretty simple. The criminal hacker will link visitors to a duplicate site in the hope of getting access to login details and other sensitive information.

The JavaScript in the new tab can do anything that normal JavaScript can. It can manipulate the page, alter data, send requests, read cookies for that site, etc. It can also obtain details of and perform changes to the parent window. For example, it can redirect the original page to a fake one (which looks legitimate) and asks the visitors for their credentials.

For obvious reasons, this can be very dangerous.

What Can You Do to Prevent Tabnabbing?

As site visitors, preventing tabnabbing is difficult since it rarely results from a victim clicking a link that seems suspicious. However, as a website creator, there are a few things you can look out for.

Rel=”noopener”

First and foremost, always make sure that your external links are pointing towards reputable sources. Second, links to external sites that open in a new tab should generally always have a rel="noopener" attribute. This makes the new tab’s opener not be set, and so, the JavaScript won’t have access to the tab that opened it.

Rel=”noreferrer”

Similarly, adding rel="noreferrer" to a link instructs the browser not to tell the new tab’s website server what page the visitor has come from, by omitting the referrer.

A Note About Affiliate Links

We’ve reached out to a number of affiliate platforms to confirm whether or not the rel="noreferrer" attribute would affect tracking. Here’s what we were told:

[Affiliate links with this attribute will be] impacted when using the pro add-on Direct Link Tracking since it relies on the referring URL to be supplied to credit the credit affiliate. Otherwise cookies should still be able to be added to the visitor’s browser, which is how the affiliate_id is tracked across the site and used when a purchase/conversion is made.

AffiliateWP

Using this attribute should not impact the accuracy of our tracking.

ShareASale

If the Customer used a valid Partner tracking link, the action will still attribute even if the Referrer URL is Null. No referring domain means that it was “direct traffic”. Direct traffic is when someone simply types in a URL into their web browser. This most likely was caused by people copying the Partner tracking link and pasting it into their web browser, which is likely the case if they are taking the link from a Facebook post. You will not always find a referring domain under that section as it is dependent on the method a customer used to generate the action.

Impact

To summarise, in general, the noreferrer attribute should not affect your affiliate links. However, there may be circumstances where it does, so make sure to check with your affiliate partner when setting attributes.

WordPress

The Gutenberg editor (or Block Editor) automatically sets the rel="noopener noreferrer" to all links that are set to open in a new browser tab. WordPress introduced this feature specifically to address the security vulnerabilities described above.

Below is an example of what an external link would look like in HTML:

<p><strong><a href="https://www.wpmayor.com/" target="_blank" rel="noreferrer noopener">WP Mayor</a></strong></p>

Elementor

Unfortunately, Elementor does not set these attributes automatically. If you’re creating or running your website with this popular page builder, it’s pretty easy to overlook. However, there is a workaround.

When creating a link to an external source in Elementor, click the gear icon to the right of the Link field. This opens up the Custom Attributes section in the Elementor widget.

Here, add rel|noopener noreferrer and save your work.

On the front end, the source code reveals that the rel="noopener noreferrer" attributes have been assigned.

We’ve reached out to Elementor to get insights into their thoughts on tabnabbing. Here is what Shilo Eish Yemini, Editor Product Lead @ Elementor had to say:

The reason Elementor hasn’t added this behavior by default up until now is to avoid harming existing websites without their consent, and potentially damaging the tracking of these sites.

From Web.dev:
As of Chromium version 88, anchors with target=”_blank” automatically get noopener behavior by default. 

As mentioned in [this] interesting article, we allow users to add these `rel` attributes manually. That being said, we will add the `noopener` attribute to all external links soon, in order to make sure no legacy browser visitors will be affected. We won’t add the “noreferrer” automatically to prevent tracking issues in existing sites, and due to the reason that they both serve similar purposes.

Summary

If you’re using Elementor, I encourage you to revise your headers, footers, sidebars, ads, and modals to make sure that links to third party pages have the noopener and noreferrer values in the rel attribute.

This will not only safeguard you and your website but also your visitors.