Using htaccess to stop image hot linking

Hot linking or inline linking is linking to a web site's non-html files (images, video, etc.) so they will appear on another site. The most common practice is hotlinking to another site's images. An example would be using an <img> tag to display an image found on someone else's web page on your own site or blog, or on a forum or social network.

There is school of thought that adumbrates that this is what allows the Internet to work as well as it does (metafilter.com), but many consider it bandwidth theft or simply bad etiquette in that it uses a site's resources without encouraging a proper visit to the site on which the resource is housed.

Indeed, sites termed "content scrapers" (wikipedia.org) use bots to hotlink content purely to give their site content alongside the affiliate ads they are running.

Hotlinking: what is it, and why is it bad? (squidoo.com)

If you watermark your sites images, some may suggest that is as good as a link to your site, but to visit the site this requires a viewer to either type in the URL manually or truncate the link to an image, which they are less likely to do, and besides, who wants to cover up all their images in bloody text!

To allow or not?

The topic of hotlinking is certainly divisive. Try googling "for and against hotlinking" as a search term and you'll see what I mean. The flames fly high.

Usually a substitute image is used to inform that hotlinking is not allowed, and this in turn can irritate someone linking to an image when, as is often the case, a rather rude substitute image is displayed instead, sometimes provoking them to make extraordinary silly claims about you or your site's character to mask the embarrassment it caused them.

It's your call, From here on, I'll assume that you wish to prevent it on your site.

Prohibiting the hotlinking of images with htaccess …

Hot linking can be prevented using an .htaccess file.

What's an .htaccess file (wikipedia.org)

The following added to your .htaccess file will prevent all sites but your own site from using your images.

That may look complex but the syntax will be explained fully in the next example. At the moment replacing ?yoursite\.com/ with the domain name of your site would prohibit all sites other than your own from hotlinking your images, rendering a substitute image instead. Note that it is vital to include your own site else it it will fall foul of your hotlink prohibition itself.

You may wish to also exempt some websites, search engines such as Google which have image search capability for example.

… but allow search engines

The issues associated with hot linking are absolved by many search engine which include a link to the page on which the image is housed, therefore encouraging a visit. They can drive a lot of traffic to your site—a large proportion of the search engine keywords which lead people here to my site are tapped in at Google Images, which is not suprising as my site is after all about images after all. So allowing image search engines to hotlink is a important.

The following extended version of the above will allow Google, Bing, Yahoo and your site itself to hotlink.

How it works

In line 3 replace ?yoursite\.com/ with the domain name of your site but keep the questionmark prefix, the backslash character which must escape all periods in the domain name string, and the forward slash postfix.
E.g. ?artofgladstonetibbs\.co\.uk/
This line is necessary else your own site will be unable to display your images.

On lines 4 to 11 the subexpression (.+) matches a variety of different country code domain names (.co.uk, .it, com.mx etc.) that those search engines use. If you do not wish to allow search engines to hot link, simply remove all these lines.

Line 12 allows hot linking by "blank referrers", where the HTTP referer header has been removed as some firewalls (such as Symantec's Norton Internet Security and ZoneAlarm) and proxies do. (This is also the "allow direct links" option in cPanel's hotlinking protection.) If you do not wish to allow blank referrers to hot link, simply remove that line. However, be aware that doing so will cause anyone viewing with those firewalls installed to see your substitute image in place of all images as no referrer is passed, so unless you wish to block those visitors from seeing any images no matter how they arrive at your site, it is perhaps prudent to allow blank referrers.

In line 13 replace yoursite.com/nohotlinking/please-visit-site.jpg with the full path to the image you wish to substitute for the hot linked image, which must be an image in a location where hot linking is allowed, else your substitute image will fall into a circular trap where the substitute image is attempted to be substituted for itself ad infinitum. Note that period characters do not need to be escaped with a back slash on this line. E.g. http://www.artofgladstonetibbs.com/errdocs/visit-dd.png

To add allow additional sites to hotlink, simply add another RewriteCond above line 10.

Replace ?additionalsite\.com/ with the domain name you wish to allow. (Don't forget the backslash character which must escape all periods in the domain name string.) [NC] makes the site name case insensitive (i.e. ADDITIONALSITE.COM will be treated as additionalsite.com).

You may wish to add image search engines to the list as I come across them if they actually link to the page on which the image is housed: (How not to design an image search engine). For example:

Bare in mind that …

• The htaccess file in which the above is contained will disallow hot linking of all jpeg, png and gif images in the directory in which it is placed and all sub-directories which do not have an htaccess file themself. The nearest htaccess file to the directory in which the resource is located is the htaccess file that will be applied.
• You may wish some images housed on your site be be allowed to be hot linked (I allow my banners to be hot linked for example). You can either include a separate htaccess file prohibiting hot linking in an some images directories but not in others, or hotlink protect the htaccess file located in the root directory but include separate non-hotlink protected htaccess files in directories that you do not wish to prohibit hotlinking. Whatever works best for you, but bare in mind only rules in the htaccess file nearest to the resource will be enforced.
• Hot linking prevents direct text linking to images too. A hot linked image is not just one referenced in a img tag but from an anchor link too. So if you prevent hotlinking not only will you stop images being hot linked and displayed on another site in a img tag, but also you will prevent the image being viewed from a direct text link to it. E.G. <a href="http://domain.com/image.jpg">link to image<\a> will, when clicked, show your substitute image.
• Some hotlink to an image because there is no separate page for that image to link to. Having a page available may encourage linking to the page rather than the image.
• Checking if an image is hotlinkable. This site (altlab.com) can be used to check if an image is hotlinkable. Remember to clear your browser cache if you have already viewed the image else it will be re-loaded from cache, invalidating the test (reloading the page will work as the browser will attempt to re-load the image rather than drawing it from cache). If you see the image still, then it’s hotlinkable.

The substitute image

What exactly should you use for your no hotlinking substitute image?

I suggest that it is not wise to use anything which is too offensive or provocative as hot linkers may just not realise that you do not appreciate your images being hotlinked. A message advising that the viewer may visit your site to view the image is more appropriate and more likely to precipitate a visit to your site. For example:

However, some may still take it personally. Perhaps a transparent 1x1 pixel GIF or PNG is an alternative (below).

Do you see it? No, nor will they, and left scratching their head they may just feel something has gone awry. Plus, as a bonus, a 1x1 pixel image takes next to no bandwidth when returned, which is what this all about after all. You could scratch that down even further by simply returning a “403 Forbidden” or other error code but this will load your custom error page and any associated images for that error code if you have one if the image is accessed via an anchor link, which could result in much more bandwidth useage. Plus, nobody likes to see the forbidden code; remember, they may not feel the same way about hotlinking as you and may not understand why they are being forbidden.

Whatever works for you!

Notes:

• An htaccess file can be a tricky thing, and if you are new to creating one, please read up a bit first as errors can tie-up your site until fixed. Here is a great guide to creating an htaccess file: Comprehensive guide to .htaccess.

Related entries

• Five bored in Brussels: EU court ruled hyperlinking does not constitute a legal breach unless… (Pick of the Week 19th February 2014)
• The strange case of the Romanian agricultural ultralight with a penchant for pinup
• How not to design an image search engine
• What Is… .htaccess
• Redirect to an under maintenance page with .htaccess
• Restricting access to files with .htaccess

Tags: .htaccess, hotlinking, search engines.