Prevent Hotlinking of Image, Script, CSS etc Using .htaccess

by Binu George on April 13, 2011

in Website Optimization


How to prevent hotlinking to files like images , scripts and CSS is one of the challenges faced by website and blog owners. Image hotlinking is the most common hotlinking though hotlinking to scripts, CSS or any other file types are not uncommon.

What is Hotlinking?

Hot-linking is the process of linking an image or other non-html files that exists and hosted on another website instead of saving a copy of the image on the website that the picture will be shown on. Hotlinking refers to linking directly to non-html objects on other web servers, such as images, movie files, script file , CSS files etc.htaccess-hotlinking-prevent hotlinking

Impact of Hotlinking on your website and server

Hotlinking uses the bandwidth of the person who owns the website where the picture is hosted . When the website page (which is hotlinked to an image or script on your website) loads it actually gets the image or the script from your web server. This will increase the bandwidth usage of your web server and eventually you will face traffic issues, slow website and of course more billing from the hosting provider.Hotlinking can greatly impact bandwidth usage.

Prevent and Stop hotlinking using your .htaccess file

.htaccess file as we discussed (A guide and .htaccess tricks and tips )is used in Web servers most commonly Apache Web server. The .htaccess (hypertext access) is a a directory-level configuration file. Read How to create and use .htaccess file.   .htaccess file helps you in achieving decentralized management of web server configuration and to override a subset of the server’s global configuration like Website or Web page redirection , to specify your own error document or even to password protect web pages and directories .
Related :
Speed Up websites by enabling .htaccess Caching using mod_expires and mod_headers
Speed up website -Compress CSS/JavaScript using GZIP/DEFLATE compression – Optimization Tips -Part 2

Similarly you can configure your .htaccess file to disallow hotlinking or direct linking on your server resources. You need to add few few Rewrite Conditions and Rewrite Rules to the .htaccess file to prevent hotlinking and to rewrite requested URLs on the fly.
Remember that the mod_rewrite Apache Module should be enabled on your server to do this. This will be enabled in most of the cases.
Please add the below code to your servers .htaccess file to disallow hotlinking

1
2
3
4
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www.)yoursite.com/.*$ [NC]
RewriteRule .(gif|jpg|bmp|jpeg|zip|rar|mp3|mp4|flv|swf|xml|js|php|png|css|pdf)$ - [F]

In the above code replace “yoursite.com” with your website or blog name.

Serve different content when hot linking is detected

You can also server an alternate content from your webserver if the server detects any hotlinking. But remember that this will have an impact on your webserver bandwidth.

1
2
3
4
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www.)yoursite.com/.*$ [NC]
RewriteRule .(gif|jpg|bmp)$ http://www.yoursite.com/<em>myownimage</em>.gif [R,L]

The above configuration will serve “myownimage.gif” whenever a hotlinking to any “gif or jpgor bmp” image is detected by the web server.

, the author of Globinch.com, is a technology blogger and software architect. You can follow him on Twitter, Google+, Facebook. If you enjoyed reading the above article please consider sharing it.

Previous post:

Next post: