Hotlink protection for images using htaccess

What is hotlink protection

Bandwidth theft or "hotlinking" is direct linking to a web site's files (images, video, etc.). An example would be using an tag to display a JPEG image you found on someone else's web page so it will appear on your own site, eBay auction listing, weblog, forum message post, etc.
Bandwidth refers to the amount of data transferred from a web site to a user's computer. When you view a web page, you are using that site's bandwidth to display the files. Since web hosts charge based on the amount of data transferred, bandwidth is an issue. If a site is over its monthly bandwidth, it's billed for the extra data or taken offline.

Hotlink protection for images using htaccess

RewriteEngine on
RewriteCond %{HTTP_REFERER} .
RewriteCond %{HTTP_REFERER} !^http://(www\\.)?yoursite\\.com [NC]
RewriteRule \\.(gif|jpe?g)$ /images/hotlink.$1 [L]

Breakdown of the code

RewriteEngine on

This turns on the mod_rewrite engine in Apache. A requirement for the rewrite commands.

RewriteCond %{HTTP_REFERER} .

This line allows blank referrers. The period in .htaccess means any character. This means users can manually type in a link to one of your images in their browser, but this is generally not even a problem. If you leave this line out a large percentage of visitors will not see your images. This includes many users behind corporate and ISP firewalls, all AOL users, and many others. Leaving this line in is highly recommended! If a visitor thinks your site is broken, they will most likely not return. If you have any kind of e-commerce site, they probably wont be doing business with you!

RewriteCond %{HTTP_REFERER} !^http://(www\\.)?yoursite\\.com [NC]

Here the server checks to see if the request is coming from your own domain. Just change the text to match your website. It handles hotlink prevention whether or not the www prefix is used. The [NC] flag at the end means 'No Case', so it will handle everything.

Notice that there is a backslash before the periods in the domain name. As stated above, in the .htaccess file a period means any character. Preceeding it with a backslash turns it into a literal period, meaning that there must actually be a period there. When writing .htaccess code it is always best to take all possibilities into consideration.

If you have another site that needs to hotlink from this one, simply duplicate this line and type in the new domain.

RewriteRule \\.(gif|jpe?g)$ /images/hotlink.$1 [L]

This last line blocks all requests for gif, jpg, and jpeg files unless they are from an allowed resource. You will notice the hotlink.$1 file. This code will cause the server to return the proper type of file – which is the format that was requested. A lot of hotlink protection code simply sends one type of file no matter what, but many browsers will not handle this properly, and the above method provides the most flexibility while doing things correctly.

This means that for this example we need to create a hotlink.gif, hotlink.jpg, and hotlink.jpeg. Just create your replacement image, and export it to each of the needed file types. Then just upload them to your server in the location specified by the code (in this case – /images/). You can make the replacement images as large or as small as you want, just keep in mind that if they are too large, you may end up loosing more bandwidth than you would have without protection code!


Proper 403 Forbidden method

This method is my favorite because it is the easiest on the server and no bandwidth is used at all. Once again, there are several methods to just return nothing but generating a 403 Forbidden error for the hotlinker is perhaps the best. It will not cause any errors or confusion on your server, and the hotlinker will be left with a broken image link.

RewriteEngine on
RewriteCond %{HTTP_REFERER} .
RewriteCond %{HTTP_REFERER} !^http://(www\\.)?yoursite\\.com [NC]
RewriteRule \\.(gif|jpe?g)$ - [NC,F]

Breakdown of the code

The last line is the only difference in these two examples, and this one just contains a dash where the image file would be. Since we are just bouncing back a 403 Forbidden error message to the hotlinker we do not have to worry about creating any image files.

As mentioned before, if the hotlinkers have simple links to your images (as opposed to images displayed with the tags), clicking on the links will return a ‘403 Forbidden’ error with this method. This is what we want, but there is no reason you cannot create custom error pages which give the user information about your site and links to the main sections. This gives you a much better chance of keeping these visitors