Preventing Image theft

We are seeing more and more cases of people stealing bandwidth by linking to images (and other files) on someone else's server.

For example, let's say that you have a photograph of your car on your web page. Then let's say that someone else is selling a similar car on eBay, and instead of uploading their own photo to their own server, they find your site and decide to embed a link to your photo in their eBay listing.

Now whenever anyone views that eBay listing and loads the photo, it comes from your site, not from eBay or from the lister's site. The more times it's viewed, the more times it's downloaded from your site, and the more bandwidth charges you incur.

Of course, this isn't just limited to eBay listings. People embed images and steal bandwidth like this in all sorts of web pages, forums, ads, etc.

One option is to periodically rename your images, which would cause the bad guy's links to break, but this requires updating your own web pages with the new image name. If you only have a few images that you need to protect then this might work just fine, but if you have a lot of images it's not practical. So how can you prevent bandwidth theft? It's easier than you might think.

When the web server accesses your site to serve up files to visitors, it looks for a special file called ".htaccess". This file can be used to control all sorts of things. It can be used to require a username and password before visitors can access your files, for example. It can be used to redirect some URLs to others. It can be used to control who can access the files based on their IP address, and so on.

With a few lines in the .htaccess file you can protect images from being linked to other sites. Your images will look just fine, as long as they are being referenced from your own web site, but if anyone else puts links to them in their site the images won't load and will appear broken, saving your bandwidth.

For this example, let's assume your domain name is "example.com", and that no site besides yours should be able to load your images. You'd create an .htaccess file that looks like this:

SetEnvIfNoCase Referer "^https?://(www\.)?example.com/" ok=1
SetEnvIfNoCase Referer "^$" ok=1
<FilesMatch "\.(gif|png|jpe?g)$">
   order allow,deny
   allow from env=ok
</FilesMatch>

You can add multiple domains by using this  '|' (bar or "pipe") character.

SetEnvIfNoCase Referer "^https?://(www\.)?example.com|seconddomain.com/" ok=1
SetEnvIfNoCase Referer "^$" ok=1
<FilesMatch "\.(gif|png|jpe?g)$">
   order allow,deny
   allow from env=ok
</FilesMatch>

Here's how it works. When a visitor loads a web page, their browser also has to load all of the images that it contains. As it requests each image it passes along a "Referer", which is the URL of the page where the image references were.

The first line of that example checks the "Referer" value to see if it matches a particular pattern. In this case it's looking for "http", optionally followed by the letter 's', followed by "://", optionally followed by "www.", followed by your domain name (example.com in this example) and a final slash. It only checks to see if the Referer value begins with this pattern, so it will also match similar URLs that have more data after the slash. If the value matches it defines a value called "ok" by setting it to 1.

The second line checks to see if the Referer value is completely empty, in which case it also defines the value "ok" to be 1. This is necessary because a few browsers out there either don't send the Referer value at all, or occasionally skip it due to a bug. In most cases these will be legitimate visitors to your site, so you don't want to hide your images from them.

The third line checks the requested file against a pattern, and if it matches, the following block of rules will apply. In this case it's checking to see if the filename that the user is requesting ends with ".gif", ".png", or ".jpeg" (with the 'e' being optional), which are the commonly used image formats. So the following block of rules won't apply to html, php, or other requested files.

The next two lines tell the web server to only allow access to the requested file if the value "ok" is defined. Since the only way this value can be defined is by having a Referer value that either matches your URL or is blank, image requests that came from some other site will be denied, resulting in a broken image. But links to your images that appear on your own site will work as expected.

The last line simply marks the end of the rule block.

If you have multiple sites that can legitimately use your images, simply add another line like the first one with a different domain. You can have as many as you need.

If you want to protect others types of files, simply add them to the pattern list, separated with the '|' (bar or "pipe") character.

NOTE: Processing .htaccess files adds some server overhead to each request. To help minimize the impact on the server and ensure the fastest possible access to your pages, it's a good idea to place all of the files that need protecting into a separate subdirectory and put the .htaccess file in there instead of placing it directly in your "www" directory.

Also note that .htaccess files apply to the directory they are located in AND to any subdirectories below it.