Smarter Way To Prevent Image Hotlinking with .htaccess

Have you noticed someone stealing your images, directly taking the URL and display on their websites without your permission? This is what we call image hotlinking. It is bad, as it not only stealing our images, it also take advantage of our bandwidths. Because it’s called directly from our server, every time the images are loaded on their webside it cost us bandwidths. Controlling via .htaccess is one of the most efficient way to prevent image hotlinking.

And by smarter way, we mean giving the webmaster more control on the .htaccess in terms of:

what sites to block
what sites to allow
allow/deny blank referrers
display custom images detecting image hotlinking
files to protect

Step 1 - Create .htaccess

If you’re currently not using any .htaccess in your web account you should be creating one. Open up notepad, save it as .htaccess without any extension behind. For those who already have an existing .htaccess file, download it to your local computer as we’ll be doing some editing in Step 2.

Step 2 - .htaccess hotlinking code

Paste this following code into your .htaccess.

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourdomain.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourdomain2.com [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ http://hpmouse.googlepages.com/hotlink.gif [NC,R,L]

Explanation

Line 2 - Allow blank referrers (recommended).

 
RewriteCond %{HTTP_REFERER} !^$

Some users surf under firewall and thus they are not providing any referrers information. Disallowing blank referrers will means blocking them from accessing these images. However if you want to block blank referrers, just delete line 2.

Line 3, Line 4 - Sites allowed to link your images.

 
 
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourdomain.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourdomain2.com [NC]

By default all sites are blocked from hotlinking. Only those specified by you are allowed to do so.

Line 5 - File format to block, custom blocking images.

 
 
 
 
RewriteRule \.(jpg|jpeg|png|gif)$ http://hpmouse.googlepages.com/hotlink.gif [NC,R,L]

In between the () are images you intended to block from hotlinking. To add more seperate them with”|”

Change ‘http://hpmouse.googlepages.com/hotlink.gif‘ to a image you’ve set, and whenever image hotlinking is detected, this image will show up. Just make sure where this image is not hotlink protected or your server can go into an endless loop.

If you like this entry, consider bookmarking or help us promote it. Thanks.
Del.icio.us | Stumble | Digg | Mixx | Reddit

Comments

Fachia July 11th, 2008

Very nice htaccess tutorial, thus we can save our bandwith. BTW, what about pages in subdirectories, are they still able to hotlink images protected..thx hongkiat
Reply
hongkiat July 11th, 2008

@Fachia Sub directories are protected as well.
Reply
demian July 12th, 2008

thanks for this info and tutorial
Yesterdat i’ve discovered this site, you’re in my bookmarck…excellent site and information shared

This is the first time that i’ve heard “.htaccess” file.. so per now i’ve two questions to do:
1- Is this valid to use in a simple html+css+javascrip site or it’s to a specific use like wordpress, php…or server type ??
2- “By default all sites are blocked from hotlinking. Only those specified by you are allowed to do so.”
How we can allow specific file or folder to be linked ?

Thanks!!
adeux from argentina
Reply
Shreemani July 12th, 2008

.htaccess has always been a topic of study for me to understand it better and better. this article will also be helpful for me, thanks.
Reply
Xavier July 12th, 2008

Nice tips! Really love it!
Reply
blacksnoopy July 13th, 2008

Thank you.
Reply
Simon July 13th, 2008

Nice information here, I was just thinking about doing something about hotlinking and *pop* you’re in my rss.
- RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourdomain2.com [NC]
These can be added and deleted right?
- Just make sure where this image is not hotlink protected or your server can go into an endless loop
What exactly does that mean. So it should be hosted somewhere else than on the protected domain? Or could one unprotect the specific link with this one here again: RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourdomain2.com [NC]?

Thanks a lot

P.S. Stumbled
Reply
hongkiat July 13th, 2008

@Simon Yes, the first one can be deleted. And you are right, the image should be host somewhere else.
Reply
Yonghwee July 13th, 2008

This is useful but is there a way to automatically block access to all images? Having to manually enter them one by one can be quite tiresome.
Reply
hongkiat July 13th, 2008

@Yonghwee You only have to do it once. That’s writing the .htaccess and place it on the root of your web directory.
Reply
devabby July 14th, 2008

cool and good tutorial , but i no need this since my hosting auto add .htaccess
Reply
oryzana July 16th, 2008

very detailed tutorial… now i know the purpose of .htaccess . tqvm
Reply
Libor Fikr July 17th, 2008

Thank you for your tip.
Reply
ipank July 17th, 2008

i still understand with what u all talking about:(

how poor am i…..hikzzzz
don’t know anything about HTML, CSS, javascript, bandwidths, hotlink, domain, and all other words ’bout internet :(
Reply
Glenndavid July 22nd, 2008

this is a really nice post, i never quit got the idea with .htaccess but you made it a little less cloudy :-)

great how the tuts are getting better in quality over time here at hongkiat :)

Glenn
Reply
Simon September 6th, 2008

I still haven’t got the hang out of it, how do you make sure the feeds show the pics? I’ve got idiots copying my whole site. At the same time unblocking SU with this didn’t work either:
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?stumbleupon.com [NC]

Any suggestions? Do I have to put in like the subdomains too?

Thanks for your help
Reply
DH October 8th, 2008

This method has been working for me well. Yet some sites seam to get around this still? Has anyone else had this problem?
Reply