Or rather, how to prevent the hotlinking of images by external sites ...
What is "hotlinking"?
Hotlinking refers to the practice of one website loading assets -- be them images, video, audio, etc. -- from another website, rather than loading them from a local copy. When the hotlinking website is loaded, media is pulled from the hotlinked website, the hotlinked site incurring any bandwidth costs.
As you might imagine, it is generally undesirable to have external websites hotlinking your assets.
On Apache servers, such as those preferred by Backlight, hotlinking can be prevented by inserting rewrite rules into your .htaccess file(s). However, this should be done with due consideration. While taking these measures can protect you from unauthorized hotlinking, it can also damage your SEO and social media presence by preventing search engines and social networks access to your media files.
In this article, we will attempt to explore the various options for protecting oneself against unauthorized hotlinking of image files, while also minimizing or eliminating the damaging side-effects that come of such measures.
Editing Backlight's .htaccess File
Backlight applies its own .htaccess file to albums and album sets, the contents of which can be edited from within Backlight's admin.
- Log in to Backlight's admin.
- In the menu, go Backlight => Settings.
- Scroll to the bottom of the page, then click on "Show Advanced Settings".
- Click on "Edit Settings".
- Edit the contents of the "Album .htaccess" field.
- When finished making changes, scroll to the bottom of the page, then click on "Save Settings".
- To apply the modified .htaccess file, in the menu, go Backlight => Publisher.
- Click on "Update Album Files".
- Click "Update".
Find Hotlinks via Google Images
Google Images provides one easy method of finding whether your images are being hotlinked.
Go to Google Images, and search for:
The "inurl" segment looks for every images from your website. The "-site" segment then removes all results that include your URL. The culprits remain, those pages hotlinking to images on your website.
It's okay to get angry.
Okay, let's start blocking these jerks.
Get into Backlight's admin as above, and let's take a look at the existing .htaccess code. At the top, locate the block of code beginning:
There's a lot of existing code, and the block ends with:
We're going to be working within this block. The existing code, keep it; don't change it.
And while these lines will appear in the code snippets below, don't repeat them if they're already there.
Creating a Blacklist
So, let's first see how to blacklist or block specific sites. Beneath the existing "RewriteEngine On" line, build out your code as follows.
Add as many lines as you need, one for each site you wish to block. Each RewriteCond line should end with the
[NC,OR] code. NC means to ignore upper and lower case. OR means "Or Next", as in, match this domain or the next line that follows. The last domain listed omits the OR code, as you want to stop matching domains after the last RewriteCond line.
The last line returns a 403 Forbidden error code on requests for jpg, jpeg, gif, bmp or png files.
For example, if you wanted to stop The Turning Gate, and only The Turning Gate from hotlinking your images, then you could use this code in your .htaccess file:
Just so you know, The Turning Gate never hotlinks images.
Creating a Whitelist
Now let's try the inverse. Instead of blocking specific sites, we'll block ALL sites, allowing only specific sites to access our files.
The code below includes inline explanations; lines beginning with "#" are commented.
About Blank Referrers
When a request is made to the server, the browser sends along page referrer information. Hotlink protection uses this information to determine access. Visitors using firewalls or other security protections may come to your site without page referrer information. Should you choose to omit the above line allowing blank referrers, these users will be blocked. You will also prevent people from directly accessing an image by typing in the URL in their browser. It's usually a good idea to allow this, I think.
Allow Your Own Domain(s)
You must specifically whitelist your own domain, else your pages will not be permitted to load your own images.
As example, my personal site can be accessed by either of two domains, %%campagnapictures.com%% or %%campagna.photography%%. Because The Turning Gate is also mine, I will allow it to hotlink to my personal site as well. I would use this code to allow access to my own images, while blocking all external sites.
We also want to allow search engines and social media sites access to our files, to maintain SEO and allow content sharing.
In compiling this document, these resources were helpful.