Hiding your CSS -

Koobi

01-19-2005, 07:26 AM

Not that I really mind anyone viewing any CSS layouts I create but with all the ripping that's going around these days, I feel like I have to hide some things. So, I ended up writing this little PHP snippet that I would like to share with you guys...I'm sure this has done before but I can't find it on the web so I wrote my own.

How it works
What this snippet does is, it checks if either:
* the referrer is actually the X/HTML file that calls the CSS
* the user agent of what is accessing the CSS is an allowed one.

If the agent that is attempting to view the CSS is an allowed one, your CSS will display as usual, otherwise, in the place of a CSS file, an HTML-type page renders and you can display the message of your choice there and the use of X/HTML tags are permitted.

What is a user agent?
A user agent, to put it simply, is an identity value that browser types have. This identity value may vary among versions of browsers of one type (eg, Mozilla Firefox 1.0 has a different user agent from that of Mozilla Firefox 0.9 although they are similar but the user agent for MSIE greatly differs from the Mozilla user agents).

Instructions:
* The CSS file must have a .php extension so that it is parsed as PHP (or you can configure your server to parse CSS as PHP)
* The following code must be at the top of your CSS file:

<?php
/********************************************************\
* Please leave these comments intact.
*
* @author Housni Yakoob <baneATkoobi-studioDOTcom>
* @url http://www.koobi-studio.com/
* @date 2005-January-19
* @version 1.0.0
\********************************************************/

/************************************\
* Begin editing from here onwards. *
\************************************/
/**
* Allowed user agents.
* Every type of browser has a special ID called a user agent
* and all browsers that have the user agents within the array
* below can access the CSS.
*
* The user agent entered below is that of the CSS validator.
* see: http://jigsaw.w3.org/css-validator/
**/
$allowAgent = array('Jigsaw/2.2.3 W3C_CSS_Validator_JFouffa/2.0');

/**
* The absolute URI of the X/HTML that can access this CSS.
**/
$callingFile = 'http://mySite.com/myFolder/mySubFolder/';

/**
* The message to display when unauthorzed users attempt to
* view your CSS.
* You can use X/HTML tags here since the MIME type of the
* file is HTML (text/html)
**/
$errorMsg = '
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Error</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="all">

</style>
</head>
<body>
You are unwanted here.
</body>
</html>
';
/***********************************\
* Stop editing from here onwards. *
\***********************************/

$prePend = reset(explode('/', end(explode('http://', $_SERVER['HTTP_REFERER']))));
$refUri = (substr($prePend, 0, 4) === 'www.') ? substr($prePend, 4) : $prePend;
if( ($_SERVER['HTTP_REFERER'] === $callingFile) || (in_array($_SERVER['HTTP_USER_AGENT'], $allowAgent)) )
{
header('Content-type: text/css');
}
else
{
header('Content-type: text/html');
die($errorMsg);
}
?>

Now, make sure that code is right at the top of your CSS. Not even a line break, or a blank space or a single character can be output to the browser. The PHP tag (<?php) must be the first character of the first line on the first column of your CSS or you will recieve an error telling you that headers have already been sent.

* Within your X/HTML document, simply link to the CSS file (with the PHP extension) as you would any other.
Example (assuming the name of the CSS file is style.css.php):

<style type="text/css" media="all">@import "style.css.php";</style>

Extra:
As you can see, my variable $allowAgent holds something called the User agent. That is the user agent of the CSS validator most of us are familiar with.
I have added that so that the validator also sees the CSS, otherwise the CSS will be hidden from the validator as well. If there are other validator's user agents that you would like to add to that list so they they can validate your CSS, simply enter their user agents. If you are unsure how to get the user agent of an agent, contact me via PM or by posting here.

Keep in mind that if someone really wants to view your CSS, they can. There are many ways...this might just keep the not so bright ones guessing :D

Hope this helps :)
Sorry for the long post :D

Jeff O.

01-19-2005, 08:32 AM

Dude, You are truly a "Geek's Geek". ;)
Very cool technique. Like you said, this will at least slow down the average ripper. :)

