Protecting Semiologic Skin and Custom CSS Files

You may have spent hours tweaking your Semiologic skin, or perhaps paid someone to modify a skin or create a custom.css file to get your site just the way you want it.  But that day will come when you discover that someone else has a website that except for the content, looks exactly like yours. How did they do that.

Your skin file and custom.css file can be downloaded easily by anyone who can copy the URL form your source code.  They can then put it in their skin folder and along with using your graphics can make their site look exactly like yours.

The practice of using someone else's graphics while hosted on their website is called hotlinking.  You insert the URL of their image and when your page loads it gets the image from their site, thereby stealing their bandwidth.  Simply downloading a file, rather than hotlinking requires exactly the same setup.  It requires accessibility.  Take away the accessability and you diminish the incidence of hotlinking and copying of your valuable code and graphics.

The solution is to insert a rewrite rule into your .htaccess file which .prevents direct download of your files from other websites, instead routing them to a permission denied page.  Just insert the following code into your .htaccess file.  Place it at the end after everything else

RewriteEngine on
RewriteCond %{HTTP_REFERER} .
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?your website.com [NC]
RewriteRule \.(jpg|jpeg|png|gif|css)$ – [NC,F,L]
 

Substitute your site domain (example graphicalguru.com) for

'your website.com" in the above code  This will prevent both copying and hotlinking of your graphics files and your css files.   Graphics files can still be downloaded by right clicking and copying.

Larry