How To Protect Your Website Template and CSS Files From Theft

Many website owners and developers will have experienced some type of template theft in their internet career, cases range from simply stealing CSS to an entire websites template being ripped and recreated. More often than not it an error on the website owners part as the leave entire template directories browse able, this allows others to freely look at their HTML and CSS and copy any parts they would like. Today’s article will show you some ways to protect your website themes / templates, no solution is foolproof but the one’s we will show you help make it as difficult as possible for any would be template trolls to rip your html or css.

In Feburary we wrote an article titled “How To Protect Your Custom Pligg Template TPL Smarty Files” specifically aimed at smarty .tpl file template theft, if you own a pligg site it’s an article you wont want to miss. The methods we use to protect smarty files with .htaccess can be extended to virtually any template system including plain old html. This should be the basic first step you take to protecting your template directory from being open to anyone for browsing.

We have also had some requests lately asking if there is anyway to protect .css files from theft or unwanted browsing. CSS files can be opened and read by anyone as long as they have a direct url to the css files location on your web server, this allows unwanted guest’s to browse and copy any code they wish from you CSS.

How do you stop users being able to open CSS files then? nice one studios has written a great tutorial detailing how to hide css files from being browsed. It’s worth noting this is an experimental technique and should be tested first before any live implementation.

How It Works

In the index file, before we include the CSS file, we’re setting a key (using sessions) and in the CSS file, we check if the key is set and if it’s not, we make it stop executing the code so it wont output any CSS. And if the key is set, we output the CSS code and change the key to something else.

So basicly, the CSS file won’t work without the index file, because that’s where the key is set.

In other words a user can no longer simply open and browse your css files from their web browsers, even if they have the direct url which they wont be recognized now.

Tutorial: CSS File Protection Using php key (sessions)

Hopefully this should give you a few ideas relating to template security, also let us know your results if you try the css protection method.

If you enjoyed this post, make sure you subscribe to my RSS feed!

Article Details

#

Author: on July 27th, 2008

Category: CSS

Tags: , , , , ,

  1. Don’t You understand that You have to send CSS content to browser anyway? And when it’s in browser user can do whatever he want – for example save and reuse (steal).

    So this cumbersome hack will not show CSS code when You fetch file directly from webserver. But Firebug will have all CSS stored in HTTP responses. Or You can use some debugging proxy like Fiddler or Charles, or even network sniffer to get whole CSS file.

    If You want to prevent from direct linking CSS files and other assets You can use just .httpaccess and scan HTTP_REFERER. As result Your site will work for clients with cookies disabled – PHP session requires cookies to be enabled, so with them disabled user won’t get CSS.

  2. Jash Sayani says:

    Nice article !

    Any way to break through this ??

  3. praveen says:

    Nice idea! but as Witold said, CSS file can be viewd using “web developer toolbar” or any similar firefox extension.

  4. 46Bit says:

    An awful solution, Witold Rugowski. Many antivirus packages strip out the referrer from the http request – you’d be making the css invisible to them.

  1. Ribbons of Red: Journal » Blog Archive » Reporting and Preventing Website Hijacking
  2. Freelance Students » Blog Archive » How to Prevent Hijackers from Ripping Off Your Website
  3. How to Prevent Hijackers from Ripping Off Your Website – FreelanceSwitch