Welcome to WebmasterWorld Guest from 54.85.162.213

Forum Moderators: phranque

Message Too Old, No Replies

Hotlink Protection Tutorial

     
12:50 am on Dec 12, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:Aug 2, 2004
posts:96
votes: 0


I came across an old post of mine and realized it was not that long ago since I first started learning more about hotlink protection with .htaccess. This forum has been a great resource, and I have learned so much.

<snip>

Big thanks especially to jdMorgan who really knows his stuff! I am planning to add a link to the forum and special mention in the article as well.

(If this post is considered spam please remove it! :)

[edited by: txbakers at 5:10 pm (utc) on Dec. 12, 2004]
[edit reason] no site reviews per TOS [/edit]

12:54 am on Dec 12, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Sept 28, 2001
posts:1380
votes: 0


If you are using the cPanel control panel, this function is built right in and you can do it all in one click.
12:56 am on Dec 12, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:Aug 2, 2004
posts:96
votes: 0


Yes that is true. I have Cpanel access on my servers as well, but the code it generates could be better, and there is limited customization.

Not to mention I never like having a script edit my .htaccess file.. I always worry (and have heard stories) of it modifying other code you might have by mistake. For people who never manually add anything it may be fine.

5:12 pm on Dec 12, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member txbakers is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Sept 1, 2001
posts:4392
votes: 0


Thanks for the informative article on a subject dear to many webmasters.

I had to snip the reference to your site though, and would like to ask you to post the information here.

Although it's an informational post, we generally don't allow "review my site" or "your opinion please" types of posts. This one was tricky.

We'd definitely like to have your experience shared, would you be willing to post it here instead of in a link?

Thanks for understanding.

7:11 pm on Dec 12, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:Aug 2, 2004
posts:96
votes: 0


No problem.. I was not sure if it would be good to put the link anyway, thats why I typed in that last line :)

Here you go:

Introduction

If you host a website, you have most likely been the victim of hotlinking at one time or another. Hotlinking is when someone displays your images (or other media) on their website by directly linking to your server. This means that they get to display your files while using your bandwidth. Luckily, it is easy to prevent with the help of the .htaccess file. This article tries to show some of the more proper methods to use to stop hotlinkers while eliminating unneeded stress on your server.

An example

Once someone found a big image on my site that they thought would make a good avatar on their forum. They linked to my server for the image, and even though it was shrunk down on the forum pages, it was still downloading the full size (over 200KB). This person had a lot of posts and it was a very heavily used forum. It ended up using about 100 Megs a day of bandwidth, or about 3 Gigs a month! That was when I decided to look into hotlink prevention.

Requirements

If you are unsure, you may have to experiment or contact your hosting service to see if they support the use of the .htaccess file. It is simply a text file which contains directives (configuration settings) for the Apache web server. It is easy to create if you do not have one already, and it is generally found in the root directory of your server. Any settings in the file will apply to all sub-directories (unless you have another .htaccess file in a sub-directory countering the effects of the main file - more on that later).

A few notes on the code

This article will cover the two main methods of hotlink prevention: Image replacement and a ‘403 forbidden’ response. You may have seen code which redirects users to a specified web page but this is not a standard use of the .htaccess file and is certainly not recommended. Basic information on the code below will be given but specifics on the flags and symbols will be left out, as it would require a much longer article. I recommend taking a look at the Apache directive documentation for more information once you get more familiar with the code.

Proper image replacement method

This method displays a specified image on the hotlinker’s page no matter what image they linked to. You can have a simple image which says “do not hotlink!” or you can use your imagination and make them really not want to hotlink to you!


RewriteEngine on
RewriteCond %{HTTP_REFERER}!^$
RewriteCond %{HTTP_REFERER}!^http://(www.)?yoursite.com [NC]
RewriteRule .(gif¦jpe?g)$ /images/hotlink.$1 [L]

This code blocks all requests for gif, jpg, and jpeg files unless they are coming from either yoursite.com or www.yoursite.com. Don’t forget to change the domain name to match your own. You can also add new lines with other domain names you want to allow.

You will notice that the last line has hotlink.$1 instead of .gif or .jpg. If you truly want the .htaccess code to be proper, you must always return the correct type of image! This means you need three copies of the hotlink image for this example: one for each extension.

Proper ‘403 forbidden’ method

This method is my favorite because it is the easiest on the server and no bandwidth is used at all. Once again, there are several methods to just return ‘nothing’ but generating a 403 error for the hotlinker is perhaps the best. It will not cause any errors or confusion on your server, and the hotlinker will be left with a broken image link.


RewriteEngine on
RewriteCond %{http_referer}!^$
RewriteCond %{http_referer}!^http://(www.)?yoursite.com [NC]
rewriterule .(gif¦jpe?g)$ - [NC,F]

Just like before, you must change yoursite.com to match your domain name. You can also adjust the extensions in the last line if you wish. You do not have to worry about creating a replacement image to send though since we are just bouncing back a 403 error message.

Allow selective hotlinking

There are a couple of different ways to do this. You can of course add the domain name that you want to allow into your .htaccess file, but what about when you have certain images you want anyone to be able to hotlink to? Here is a good solution.

