Short bio
Hi! My name is Dan and I'm a Systems Manager and Web Developer from the UK. I blog about web technology and digital lifestyle. You can follow me using the links below. Thanks for dropping by.
Hotlinking, sometimes called image leeching or hot linking, is where another website embeds an image which is stored on your web host. So, for example, if you want to add an image to your website, you can upload the file to your web host then embed the image into your HTML referencing the source for the image as the location of the file on your web host. When someone accesses the HTML page where the image is embedded the file will be downloaded from your web host. If you don't protect against hotlinking, someone could embed that same image on their web page, which means that every time someone accesses their page, the image will be downloaded from your web host and drain your bandwidth. Don't do this, it's not cool and some sites see it as stealing.
Sadly, unless you go looking for this you may never know. One indicator could be that you suffer a sudden surge in bandwidth. I say bandwidth, not traffic, because stats tools such as Google Analytics may not pick this up because they only register web pages, not images. For argument's sake, I'm considering bandwidth as pure data transfer and traffic as people who are visiting your site and reading your web pages. Drupal's access statistics may also not pick this up as they will only register page hits. It may be picked up if you are using the private download method. However, people may still get around this by linking directly to the file.
The best place to check for hotlinking would be your web host's web stats package. In my case, as I'm using an Apache server with Plesk, I'm using Plesk Stat. This logs access at a lower level so I can see everything that hits the server. Somewhere in the stats package you should find 'referrals'. This shows where other sites have linked to your site, which also includes embedded images. You could go visiting the referrals looking for an image, but unless any really stand out I wouldn't bother - the best thing you can do is just to protect against the hotlinking, which we'll look at next.
Once again, it's htaccess to the rescue! With Drupal there is a default htaccess file in the root directory of your site. We're going to leave that be. I'm assuming that all of your images are stored in the /files folder, so this is the folder we will protect. There is already an htaccess file in there, so we just need to add a couple of lines to say not to serve images if they are referred from other sites. Here's a sample htaccess file showing how to do this:
SetHandler Drupal_Security_Do_Not_Remove_See_SA_2006_006
Options None
Options +FollowSymLinks
# Block hotlinks
RewriteEngine On
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(.*\.)?yourdomain.com [NC]
RewriteRule \.(jpeg|jpg|gif|png)$ http://yourdomain.com/nohotlinking.gif [NC,R,L]
Just to recap, this is the htaccess file that goes in your /files directory, not your root directory. This works by saying allow any blank referrals (some browsers do this, so just to be safe), allow any referrals from yourdomain.com, block any image files (the ones I've specified) and return http://yourdomain.com/nohotlinking.gif instead (which will show on the site trying to hotlink). The reason we add this to the /files folder instead is because if you add this to the root folder htaccess file the nohotlinking.gif will also be protected and try to redirect to itself, causing an infinate loop - so it won't work. Now just create an image called nohotlinking.gif and place it in your root folder - this will be the image people see when someone trys to hotlink.
Images which are part of your theme will not be protected by this method. If you want to also protect your theme images, you will need to add the same htaccess file to your theme folder.
Thanks to a tutorial on altlab.com for the info on this - which also has a really helpful tool for testing if you have this set up correctly.
Please feel free to post any comments below.
Comments
This is great, I've tried it
This is great, I've tried it and it works beautifully, but it does create a problem with my preview images. When I upload the image all I get is a grey line, with no preview.
It does show all preview images that were previously uploaded though, so I'm stumped. Is there anything that you know of that would cause this to happen with this code?
I'm currently running Drupal 5X...............
Thank you.
Glad to hear it's working (or
Glad to hear it's working (or stopping people from hotlinking at least). I can't see why preview images would be any different than normal images if they are all stored in the same folder. I guess the reason previous images are showing is because they are stored in the cache (try doing a hard refresh (CTRL-F5 in Firefox)).
Are you using public or private download method for files? When you say preview images, do you mean a generated thumbnail or the preview mode when creating a node?
Thanks
Dan
Hi, I'm using private
Hi,
I'm using private download method, and the images are thumbnail previews that I upload when I create new content. You can see what I'm talking about here: http://www.suntiques.com/tutorials. It only affects my preview images (on the left side of the screen), not the images in the content area............or the thickbox preview images, very strange.
I've cleared cache and the previously uploaded images are still showing. For now, I just take out the code, upload my images, then put it back in there, it's a pain, but it works.
If you run across anything that may solve this problem, I'd appreciate hearing about it.
Thanks.
Hi That's very strange - it
Hi
That's very strange - it sounds like the hotlinking fix is maybe causing problems for Drupal generating the preview image file. When you leave the code in, upload a new tutorial and create a preview image (which shows only the grey line), is the preview image file in the '/files/imagecache/50x50/content/tutorials/' folder on the server with the rest of the preview image files?
I'd like to get to the bottom of this so we can get a good solid hotlinking fix that works for everyone :)
I just uploaded some 'test'
I just uploaded some 'test' content. The preview image is in the folder '/files/content/tutorials/ only.
All the other preview images are in both the '/files/content/tutorials/' and the '/files/imagecache/50x50/content/tutorials/' folders.
Thanks for you help.
What image generation modules
What image generation modules are you using?
I'm using image
I'm using image cache............
Ok, this is what we ended up
Ok, this is what we ended up putting in the .htaccess file in the root directory:
We added lines 3 and 4 to ignore the request for our anti hot linking image. It works without those 2 lines, but the anti hot linking image was also protected.
#Block hotlinks
RewriteEngine On
#next line will ignore our antihotlink image so it doesn't loop
RewriteCond %{REQUEST_URI} !NO_HOTLINKING\.gif
#next line will ignore empty referer
RewriteCond %{HTTP_REFERER} !^$
#next line will ignore domains that we allow to hotlink
RewriteCond %{HTTP_REFERER} !^http(s)?://(.*\.)?suntiques.com [NC]
#nest line will redirect to our no hotlinking image
RewriteRule \.(jpeg|jpg|gif|png|rar|zip)$ http://suntiques.com/NO_HOTLINKING.gif [NC,R,L]
Thanks.
imageshack
Hey, Great write up.
I have an issue though. My site is mosley compiled of photos that i am hosting at imageshack.com.
I am getting quite a few hotlinkers and im affraid imageshack will close my account if there are to many people
hot linking my images.
Do you know of a way or do you have any code that will only allow the images to direct to my site.
You say that ''I'm assuming that all of your images are stored in the /files folder, '' ... Because i am essentaily hotlinking
to premium imageshack account then this does not apply to me.
Cheers.
Hi Ivor
Hi Ivor
Thanks for the comment, much appreciated.
To stop someone hotlinking you need control over the site where the image sits. For this reason I'm not sure how you can stop other people linking to your Imageshack hosted image unless Imageshack offer some sort of control over which domains can and can't link to the image. According to this site (Helpero) Imageshack has a 100 MB per hour bandwidth limit for each image. So, if this is the case and someone else is linking to your image, it may push you over the bandwidth limit. You may have to check with Imageshack as to what they do when an image exceeds the limit, but I guess they'll just suspend it until the next hour, in which time the image will be made available again.
Thanks Ivor, I hope this helps.
Dan
Hey Dan.. Thanks for the
Hey Dan..
Thanks for the quick response..
I took your advise and sent imageshack an email about nobody butmyself hotlinking to an image..
I am waiting for a response.. I will let you know how it goes.
Opinion
nice post! Thanks.
Thanks man! This really
Thanks man! This really helped! I'm using Drupal 6.11
BTW your capture module in the comment form is terrible...One can barely make out the text and upper and lower case is just too tedious for a real person. This is why you dont have nearly enough comments on a valuable post like this. It took me 7 tries to get an image/text that i could make out...
Thanks for the feedback, glad
Thanks for the feedback, glad it helped :)
I was getting quite a bit of spam so I tried to make the CAPTCHA harder but I guess it is a bit blurry! lol. I've switched over to the math CAPTCHA so I'll see how that goes for now. I've been meaning to check out Mollom actually (http://mollom.com/), I think that might be a better option.
Cheers
Dan
.HTACESS hotlink prevention conflict with imagecache
I added the code to the .HTACESSS file and now imagecache will not generate new images. Any fix for this?
Thanks in advance.
H
Previous fix?
Hi
Have you tried the fix above (http://murfitt.net/blog/dan/2008/09/18/protecting-drupal-site-hotlinking...)? I think this was a similar problem with imagecache.
Thanks
Dan