Yesterday, I was searching for a clickjacking prevention code or plugin, and I stumbled upon another annoying problem: image hotlinking.

Image hotlinking occurs when someone adds your images on other websites by using your URL directly, therefore using your own bandwidth to serve them. It’s like when you embed YouTube videos on your website.

So, every time that page gets traffic, it will consume your server’s resources, which could lead to increased web hosting costs!

That’s pretty annoying, isn’t it? :x

I’ll admit – I was pretty shocked because I haven’t heard about image hotlinking until yesterday.

I mean, I knew that content is being scraped and stolen all the time, and I’ve seen my images all over the place when checking my backlinks’ sources, but it never crossed my mind that they’re actually using my own WordPress image URLs to place them on their pages.

Now that I think about, it’s pretty obvious, because that’s what scraping content is all about.

So, I started doing some digging around and found some solutions to prevent image hotlinking in WordPress and other types of sites as well, and I’ll share them with you all.

How to see if your WordPress images are being hotlinked and who is doing it

In order to see who is hotlinking your images, go to Google Images and perform a search with the following syntax:

inurl:yourdomain.com -site:yourdomain.com

Of course, replace yourdomain.com with your actual domain.

Let’s see an example using my website, ThemeSkills.

As you can see, as I hovered over one of the images, a shady domain name appeared: jsobject.info.

Is that my domain? Nope! Then it means that the jsobject.info website scraped/stole my featured image from the YooTheme review, and it’s using my bandwidth to serve it.

I went to that website to check it out, and this is what I found:

Click to enlarge

There’s just an image with my post’s link under it – that’s it! I don’t know what’s the purpose of that, but… whatever floats their boat.

As you can see, when I used Mozilla’s Inspect Element tool (right-click on the image and select ‘Inspect’ or ‘Inspect Element’ – depends on the browser), it clearly shows that the image is added using my own URL, therefore using my resources.

Now, let’s see how to prevent this image hotlinking problem.

How to prevent WordPress image hotlinking

Below, I’ll show you 3 prevention methods: via Cloudflare, .htaccess, and cPanel.

1. Prevent WordPress image hotlinking via Cloudflare

I really liked Cloudflare before, and I like it even more now!

If you use Cloudflare, which I strongly recommend – it has a free version, so you only have to gain and nothing to lose – then do the following:

• Log in to your account;
• Select the Scrape Shield section;
• Turn on Hotlink Protection.

Other CDNs might have such an option, but I don’t really know, so you should check it out. I know that KeyCDN has it, though.

Since Cloudflare is a fully proxy service, a thing which I really like, you won’t have to also add a code in your .htaccess file, as you’ll see below.

2. Prevent WordPress image hotlinking via .htaccess

For those of you that don’t want to use a CDN, or use other types, like KeyCDN, you’ll have to perform the below step as well, which consists of adding a code in your .htaccess file.

For this, you’ll have to access your WordPress website’s files.

For those of you that use Yoast and don’t have a WordPress security feature that prevents this, you can access your .htaccess file by going to SEO -> Tools -> File Editor.

You can normally find the .htaccess file in your root folder, which is public_html or public_html/YOURDOMAIN.COM/ if you have an add-on domain.

Editing .htaccess in cPanel

Now, open the file for editing and add the below code right above the #BEGIN WordPress line:

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourdomain.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?bing.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yahoo.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?facebook.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?twitter.com [NC]
RewriteRule \.(jpg|jpeg|png|gif|svg)$ - [NC,F,L]

Replace yourdomain.com with your actual domain!

Except for your site, Google, Bing, Yahoo, Facebook, and Twitter, this code will prevent websites from accessing and hotlinking your WordPress images.

You can allow other websites to access your images by just copying one of those HTTP_REFERER lines and replacing the domain.

You can also use this tool to generate an anti-hotlinking code for .htaccess.

3. Prevent WordPress image hotlinking via cPanel

In cPanel, you should normally have a hotlink protection feature as well.

You can find it by logging in to cPanel, then accessing HotLink Protection.

For whatever reason, this doesn’t work for me right now in order to show you how to use it, but here’s a tutorial from SiteGround and one from cPanel.

That’s a wrap

Hope you found the guide useful and comprehensive!

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 website 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!