Create a directory on your server called ’share’ and create a new .htaccess file inside it, containing this code:


RewriteEngine off

This will counter-act the global .htaccess file, and allow hotlinking from this directory. Now you can keep your bandwidth protected while still letting certain files be hotlinked!

The end

I know this information can be found scattered all over the forum.. I was just trying to make a nice article covering the main points to make it easy for new people to start using it :)

4:02 pm on Dec 13, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member jdmorgan is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 31, 2002
posts:25430
votes: 0


Aleister,

Nice post!

Here are some comments and additons:

Apache mod_rewrite [httpd.apache.org] uses Regular Expressions [etext.lib.virginia.edu] for pattern matching. In regular expressions, the period "." has a special meaning -- "match any character" by default. So if you wish to match a literal period in your pattern, you must escape the period by preceding it with a backslash.

In many server configurations, mod_rewrite mod_rewrite requires that either the FollowSymlinks or SymLinksIfOwnerMatch option be enabled in order to run. If neither are enabled, you will get a 500-Server Error response from your server for all requests! Luckily, the message in your server error log file will identify the problem quite clearly.

A shorter way to write the regex pattern "!^$" is to use a single "." instead. While the former pattern means "not blank," the latter means "any character." So the two are logically equivalent, but "." is shorter and faster to process. A minor point that won't matter on all but the busiest of servers.

With those changes in mind, the two examples become:


Options +FollowSymLinks
RewriteEngine on
RewriteCond %{HTTP_REFERER} .
RewriteCond %{HTTP_REFERER} !^http://(www\.)?yoursite\.com [NC]
RewriteRule \.(gif¦jpe?g)$ /images/hotlink.$1 [L]


Options +FollowSymLinks
RewriteEngine on
RewriteCond %{HTTP_REFERER} .
RewriteCond %{HTTP_REFERER} !^http://(www\.)?yoursite\.com [NC]
RewriteRule \.(gif¦jpe?g)$ - [NC,F]

Posting on this forum removes spaces under certain circumstances, and replaces the pipe character with a broken pipe. So if you copy code from this forum, be careful of required spaces in the mod_rewrite syntax, and always replace broken pipes "¦" with solid ones before use.

If you have problems while testing code like this, the first thing to do is to check your server error log. If your code contains syntax errors, the error log will often show you which line contains the error.

It is also critical to remember to flush your browser cache (Temporary Internet Files for IE users), after each and every change to access-control code like that above; If your browser has a cached copy of a page or an image, then it will not request that page or image from your server. And if it's not fetched from your server, then the .htaccess code cannot have any effect on the request. Failure to flush your cache will result in very confusing test results, and a lot of pulling of hair and gnashing of teeth.

You don't need three copies of the hotlink replacement image per se. What you need is hotlink replacement images in the correct format -- the same as the requested format. While *most* browsers will accept a gif if a jpg is requested and vice-versa, that behaviour is out of your controal and can't be guaranteed. So, you need one replacement image for all jpeg files, one for all jpg files, and one for all gif files. While both the first two would probably be in JFIF format, the last would be GIF89a, so you'd need at least two different format files.

Jim

10:15 pm on Dec 13, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:Aug 2, 2004
posts:96
votes: 0


Thanks for the very well written reply jd :) I will take the info into account!

As far as the replacement image thing, perhaps I did not write it as well as I could of.. I did mean what you said - a single image for each type - I was not trying to imply a replacement image for every single image on the server.. Thank goodness it doesnt have to be done like that or many (including myself) would go quite crazy :P

As I mentioned, I would like to add a mention of you if you like to the article (on my page).. want it to say (or link to) anything special?

10:52 pm on Dec 13, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 12, 2001
posts:1150
votes: 0


Just to be safe, could you guys show me what the "RewriteCond %{HTTP_REFERER}!^http://(www\.)?yoursite\.com [NC]" line is supposed to look like after a second site is added?
11:19 pm on Dec 13, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:Aug 2, 2004
posts:96
votes: 0


Just duplicate the line and adjust the text:


RewriteCond %{HTTP_REFERER}!^http://(www\.)?yoursite\.com [NC]
RewriteCond %{HTTP_REFERER}!^http://(www\.)?anothersite\.com [NC]
12:51 am on Dec 14, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 13, 2004
posts:1425
votes: 0


Looks really interesting!

I located the broken pipe key on my standard keyboard.
But, when I click on it ( ¦ ¦ ¦ 3 times) it shows up as a solid pipe on my screen.

Then when I preview this message, they become broken pipes again as you see here.

Where is the solid pipe on my keyboard? I looked all over and only find the broken one.

IF this key doesn't exist here, can I write TWO rewire conditions,
one for .gif and the other for .jpg?

- Larry

1:21 am on Dec 14, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:Aug 2, 2004
posts:96
votes: 0


When you post the code to the forum.. it shows a broken pipe..

You want to be sure to use solid pipes for your code. It is on your keyboard (SHIFT + backslash).

Your keyboard may have a broken pipe on the key itself, but it should show a solid pipe when you use it in a text editor such as notepad.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members