Summersault Blog

It’s a pretty common problem: you have an image on your website that’s attractive or useful to someone else - a logo, a photo, a cool piece of art. They build a web page hosted somewhere out there that makes a reference to your image. Now every time a user visits that person’s site, the user’s web browser loads up the image from your site, using up your bandwidth and, in many cases, displaying it for purposes you hadn’t really intended - sometimes called “hotlinking”. The other day I found someone who was using a 6MB image from my personal site as a background image for theirs - and they were apparently pretty popular, so it created a lot of large requests on our webserver. Recently one of our hosting clients and longtime friend of Summersault, Justin Simoni, was having this happen so much that he was regularly exceeding his bandwidth quota and incurring all sorts of hassle. So, we tackled the problem head-on, and even though there are lots of references around the net on how to limit this problem, none quite seemed to document the particular method we used. I’ll do that here in case anyone else finds it useful.

This method documents an approach for the Apache webserver software; if you’re using some other webserver software, hopefully you can adapt accordingly.

1. Make sure your hosting account has the ability to use “mod_rewrite” commands, either in the httpd.conf file (the system wide configuration file) or via an “.htaccess” file in your own account. Also make sure your account is configured with the “FollowSymLinks” directive turned on. Consult your hosting administrator if you’re not sure what all that means.
    
2. Create an image that you want to be displayed in lieu of whatever image the “offender” is trying to display. It should be very small in size, and probably just a simple black-text-on-white-background note saying “hey, don’t do that” or whatever you want. Justin and I both called ours “leech.png” and put it in our “images” subdirectory - see my 300×60 version to the right.
    
3. In your .htaccess file, use the following snippet of code:
   
# Prevent Remote Hotlinking
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?chrishardie\.com [NC]
RewriteCond %{REQUEST_FILENAME} !leech.png [NC]
RewriteRule \.(jpe?g|gif|bmp|png)$ /images/leech.png [L]

   Pretty simple, eh? Let’s look at each line:

   RewriteEngine on

   Turn on the “rewrite engine”, the capability in Apache that allows you to write expressions modifying how a given request is handled.

   RewriteCond %{HTTP_REFERER} !^$

   Don’t do anything where the “referer” isn’t defined. We don’t want to block out search engine crawlers, or just direct accesses of the image file.

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

   Don’t do anything where the request is coming from my own site - where the “referer” field contains my website address, which means someone is requesting the image because it is displayed on my site.

   RewriteCond %{REQUEST_FILENAME} !leech.png [NC]

   Don’t modify the request if they’re requesting the special “leech” file we created above in step #2.

   RewriteRule \.(jpe?g|gif|bmp|png)$ /images/leech.png [L]

   If we haven’t bowed out from the criteria in the above lines, then it’s time to actually re-write any requests for files ending in standard image extensions to be redirected to load the “leech.png” file.

With that simple magic, you can deter most attempts by remote users to display your images on their site (which, I might add, are often due to lack of understanding of how the web works, not any sort of ill will). And of course you can create exceptions and variations on the above as needed.

I hope that’s useful - if you have any other ways to approach this issue, please comment!

This entry was posted on Tuesday, October 18th, 2005 at 4:29 pm and is filed under Miscellaneous, Sysadmin / Hosting, Website Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.