Prevent Image Hotlinking With .htaccess and mod_rewrite

By  on  

One way to kill your website's bandwidth and overall download speed is to not block image "hotlinking." What's hotlinking? Hotlinking is linking to a file on an external server that the Web Developer does not own (most of the time the Web Developer doesn't even have permission to use the file). Hot linking occurs mostly with images.

Why would another website hotlink to a file on your server? There are a variety of reasons, both innocent and evil:

  • To use up the other website's bandwidth / save your bandwidth (evil)
  • To link to an oft-changing file so that the file is always up to date on your website (mostly innocent)
  • Laziness (both)

How can this be prevented? Relatively easily using some quick .htaccess directives.

The Code

The following prevents any domain beside yours from hotlinking:

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www.)?yourwebdomain.com(/)?.*$ [NC]

The following allows only a friend to hotlink -- everyone else is barred:

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www.)?yourwebdomain.com(/)?.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://(www.)?friend1domain.com(/)?.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://(www.)?friend2domain.com(/)?.*$ [NC]

The following allows for protection of only specified file extensions:

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www.)?yourwebdomain.com(/)?.*$ [NC]
RewriteRule .*.(gif|jpe?g)$ [F,NC]

The following returns a "stop stealing my images" image:

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www.)?yourwebdomain.com(/)?.*$ [NC]
RewriteRule .(gif|jpe?g|png|bmp)$ /graphics/stop-stealing.jpg [L,NC]

You can use the above coding practices to prevents thievery of any type of file you'd like, including CSS, JavaScript, and text files.

Recent Features

  • By
    CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

  • By
    Send Text Messages with PHP

    Kids these days, I tell ya.  All they care about is the technology.  The video games.  The bottled water.  Oh, and the texting, always the texting.  Back in my day, all we had was...OK, I had all of these things too.  But I still don't get...

Incredible Demos

  • By
    Link Nudging with CSS3 Animations

    One of the more popular and simple effects I've featured on this blog over the past year has been linking nudging.  I've created this effect with three flavors of JavaScript:  MooTools, jQuery, and even the Dojo Toolkit.  Luckily CSS3 (almost) allows us to ditch...

  • By
    CSS Triangles

    I was recently redesigning my website and wanted to create tooltips.  Making that was easy but I also wanted my tooltips to feature the a triangular pointer.  I'm a disaster when it comes to images and the prospect of needing to make an image for...

Discussion

  1. Nicely done!

  2. Brill, I appreciate this may be an old post, but its the answer I needed to fix my lil hotlinking problem so I thought I should say ta …

    TA!!

  3. Perhaps you could help. I’m trying to simplify for some of my clients moving to a cdn platform. for dev I’m using google app engine, just becasue, but files on the prod cdn will be served up the same way. Issue – we would to use .htaccess to have css|js|gif|jpg etc.. files be taken from the cdn by rewrite of the request, so we don’t need to change all the php and related files.

    IE.

    page is rendered with like to image http://example.com/images/image.gif

    but the image should be served from http://example-cdn.com/images/image.gif

    the folder sturcture could remain the same, just the domain would change from example.com to example-cdn.com

    Any idea’s?

  4. Jorge

    Hi, I’m looking at a solution like the one that replaces the images with a generic one (i.e. “stop stealing my images”).
    Can you clarify why it’s not going into an infinite loop? since it’s redirecting to *another* .jpg file -wouldn’t this create infinite redirects to the same image? –thanks!

    RewriteEngine on
    RewriteCond %{HTTP_REFERER} !^$
    RewriteCond %{HTTP_REFERER} !^http://(www.)?yourwebdomain.com(/)?.*$ [NC]
    RewriteRule .(gif|jpe?g|png|bmp)$ /graphics/stop-stealing.jpg [L,NC]
    

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!