In my previous post, I’ve shown you how to prevent image hotlinking in WordPress. In this one, I’ll show you how to prevent another annoying problem: clickjacking.

But first, let’s find out a bit more about it.

What is clickjacking and how does it work

In general, clickjacking is a malicious technique that tricks the users into clicking on something different than they expect.

Clickjacking comes in many forms, but there’s an allegedly legal practice that’s very common on social media websites.

Someone shares a link to an article, you click on it, and you end up seeing something like this:

Click to enlarge

Now, if you don’t pay attention, nothing will seem wrong. You’ll think that you ended up on a legit post that was shared.

But, if you take a closer look, you’ll spot some things that don’t seem right.

Click to enlarge

The first thing you should notice is an additional link in front of the legit one. In my example, it’s snip.ly/5hxmjl/#.

So, that’s the link that I’m really on, not on https://wpnewsify.com/blog/wordpress-privacy-policy-generator-plugin/, as I normally should.

What does this mean?

It means that the content basically got taken, put in a frame, shared, and on top of it a call-to-action box was added, which advertises another website, as you can see at the bottom of the above screenshot.

Some can add ads, or affiliate links, or who knows what. And those can be added in different shapes and sizes.

Basically, they use someone else’s content to advertise whatever they wish. Therefore, both the users and website owners get tricked.

The users might not figure out that they’re not on the original web page and the advertisements are not added by the owner. And the owners don’t know that someone uses their content to add different stuff on them.

Who provides such apps?

The most known and used app is Sniply, but there are many others.

You might see a lot of URLs shared on social media that contain snip.ly. I never click on them.

Some might cloak that URL, so always look in the URL bar of your browser after you click on a link. Make sure nothing’s shady there.

Are these apps legal?

Well, since there’s no clear law to stop them, it may look that way. But from a logical and ethical point of view, hell no!

I mean, it allows others to simply take your content and put their crap on it, which users might click on and then blame you for basically recommending them that crap since they think it was on your actual website.

If they add ads or affiliate links, they also make money by using your content. They don’t have to do any heavy work.

The new GDPR law requires webmasters to implement a ton of things, such as letting users know that we will collect their emails if they use our contact form, so we can get back to them. They even have to check a box to give their consent.

That’s pretty obvious, right? Anyone knows that if you add your email in a form to send a message, that email will be collected. How else are you supposed to receive a response?

So, if they made a law for something that obvious, why is there no requirement to at least let users know that they’ve clicked on a web page that’s not actually the real web page, but a clickjacked one that has an advertisement placed on it that leads to another website. All of this without the website owner knowing.

It’s also pretty weird that they (Sniply) have some big names endorsing them in their testimonials, like Forbes (not a surprise there, though), Buffer, Moz, and others.

Snip.ly testimonials

You can find more info on the legal and ethical matter, as well as some answers from the Sniply representatives, here and here.

Now, let’s see how to prevent such apps from clickjacking your WordPress content.

How to prevent clickjacking in WordPress

UPDATE: Apparently, due to static page caching, this method isn’t reliable. The code seems to work at first, but after a bit of time, you’re vulnerable again. So, check the .htaccess method below.

Since the whole clickjacking technique works by loading your website in a frame, we’ll use x-frame-options, which is a header that will prevent that from happening.

Don’t worry, it’s quite easy!

If you happen to use Social Warfare as your social sharing plugin, then you’ll have a frame buster feature already implemented into the plugin, so just enable that.

For those of you that don’t have that plugin, here’s what you need to do:

Step 1 – Access your WordPress website’s files.

Step 2 – Find your functions.php file and edit it.

I recommend having a child theme in place, otherwise, the changes will be gone with the next update.

If you’re going to access your files via FTP, you’ll normally find functions.php in public_html/wp-content/themes/YOURTHEMENAME-child/functions.php or public_html/YOURDOMAIN.COM/wp-content/themes/YOURTHEMENAME-child/functions.php for an add-on domain.

Editing functions.php via cPanel

Step 3 – Add the following code right at the very bottom or right before ?>, if there’s any.

function block_frames() {
header( 'X-FRAME-OPTIONS: SAMEORIGIN' );
}
add_action( 'send_headers', 'block_frames', 10 );

The code in the functions.php file

This code will now stop clickjacking in WordPress by preventing your website from loading in a frame.

You can do a quick clickjacking test by using this tool.

Just add your website and press the Submit button.

As you can see, when I added my website, nothing appeared in the display area, which means that the code worked!

Preventing clickjacking via .htaccess – a more reliable method

Backup your file or the whole website first!

Step 1 – Access your website’s files.

Step 2 – Edit your .htaccess file, which you should normally find directly in the public_html folder or public_html/YOURDOMAIN.com/ if you’re using an add-on domain.

Those that use the Yoast SEO plugin – and all of you should, because it’s a must-have WordPress plugin – you can also edit the file by going to SEO -> Tools -> File Editor.

Step 3 – Add the following code right above the #BEGIN WordPress line:

Header always append X-Frame-Options SAMEORIGIN

You’ll need to have mod_headers enabled on your server for this to work. Talk to your web host to enable it, if it’s not.

Perform the test again using this tool.

That’s a wrap

Hope you found the tutorial comprehensive and useful!

Don’t forget to share it below to help out others!

If you have any questions or thoughts, drop a comment or send a message via contact or Facebook page.

You can also hit the follow button on Twitter and subscribe to the YouTube channel.

If you want to start your own WordPress blog, or need a website for your business, ThemeSkills’ WordPress installation service is at your disposal! On-going WordPress support and maintenance is on the menu as well!

You can also purchase a ready-made WordPress website with hosting and support included!