Stop Image Hotlinking with .htaccess

Firstly, what exactly is image hotlinking? Well, say you are browsing the web and come across an image that you particularly like the look of. You then decide that you would quite like this image on your site. Instead of saving the image and uploading it to your own server, you place a link to their image on their site. For example,

<img src=&quot;/wp-content/uploads/2009/03/strawberry.jpg&quot; />

If you decided to place The Web Squeeze’s Strawberry on your site, not only would it be a blatant image theft, but you would also be stealing their bandwidth as when their browser requests the image file, it is not from your server, it is from The Web Squeeze’s.

This is why image hotlinking is becoming a major issue for website owners today. People finding images on Google simply place a link to that image on their website, costing you bandwidth, and in the long run, money!

So what can we do to stop this? Well if you came across a site using your image, then you could rename your image, causing them to have a broken link or an alternate image displayed on their site for example. However, there are several obvious drawbacks to this method, you would have to trawl through your server logs looking for hotlinking sites, then you would have to go to the effort of renaming your image, updating all your webpages, uploading a new image … not a good use of your time.

Luckily there is an extremely efficient and easy way to prevent against hotlinking, using the Apache configuration file, .htaccess. Using your .htaccess file allows you to control things such as:

• What sites to block/allow
• Whether to allow/deny blank referrers
• Display custom images to hotlinking sites
• What file extensions to protect against hotlinking

Step by Step Guide

Adding in comments

#Stop Image Hotlinking

Any good programmer will tell you that comments are essential, regardless of the language you are writing in. When you begin to have a few different rules in your .htaccess file, comments help avoid confusion by allowing you to clearly see what each bit of code does.

Turn on the Rewrite Engine

RewriteEngine on

The code in this tutorial uses the Apache module mod_rewrite, we therefore need to tell the server to interpret this as such. It is similar to writing PHP, if you do not include the PHP tags the server will not know what to do with your code, the same principal applies here. This only needs to be declared once in your .htaccess file.

Allowing your domain(s)

RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?yourdomain.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?yourdomain2.com [NC]

You now need to state which sites are allowed to access your files, and obviously your site will be first on the list. There is no limit to the amount of sites that you can allow access to your files, for each additional domain simply add another line of code to the .htaccess file and amend as necessary.

Allow blank referrers?

RewriteCond %{HTTP_REFERER} !^$

Some users browse the web using things such as firewall or proxys, and therefore do not supply any referrer information. It is up to you whether to decide to block blank referrers. If you wish to then just delete this line from your .htaccess file.

Allow search engines?

RewriteCond %{HTTP_REFERER} !google. [NC]
RewriteCond %{HTTP_REFERER} !search?q=cache [NC]
RewriteCond %{HTTP_REFERER} !msn. [NC]
RewriteCond %{HTTP_REFERER} !yahoo. [NC]

Search engines such as Google can link to your images in their search results, often providing a useful sources of traffic. If you are a Photographer for example, then it might be a good idea to allow this as people can follow the image to see more of your work. However the choice is entirely your own, if you do not wish to allow this then simply delete these lines of code form your .htaccess file.

Allow an image to be hotlinked

RewriteCond %{REQUEST_URI} !^hotlinker.gif$

If you are planning on getting revenge on people hotlinking your images, then you will need to allow this image to be linked to. The above line of code makes sure that the image that you choose to display them actually gets displayed.

Display a custom image

RewriteRule .(jpe?g|png|gif)$ hotlinker.gif [NC,R,L]

The final piece of code. This tells the server that if a request is made for a .jpg, .jpeg, .png or .gif file that is not from one of the named exceptions, then they get displayed the hotlinker.gif image. If you wish to add more file extensions then you can just adapt the code for your use.

Let’s see an example of how this technique can be used. If someone decides to link to The Web Squeeze’s strawberry logo,

then in the .htaccess file you could have the alternate squashed strawberry show. Alternately, one of the advertising banners such as this could be shown, providing your site with some free exposure.

If you are feeling particularly lazy then all the .htaccess code for stopping image hotlinking is provided below.

#Stop Image Hotlinking
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?yourdomain.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?yourdomain2.com [NC]
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !google. [NC]
RewriteCond %{HTTP_REFERER} !search?q=cache [NC]
RewriteCond %{HTTP_REFERER} !msn. [NC]
RewriteCond %{HTTP_REFERER} !yahoo. [NC]
RewriteCond %{REQUEST_URI} !^hotlinker.gif$
RewriteRule .(jpe?g|png|gif)$ hotlinker.gif [NC,R,L]

Some Important Things

Before uploading your .htaccess file to your server make sure that there is not one there already! Applications such as WordPress use their own .htaccess file when installed, if this is the case then download the existing .htaccess file, add your extra code and then upload it back to the server.

In my opinion the most important thing to do when editing .htaccess file is to BACK UP. Make sure that you have a copy of the original .htaccess file in case everything goes ‘pear-shape’.

This method is not limited to just image files. You can add file extension such as .exe or .zip to protect against people stealing any other content off your site. Then you can either display them the alternate image, or have them download a .zip folder full of images promoting your site, the possibilities are endless.

Lastly, it is polite to ask your hosting provider if they allow .htaccess files to be used on their server, just in case they do not.

I hope this article has been helpful and has cleared up some of the confusion surrounding stopping image hotlinking with .htaccess.