Hotlinking Protection protect images on website guide

What is Hotlinking ?

Lets understand Hotlining before protecting our sites.Is there really a need to protect images on website from hotlinking ? Lets understand this with an example.You have a cool image on your website. Someone visits your website and saw the image.After seeing that the person decided to show the image on his website.

He did not download the image.Instead of downloading the image he linked to your image URL from his website.So visitors of his website can see the same image there.Whenever a person visits his site a request is made to your website for the image.The image is downloaded from your website for each request.So in short the potential problems with hotlinking are

Bandwidth misuse – Other website is displaying the image but image is downloaded from your website.So your bandwidth is used and your server becomes too busy.

Traffic loss – You can loss potential traffic to your site.The images if shown in full on other website people may not visit your website.This will decrease your website traffic.

Hotlinking Solutions

Protecting images on your website from hotlinking should be the first concern of yours.Since images are most abused media types by hotlinking.There are various ways to solve this issue.You can use either one of them to protect your images from hotlinking.The solutions are for different platforms like Apache web server and Nginx web server.

Solution 1

The first solution is for websites using Apache web server along with cPanel.If you are on shared hosting then chances are that you are powered by Apache web server and cPanel.cPanel is the most used Control Panel.So you can use this solution only if you have cPanel.Using cPanel interface you can protect your website from hotlinking.I have covered this topic in a separate tutorial so not discussing this method here.You can read the solution here.

READ  Adding Webm video format on your site tutorial

Solution 2

This solution is for Apache web server.This solution can be used even if you do not have cPanel control panel.Also it works great for shared hosting as well as VPS hosting.You might have noticed that there is special file .htaccess in your web root directory.You need to open this file in any text editor or create a file with .htaccess.After creating the file or opening the file you need to paste below code after last line in the file

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www.)*$ [NC]
RewriteRule .(gif|jpg)$ [R,L]

In above code replace your-domain-name with your actual domain name like mine is udinra.Also it is good to create a image hotlinking.jpg.You can write something like this image exists at your-domain-name and this site is hotlinking.So if some website tries for hotlinking then the image hotlinking.jpg is shown.

The picture serves two purpose.First Visitors gets an idea about location of original image.Second they know that this website is hotlinking to your image.So the site hotlinking your images losses some credibility.

Solution 3

Above two solutions works only for Apache web server.Agreed Apache is most popular and above two solutions serves need of most website owners.But there are people like me who instead of using Apache use Nginx.This solution works for Nginx web server.Most of the Nginx users are on VPS platform.The solution assumes that you have root access to your VPS server and are aware of simple UNIX commands.

After connecting to your VPS server run below commands

First command is used to change your working directory and second command is used to edit file.I am editing default file above assuming that you have that file only.But in real world you will have separate files for different domains hosted on this VPS.So you need to edit file corresponding to the domain name for which you want hotlinking protection. Add below command in the file

location /your-image-directory/ {

In above code replace your-image-directory with fully qualified name to your image directory from web root.In case you are using WordPress then assuming that your images directory is wp-content/uploads/ the above command becomes

location /wp-content/uploads/ {

Solution 4

We have covered two most popular Web Servers above.All the above solutions makes changes to your web server configuration.Now this solution will not make changes to your configuration.Instead of that in this solution we will use using CloudFlare.

READ  Load Social media buttons without slow load time in easy step

CloudFlare is free Content Delivery Network.It offers benefit of other content delivery network.I have written separate detailed tutorial on powering your website with CloudFlare content delivery network.You can read the tutorial here.

CloudFlare offers free app ScrapeShield.It provides protection against content theft.The options available in this app are Page Content protection,Block Pinterest,E-mail obfuscation,Hotlinking Protection and Maze.Enabling hotlinking protection using ScrapeShield is very easy.You can enable or disable the features offered by ScrapeShield with just one click.You can read more about ScrapeShield here.

One point is worth mentioning here.In case you are using hotlinking protection using ScrapeShield then you should not use any of the solutions mentioned in this post.You should disable hotlinking protection from other methods if you are using ScrapeShield.

If hotlink protection is enabled using ScrapeShield and any other solution then some of your images won’t get displayed.You will be able to see the alt text assigned to the image but actual image will be missing.I have faced this issue with this website.I had enabled hotlink protection from .htaccess file and also from CloudFlare ScrapeShield app.Due to that images were missing from some of the posts.So if you are facing same issue then this is the first thing to look for.It can also cause your feed images to be broken.

ScrapeShield offers a unique feature not available in first two solutions.You can make some images available for hotlinking while protecting your rest of the images.You can create a separate folder hotlink-ok.In this folder you can add all images you do not want to protect.This thing is also available in third solution.In third solution there is no need to make hotlink-ok folder.You can create folder with any name.You just do not add the folder in code provided in third solution.

READ  Are you proofreading your WordPress posts before publishing?


I would recommend using the last method as it provides you extra features not available in rest of the solutions.The first solution is easiest to implement.The fourth one is time consuming as it involves setting up CloudFlare for your website.But that is one time setup.

In case you are using any other solution do share the same.Consider sharing the post in case you found this useful.

8 comments Hotlinking Protection protect images on website guide

  1. hi and thanks for the actual blog post ive recently been searching regarding this specific advice online for sum hours these days as a result thanks dgegdefadekdgeaa

Leave a Reply

Your email address will not be published. Required fields are marked *