Skip to main content

Hotlinked Images

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".

Google Images provides one easy method of finding whether your images are being hotlinked.

Go to Google Images, and search for:

inurl:yourwebsite.com -site:yourwebsite.com

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.

Examining .htaccess​

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:

<IfModule mod_rewrite.c>
  RewriteEngine On

There's a lot of existing code, and the block ends with:

</IfModule>

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.

<IfModule mod_rewrite.c>
  RewriteEngine On

  RewriteCond %{HTTP_REFERER} ^https?://([^.]+\.)*blockurl1\.net [NC,OR]
  RewriteCond %{HTTP_REFERER} ^https?://([^.]+\.)*blockurl2\.net [NC,OR]
  RewriteCond %{HTTP_REFERER} ^https?://([^.]+\.)*blockurl3\.net [NC]
  RewriteRule .*\.(jpe?g|gif|bmp|png)$ - [F]

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:

<IfModule mod_rewrite.c>
  RewriteEngine On

  RewriteCond %{HTTP_REFERER} ^https?://([^.]+\.)*theturninggate\.net [NC]
  RewriteRule .*\.(jpe?g|gif|bmp|png)$ - [F]

</IfModule>

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.

<IfModule mod_rewrite.c>
  RewriteEngine On

# Allows blank referrers.
  RewriteCond %{HTTP_REFERER} !^$

# Allow your own domain.
  RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourdomain.com [NC]

# Redirects requests for image file types to 403 Forbidden error,
# as defined by preceding conditions.
  RewriteRule .*\.(jpe?g|gif|bmp|png)$ - [F]

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.

<IfModule mod_rewrite.c>
  RewriteEngine On

  RewriteCond %{HTTP_REFERER} !^$
  RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?theturninggate.net [NC]
  RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?campagna.photography [NC]
  RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?campagnapictures.com [NC]
  RewriteRule .*\.(jpe?g|gif|bmp|png)$ - [F]

</IfModule>

We also want to allow search engines and social media sites access to our files, to maintain SEO and allow content sharing.

...

# Allow search engines.
  RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.* [NC]
  RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?bing.* [NC]
  RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yahoo.* [NC]
  RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?baidu.* [NC]
  RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?naver.* [NC]

# Allow social media.
  RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?facebook.com [NC]
  RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?twitter.com [NC]
  RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?pinterest.com [NC]

...

Resources​

In compiling this document, these resources were helpful.