How to secure and block others from using and viewing your CSS styles

So I recently found out that another website out there was setting up a phishing site which looked identical to one of my other sites.  So of course, the first thing I did was changed my CSS files to another file name, but kept the old one and ONLY had the following definition in there:

body:before {
   content: 'This website is a scam!';
}

body {
   display: none;
}

 

So that took care of that… but now on to the part where we get secure…

Follow the following steps to setup your secure CSS styles:

  1. Create a php script (I called my get_styles.php) and put the following code in there:
    header("Content-type: text/css");
    
    $allowed_servers = array('http://yourdomain.com');
    
    $status_array = array();
    if (!empty($_SERVER['HTTP_REFERER']))
    {
    	foreach($allowed_servers as $server)
    	{
    		if (contains($server, $_SERVER['HTTP_REFERER']))
    		{
    			$status_array[] = 'ok';
    		}
    	}
    }
    
    if (!in_array('ok', $status_array))
    {
    	print "
    		body { display: none !important; }
    	";
    	exit;
    }
    
    // load the base / core files no matter what
    // These are the files which you want to load on a global level
    // A lot of sites typically have only one file called "styles.css" 
    // or something along those lines
    // I recommend calling it something else, most people would guess that
    // I called my below "global_styles.css"
    // Note: This script assumes it's located in the same directory as your CSS files
    $core_files = array('global_styles.css');
    foreach($core_files as $file)
    {
    	// get the contents
    	print file_get_contents(dirname(__FILE__) . '/' . $file) . "\n";
    }
    
    /**
    * Checks to see of a string contains a particular substring.
    *
    * @param $substring the substring to match
    * @param $string the string to search
    * @return true if $substring is found in $string, false otherwise
    */
    function contains($needle, $haystack)
    {
    	if (empty($needle)) { return false; }
    	$pos = strpos($haystack, $needle);
    	if($pos === false) { return false; }
    	else { return true; }
    }

     

  2. Once you have your script setup above, then next step is pretty simple.  Call your CSS file which you created above…
    <link href="/css/get_styles.php" rel="stylesheet" type="text/css" media="all" />

     

  3. If you try to access http://mydomain.com/css/get_styles.php you will find there are no css styles from being displayed.

Please note: There are still ways for people to find the generated styles by using developer tools such as Firebug.  I have some javascript which will detect if the Firebug consule is open and if it use, clear the body.  Contact me if you’d like that code too.

You may also want to require Javascript in order to load your CSS file as well.  Contact me on how to do this too 🙂

EDIT:

Based on feedback and questions on the firebug code, I’ll provide that here.

With jQuery:

    if (window.console && window.console.firebug) {
        $('body').html('');
    }

Without jQuery:

    if (window.console && window.console.firebug) {
        document.body.innerHTML = '';
    }

In order to require Javascript, you can do this in your main html or template file:

<noscript>
 For full functionality of this site it is necessary to enable JavaScript.
 Here are the <a href="http://www.enable-javascript.com/" target="_blank">
 instructions how to enable JavaScript in your web browser</a>.
</noscript>
LukeHow to secure and block others from using and viewing your CSS styles

Comments 11

  1. Dan

    Hey, I would love a copy of your Javascript for dealing with Firebug and CSS in javascript.

    I am still learning so any documentation would be fantastic.

    appreciated..

    Daniel

    1. Post
      Author
      Luke

      I will try to dig it up. And let you know if I find it. Sorry for the long delay on the reply. I was not getting emails for the longest time!

    2. Post
      Author
      Luke

      I’ve updated the past to contain the Javascript you’ve requested. Please see the update at the bottom of the post. Sorry for the delay.

  2. Raman

    Greetings. I too would appreciate receiving your JS code to clear the body if the Firebug console is open, as also the JS code to load CSS.
    Many thanks.
    Raman

    1. Post
      Author
      Luke

      I’ve updated the past to contain the Javascript you’ve requested. Please see the update at the bottom of the post. Sorry for the delay.

    1. Post
      Author
      Luke

      I’ve updated the past to contain the Javascript you’ve requested. Please see the update at the bottom of the post. Sorry for the delay.

  3. Brian

    Hi, I just came across this thread and have recently experienced a similar thing with somebody lifting the whole design of a site I created for a client. They didn’t take the css but keot the link to the clients so am about to follow your steps. I would also be interested in the additional javascript to detect firebug and also load the css.
    Thanks,
    Brian

    1. Post
      Author
      Luke

      I’ve updated the past to contain the Javascript you’ve requested. Please see the update at the bottom of the post. Sorry for the delay.

  4. Joe

    Trying to figure out why this isnt working for me:
    GIVEN: index.html, global_styles.css, get_styles.php; dir=public_html
    1. print file_get_contents( $file) . “\n”; //Is this ok since html, php and css are in same dir?
    2. I started get_styles.php code with //OK?
    3. How is ‘get_styles.php ‘ coded in the html file? Where?
    Thank You in advance!!

    1. Post
      Author
      Luke

      Hello Joe,

      There shouldn’t be a problem with all of them in the same directory. The only difference I see is the file_get_contents(). Just make sure you have the dirname(__FILE__) in there like this:

      print file_get_contents(dirname(__FILE__) . '/' . $file) . "\n";

      When you are ready to include your CSS file with everything in the same directory do this:

      <link href="get_styles.php" rel="stylesheet" type="text/css" media="all" />

      Notice I removed the /css/ in the href attribute.

      Let me know if that helps.

Leave a Reply

Your email address will not be published. Required fields are marked *