How to disable hotlinking images from our site?

To prevent from stealing our bandwidth and server resources, we can easily disable hotlinking any image from our site using .htaccess file. All you have to do, is to paste into .htaccess file the following code:

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?slick.pl [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ http://slick.nq.pl/d/hotlink.png [NC,R,L]

Now, when someone will try to fetch an image or a photo located on your website (by inserting BBCode or using img tag with src attribute on his site), he will see replacement, defined in the last line. But be careful! Do you see the small difference between lines 3 and 4? On the third line, we have to define our domain name (on which out site is hosted) and on the fourth, we have to provide a full path to the image that will replace our protected resources – and now the most important – this image should be uploaded on the different domain than defined on the third line.

If you won’t do that, your htaccess will get crazy and you will see an Internal Error (Error 500). It will cause an infinite loop – server will try to protect hotlink.png image by replacing it with… yes, you’re right – hotlink.png but unfortunately it’s protected (…) and so on.

Hotlink.png must be outside protected area to avoid being protected (by itself). So now let’s test it. Of course testing hotlinking on my own site is useless because I allow myself (my own site) to post images. So try yourself – here is a picture, that I have taken some time ago, visiting Australia:

http://slick.pl/wp-content/uploads/bikes_001.jpg

Try to show this image on Your website using BBCode:

[img]http://slick.pl/path/to/your_image.png[/img]

or image tag:

<img src="http://slick.pl/path/to/your_image.png" alt="Image" />

What do You see? For sure not beautiful parrots. Here’s what You’ll see.

Thanks to that I forbid You to fetch a photography (700KB).