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

Tabnabbing is a phishing attack that manipulates web pages. In this short article, I'll be explaining what tabnabbing is in more detail, and what you can do to mitigate it.
Table of Contents

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.

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.

Adding attributes to external links in Elementor.

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

Source code

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.

Gabriella Galea
Gabriella Galea
Gabriella is the Project Operations Manager at WP Mayor. Architect by profession, designer by nature, she is dedicated to helping readers navigate the online world of WordPress. You can find her on Twitter @GabriellaGalea.

Consider sharing this post so others can find it:

Join thousands of people receiving real-world, genuine evaluations of WordPress products and services just like this one every week.

Featured Deals

Bluehost is WP Mayor’s recommended WordPress shared hosting provider. Get up to $15 off every month on Bluehost’s shared hosting using the button below.

Get 4 months free on annual WP Engine hosting plans (or 20% off your first month on monthly plans) using our coupon code WPMAYOR20 at checkout.

Get an exclusive 15% discount on WooFunnels by clicking the link below. It’s the most powerful funnel builder for all types of WooCommerce stores.

2 Responses

  1. Hi Gabriella,

    Thanks a lot for this share! I have an Elementor website as well, but I was not aware of tabnabbing. Your article educated me, and I am so glad that you shared information and tips to protect against it as well. It will be very helpful for me, and I will share these prevention methods with my friends to help them secure their websites as well. It was a very helpful article, Thanks a lot for creating it.

Leave a Reply

Your email address will not be published.

Everything you need to create a website for less than $100. From your domain and hosting to picking a design, we cover it all.

WP Mayor’s Newsletter

Team photo

Hey, we’re Gaby, Prithu, and Mark. Every Friday we send you our best tutorials and latest reviews.

Enjoyed by thousands every week. Less than 0.2% of our followers unsubscribed last year.