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

Written by Gaby Abela
Written by Gaby Abela

Last updated on 13 Sep 2022

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.

WP Mayor is supported by its audience. If you purchase through a link on our site, we may earn a commission. Here’s why you can trust us.

Table Of Contents

Table of Contents

Before We Get Started

Do you already have your website set up with a reliable host?

If not, or if you’re looking for a better option (free migration included) we’ve worked with our close friends at WP Engine to get our hands on an incredible hosting offer that’s ideal for WordPress sites.

It includes performance optimizations for your site, security features, automated updates, 1-click backups, and a bunch of free tools.

Get it here and save over $100 in your first year!

Introduction

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.

<span style="font-weight: 400">Written by: </span>Gaby Abela
Written by: Gaby Abela

Gaby 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 @GabyAbela.

WP Engine

Quick Links

Did you find this article helpful?

Share Your Discovery

Thank you to our partners for their support

The WP Minute – This week’s News in 5 Minutes

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. Required fields are marked *

 Discover more tips and tools. 
Join 5000+ designers, developers, and website builders that come to WP Mayor to find the best guides, tools, and services for their next website. One email every week.
WP Mayor Newsletter

2023 Reader Survey

What would make this article better for you?

What's missing?