The Knitting Fiend

Hotlinking, aka “bandwidth theft”. You probably don’t know what it is, but Tiffany recently experienced someone hotlinking to her images and she was not happy.

So, what is it? Here’s how Missa at knitblogs describes it:

If you are using images on your blog that are located at someone else’s blog or website, you are stealing their bandwidth.

Why is this a problem you ask? Well, I’m not going to get into the details. But, if you run a knitting blog, it’s likely you display lots of images. If someone at another site likes your pictures, and doesn’t see any harm in hotlinking, they may decide they want to to display your picture at their site. Now, using web technology, they could either:

1. download a copy of your image and then upload it to their site. Then, when they write their own blog article they would include a link to the copied image hosted at their site. Or
2. they could skip that pesky copy-download-upload step and include a link to your site. This is called “hot-linking”.

Now, the reading I have done suggests that either or both of these behaviors may or may not be legally permitted, depending on circumstances. (I’m not a lawyer; I don’t know. You could read details here: Wikipedia.)

But, the fact is, legal or not, there’s a reasons why you as a blogger really, really don’t want it to be possible for other blogger to do #2 and display your images on their site. Here it is: when you host your site, you pay for something called “bandwidth”; when they do hot link your image, you pay for bandwidth to host their blog. Other bloggers hot linking can get costly, and why should you pay for their blog display?

What to do?

If you visit Missa’s page, you’ll read her technical solution which is periodically changing the names of your images. That method will sort of work, but it’s a pain in the neck.

Luckily, there is a better solution available to many bloggers. If you run your blog from an Apache server, you can block others from hot linking your images using .htaccess. If you are a web newbie, I hope you have all your images in a common directory, because that will let you get up to speed playing with .htaccess files. (It is is the most common for blogs to store all blog images in one directory; so likely, you can do this. If you use Wordpress, look for wp-images in your blog directory.)

Here’s what I did so my files can only be viewed by people visiting my site:
1) I created a text file and saved it as “htaccessImages”. The text file was similar to what I show below, except my file include the domain name “thedietdiary” where “example” appears below:

RewriteEngine On
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://www.example\.com/ [NC]
RewriteCond %{HTTP_REFERER} !^http://example\.com/ [NC]
RewriteCond %{HTTP_REFERER} !^http://www.google\.com/ [NC]
RewriteCond %{HTTP_REFERER} !^http://google\.com/ [NC]
RewriteRule \.(gif|jpg)$ - [F]

When you make your file, replace “example” with yourdomain name. Otherwise, your blog won’t display your own images. You can also let other sites display your images. I gave permission to “google”. If you don’t want google to be able to display your images, remove the two lines containing “google”.

Notice the \ in front of the “.”? If your domain name has multiple “.”, put a \ in front of each one (Don’t ask why I don’t have a \ after the www. I fiddled. This works . If it doesn’t work for you, try adding a \ after the www. )

2) I uploaded the text file to my “thedietdiary.com/blog/wp-images/” directory which holds all my blog images. You should pick the directory holding your blog images. (For the record, I used Cpanel’s file manager to upload these files. Your host likely has some sort of file manager tool; you can use whatever they provide.)

3) After uploading, I checked that the file wasn’t corrupted by looking at it using “view file” in Cpanel’s file manager. Then, I changed the name to “.htaccess”. Once you change the name to “.htaccess”, the file may become invisible, and you may not be able to see it. (You may be able to see it; this depends on some settings. I can see it in Cpanel’s file manager. I could see it in Fetch immediately after loading, but it became invisible if I refreshed the view of the directory. )

3) I loaded my blog page to see whether I could still see my images.

Note: if you can’t see the image, edit the file and try again!)

4) Next, I atlab.com’s web site and checked whether my images were blocked in their testing tool. Just visit the site, scroll down, insert the URL of a link to an image in the image directory where you put the “.htaccess” file, then click their button to see if it displays. If it doesn’t display, you’re gold!

(By the way, when you imitate me, I advise testing by inserting a link to an image you have not loaded into your browser recently. You could clear your cache, but I find Internet Explorer seems to be stubborn about fully clearing cache, and the darn image seems to keep showing up unless you actually clear the cache, then quit IE, then start it up again. Netscape, Firefox and Safaria all cleared cache completely when I told them too. D#@! Microsoft.)

Ok, that’s all you have to do. It’s a little bit of a pain, but afterwards, you never need to edit your blog or any pages at your web site to reflect the new name of any images. Plus, you’ll have learned how to play with .htaccess, which is useful should you later want to start implementing some extra spam control.

---

Now, I do have one nervous-beginner tip I’ve never read anywhere else. If you are a beginner, you need to know this tip because it’s possible to “bork” your site when using .htaccess. It’s easy to unbork, but it’s best to avoid borking the site in the first place.

To avoid any possibility of borking the site in any way, add a practice step before steps 1-4 above. First, set up up a practice directory you don’t use for anything other than testing .htaccess files; I set one up called “../htaccessTest.” Load two files: one should be a web page containing an image link; the other should be the image link. Then, follow the directions I described above, but load everything into the test directory (”../htaccessTest/”) and check the display of the image in by loading the file in that directory.

This trick will let you test out your file without touching the rest of your site. That way, you don’t need to worry about “borking” your site. If worst comes to worst, you can always just delete the entire practice directory, and anything in the wretched invisible .htaccess file stored in that directory will vanish. “Poof”! Unborked!

After the whole process works in the practice directory, you can apply it to your image directory with confidence. And, heck if you get to the point where you feel more confident, you can put these lines in an ‘.htaccess’ file in your root directory! That will prevent people from hot linking absolutely all images at your site.