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.

Requirements

This article covers hotlink protection for the Apache web server only . 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 website. The .htaccess file is domain specific so if you host multiple domain you will need to create multiple .htaccess files.

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. This article will cover the two main methods of hotlink prevention: Image replacement and "403 Forbidden" responses.

Proper image replacement method

This method displays a specified image on the hotlink 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!

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 Preceding 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 favourite 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 browsers 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!

Related Posts

  1. .htaccess File (tips)