Hotlink Protection with .htaccess

If you host a website, you have most likely been the victim of hotlinking at one time or another. Hotlinking is when someone displays your images (or other media) on their website by directly linking to your server. This means they get to display your files while your bandwidth is being used. Luckily, it is easy to prevent with the help of the .htaccess file. This article will show some of the better methods to use to stop hotlinking while keeping your server running smoothly.

An example

Once someone found a large image on my site that they thought would make a good avatar on their forum. They linked to my server for the image, and even though it was shrunk down on the forum pages, it was still downloading the full size (over 200KB). This person had a lot of posts and it was a very heavily used forum. It ended up using about 100 Megs a day of bandwidth, or about 3 Gigs a month! That was when I decided to start using hotlink prevention.

Requirements

This article covers hotlink protection for the Apache web server. If you are running IIS, much the same can be accomplished using commercial software such as ISAPI Rewrite.

You may have to contact your hosting service or just experiment to see if you are able to use the .htaccess file. The .htaccess file is simply a text file which contains directives (configuration settings) for the Apache web server. It is easy to create if you do not have one already, and it is generally located in the root directory of your server. Any settings in this file will apply to all sub-directories (unless told otherwise – more on that later).

If you prefer to use the primary Apache configuration file (httpd.conf) for your server settings, everything in this tutorial can be accomplished much the same way.

A few notes on the code

This article will cover the two main methods of hotlink prevention: Image replacement and ‘403 Forbidden’ responses. You may have seen hotlink protection code which redirects users to a specified web page, but this will most certainly not work . This is the equivalent of placing a URL into an <img> tag, and it will do nothing more than cause problems.

If you want hotlinks to take visitors to your site, it is best to simply return a ‘403 Forbidden’ response and create nice custom error pages. A standard error page will generally just cause the visitor to close the window, but a well-made custom error page can give the visitor information about the site, and links to the main sections. They will be much more likely to visit your site because of this.

Explanations of the code samples are given below, as well as some basic information on flags and other options. For a full explanation of everything you can do with the .htaccess file, I recommend taking a look at the Apache directive documentation.

Proper image replacement method

This method displays a specified image on the hotlinker’s page no matter what image they linked to. You can have a simple image which says “do not hotlink!” or you can use your imagination and really discourage them! Read further to find out the best way to create these files.

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 won’t 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 <img> 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!

Changing the blocked extensions

For other extensions to be blocked, you just have to add them between the parenthesis, placing a | (pipe) character between each one. In the case of the jpg and jpeg files, there is only one entry, but the question mark after the ‘e’ means it is optional, so it handles both.

Troubleshooting

The most important thing to remember when testing hotlink protection code is that you must always clear your browser’s cache before each test, or you may just be pulling up cached copies of the test images.

Another important thing to mention is that in many server configurations, mod_rewrite requires that either the FollowSymlinks or SymLinksIfOwnerMatch option is enabled. If your server requires this and you do not have it, you will get a ‘403 Forbidden’ response for all requests. It should be easy to notice in your log files. If you do need it, simply add this line before your hotlink prevention code:

Options +FollowSymLinks

Allow selective hotlinking

There are a couple of different ways to do this. You can of course add the domain name that you want to allow into your .htaccess file as mentioned above, but what about when you have certain images you want anyone to use? Here is the solution I prefer.

Create a directory on your server called ’share’ and create a new .htaccess file inside it, containing this code:

RewriteEngine off

This will counter-act the global .htaccess file, and allow hotlinking from this directory. Now you can keep your bandwidth protected while still letting certain files be hotlinked!