Tutorials Htaccess How to prevent image hot linking using htaccess?

How to prevent image hot linking using htaccess?

May 16,2012 Read: 1461 Times

Hello friend, welcome to my today's post on htaccess. In my last tutorial, we learned about "Difference between http code 200 and 304". Hope you enjoyed that tutorial. Today we are going to learn about "How to prevent image hot linking using htaccess?". So, Let's start -

Image hot linking is one of the most common problems for web masters. Most of web masters are facing this issue frequently. We need to purchase bandwidth from host providing company with a very high cost. That's why webmaster thinks about how to save bandwidth to run their application/website smoothly. But image/file hotlinking create a problem by stealing our valuable bandwidth.

We can easily stopped Image hot linking by other site using simple few lines of .htaccess code. We can set this htaccess code in your root directory or image containing folders.

First of all we need to learn what is hot linking?

- What is Hot linking?

Hot linking refers to add a direct link of website content to your own website. Website content may be images or videos. For example - We are using IMG tag for preview an image. You know in src attribute we need to add an absolute or a relative location/path of image. If you set src link of another website (like example.com/image.png) hosted image, then it's called hot linking.

In that case, when image loaded in your site then your website consumed bandwidth of example.com website. If you have high traffic website then you've consume much more bandwidth of example.com website server. Which may be harmful for example.com? This is also called Bandwidth theft.

- Why we need to prevent Image Hot linking:

1. Want to block websites for share resource like image or file.

2. Want to allow websites for share resource like image or file.

3. Allow/deny blank referrers.

4. Display custom images detecting image hotlinking.

5. Files to protect.

- What's the solution for preventing image Hot linking:

I've write an htaccess code that help you to prevent hotlinking. In this script you need to specify only those website URL that you want to allow for sharing web resource. Also in last line of code you can select file format like for image it may be png/jpg/jpeg/gif or for video it may be flv/mpg etc.

If you want to show an image instead of your original image then you can also set an image location in htaccess file. It's so simple but very much efficient. Have a look source code -

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$

#Give permission to show image in your domain and subdomains.

RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?your-domain\.net [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?your-domain\.subdomain\.net [NC]

#Give permission to show image in localhost.
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?localhost [NC]

#set an image instead of showing original image.
RewriteRule \.(jpg|jpeg|png|gif)$ http://your-domain/stop_hotlink.jpg [NC,R,L]

Download Source code

Was this information useful? What other tips would you like to read about in the future? Share your comments, feedback and experiences with us by commenting below!