Arch Stanton

01-19-2005, 09:24 AM

Well, a person can always grab it out of their cache.

Some other things you can do to make it a real pain in the ass to use (which will also give your css a smaller file size):

Remove extra spaces and new lines.

Use vague id's and class names in your decalrations.

Use combined properties whenever possible like this:

border: 5px blue double;

I don't think you should "hide" your source code however. It is truly impossible to hide it entirely, and maybe thats for a reason. The only reason we can even create web pages is because people have gone through the trouble to create html and css standards and allow us to use them for free.

On the other hand, optimizing your code for faster load times is very good thing.

Koobi

01-19-2005, 09:50 AM

Dude, You are truly a "Geek's Geek". ;)
Very cool technique. Like you said, this will at least slow down the average ripper. :)

heh heh the only thing that comes close to being as hot as PHP is Peta Wilson :D

Well, a person can always grab it out of their cache.

Yeah, there's a whole load of ways they can grab my CSS but if it's either a really lazy guy or someone who doesn't realize that to view most pages, they need to have the files on ther PC somewhere (locally) then they would probably fail in copying my CSS.
But there's also some headers you can send to the browser so that the files are not viewable offline. So a dialup user might find it too bothersome to try and copy anything there.
But, yeah, there's many ways they can grab my CSS as I've said at the bottom of my post: :D
Keep in mind that if someone really wants to view your CSS, they can. There are many ways...this might just keep the not so bright ones guessing :D

Some other things you can do to make it a real pain in the ass to use (which will also give your css a smaller file size):

Remove extra spaces and new lines.

There's actually a PHP script that does this for PHP code. It parses your PHP script, removes spaces, tabs, etc. Of course this means you might have to adopt a certain style of coding, especially when using comments (eg: you can't use // comments, instead you would have to use /**/).

We can always create a PHP script that reads in the CSS, removes new line characters (\r or \n) and tab characters (\t), etc.

I don't think you should "hide" your source code however. It is truly impossible to hide it entirely, and maybe thats for a reason. The only reason we can even create web pages is because people have gone through the trouble to create html and css standards and allow us to use them for free.

oh I would love to share my code with people but some people cross that line when they copy EVERYTHING, like the CSS, HTML and the images and just change a few things and call it their own. A few months later, you get a call from an angry client saying there's another site that looks like his and you find out that that person has ripped your site.
I don't mind sharing my code at all (from PHP to CSS to C++) as long as people don't claim credit when it's not theirs to claim, that's why I resorted to this. I would prefer to not hide my CSS than hide it, but that hasn't worked out too well for me in the past :/

Octane

01-19-2005, 12:55 PM

what happens when you do a "save as" from the browser from a page using this script?

Koobi

01-24-2005, 02:22 PM

It doesn't save the CSS via Firefox or IE because I'm using import but if you use the link method, it will probably save the CSS but like I said this is just meant to throw off the oblivious rippers heh heh

Here's a link to a sample page:
http://koobi-studio.com/downloads/php/snippets/hideCss/

There's a bug in my code someone pointed out...well not a bug, just the way browsers work with HTTP.

What happens is, if you view my CSS, you get that error message, but if you hit the back button, your page is styleless.

The thing is, when you view your CSS, I set my MIME type as HTML to display the message (of course you can just leave your MIME be and display a tiny non formatted message with the CSS MIME) and when you hit the Back button, you end up at the original page but sicne my CSS now has a HTML MIME, the cached CSS is considered HTML in its MIME which is why the styles are not read. The problem is that when you hit the back button, you don't trigger another request to the server, you browser loads a cache copy with the last header resident (in this case, if you browse the pages in the order I mentioned, the CSS ends up having an HTML MIME).

I'm trying to figure this out. Is there a way to trigger sending headers based on what buttons were hit accross all browsers? I doubt there is but I can hope, right? :D

Anyway, I will post a solution as soon as I find one...actually this isn't such a big issue in my eyes. but it's always nice to have things working as if things are normal.