The Other FIR / Protected CSS

I want to thank everyone for their kind and inquisitive words the past few days. It’s a great feeling to have my work shared and appreciated by so many of my peers. I’m really excited about this new Flash Image Replacement technique. I have received numerous questions about it and I am currently writing an article explaining how it’s done. I am still refining the technique (clearing up a caching issue, addressing the fact that IE make a mess of the DOM tree when reinserting the Flash object and making it more portable) but I hope to have the article polished up sometime this weekend. (Initial stab at explaining the technnique here and a superior revision here.)

People have also been asking how I protected my CSS source while at the same time serving styles to the browser. Let me say first that this was only an experiment (that has since been disabled) and that having access to other’s CSS (and HTML and JavaScript) has always been an invaluable learning resource. After reflecting on this for a day or two I realized that I did this because I could—without considering whether or not I should.

The safety was created with some simple php. First, we change the name of the imported stylesheet from modern.css to modern.php and add a content-type header like so:

<?php header('Content-type: text/css'); ?>

Then we check to see if the page is being accessed directly by looking for the presence of this domain in the referrer. If there is no referrer then we know the file is being access directly.

<?php if (!eregi("shauninman.com",$HTTP_REFERER)) { ?>
/* Insert comment to the inquisitive */
<?php } else { ?>
/* Insert CSS or additional imports */
<?php } ?>

The only failing of this technique is actually one of CSS’ greatest boons—browsers are supposed to cache external stylesheets. One way around this trick is to visit the site, then load the css directly. You will see just the message without the styles. Hit the back button and you’ll see the unstyled site (because the browser has cached the empty stylesheet). Then refresh and hit your forward button. The refresh forces the browser to cache the version with the stylesheets included and pressing forward allows you to view that cached version.

A simpler way to access the imported stylesheets is to view your browser’s Activity log (Safari) or by using the stylesheet DOM inspector (FireFox).

So this technique achieves nothing besides making it a little more difficult for novices—those who would really benefit from the peak—to examine your CSS.

Previous
T:SNLG Tee Now Available
Next
Pigment
Author
Shaun Inman
Posted
February 17th, 2004 at 11:27 am
Categories
The Site
CSS
Design
JavaScript
PHP
Comments
014 (Now closed)

014 Comments

001

Keep up the awesome work Shaun. I’m very excited about your F(lash)IR technique. It was fun to realize the idea you presented and to trace its steps. I look forward to the documentation.

How do you account for special characters or HTML in the title? For example I tried, the following with your .swf to no avail:

h1=Trademark&trade; h1=Service%20Mark%3Csup%3ESM%3C/sup%3E h1=Trademark%26#153

Author
France
Posted
Feb 17th, 2004 8:55 am
002

Two things I did to modify your code above to add a layer of pseudo-security ;)

1) Put the *.php file in a directory called ‘public’ or whatever - something to hide the name of your css directory.

2) Instead of loading the page in your browser with the warning text, redirect the user permanantly to some other page.

<?php

// don’t access me directly -> rewrite to base url if ($_SERVER[‘HTTP_REFERER’]==”“) { header(“HTTP/1.1 301 Moved Permanently”); header(“Location: /”); die(); }

header(“Content-type: text/css”); echo “@import “../_css/default.css”;”;

?>

This way, if the user clicks back & then forward again they’ll just end up back at your homepage everytime.

Once again - this isn’t very secure at all, considering you can just use a ‘view styles’ bookmarklet or view the cached version. But if someone really really wants to add a layer of obfuscation - this’ll help. For me, I’ll just leave ‘em out in the open. Thanks for all your interesting ideas!

Author
andrew
Posted
Feb 17th, 2004 11:04 am
003

Hey Shaun,

Impressive stuff. Someone in our forums noticed that your type was really smooth and wanted to know how it was done. We took a look and nearly missed your ‘slight of hand’ but fortunately you can see the object code if you ‘view selection source ’ in Firefox which gave it away. sitepoint.com/forums/showthread.php?p=1 … ost1109725

I’m sure we’d love to publish some thing along these lines if you’re interested.

Author
Alex
Posted
Feb 17th, 2004 1:39 pm
004

Well France, as it turns out, the text field in the H1 .swf is not HTML-enabled—not that you would have had much luck with the trademark symbol anyways. I’ve only been able to get basic, stuff like &amp; and &copy; to work in my tests.

Andrew, that is a clever approach. Have you tested it? Does the 301 automatically prevent caching? If not, what’s to stop the site from attempting to load the cached homepage as CSS? This is one of those solutions that I would really never use but I do find the logic interesting.

And thanks Alex. I would be interested in sharing the tutorial once it’s written.

Author
Shaun Inman
Posted
Feb 17th, 2004 5:37 pm
005

I’ve got a live example here. Seems to work for me, although it’d be interesting to see how it behaves with other people’s setup.

Author
andrew
Posted
Feb 18th, 2004 1:49 pm
006

Hmm, works a charm in Safari 1.2 and IE 5.2.2. Works partially in FireFox 0.8 and Camino 0.7 on OS X—the main page reloads sans styles. Opera 6.03 completely gives up the goods. Even upon refreshing I’m still looking at the @import to the real stylesheet.

One note on the comments on your page. It says that the EditCSS extension is required to snoop styles. Actually you can just use the DOM inspector in FireFox. It has a stylesheet viewer that shows the nested structure of imported or linked styles.

Author
Shaun Inman
Posted
Feb 18th, 2004 2:53 pm
007

Yeah - the more I check it out in other browsers, the more I think it’s interesting but near pointless. There are just so many other ways to get the cached version. It’s a darn good attempt though.

I believe there are better ways to go about this strategy, such as abstracting your CSS, so that professionals (the least likely to steal your styles) would be most likely to able to read it. This of course has its drawbacks as well in the form of weightier CSS files.

However, either way I believe more accessible is better than less when it comes to CSS, and this includes view source.

Author
andrew
Posted
Feb 18th, 2004 4:56 pm
008

Oooh, this is neat. Fun to play with, too.

Author
Raena Armitage
Posted
Feb 19th, 2004 12:14 am
009

Not that I would do this myself, but I think this would give you the same pseudo hidden style sheet and give you the ability to still have the browser cache the CSS file.

If you merly used PHP to redirect to the actual style sheet instead of PHP serving the styles themselves, the browser should still cache the page at the real address while the real address would be hidden from the user.

Author
Jason
Posted
Feb 19th, 2004 5:21 am
010

This is so ridiculous, hiding CSS. I mean seriously, you all are taking yourselves way too seriously. CSS is a friggin’ standard for christ sakes, not some piece of art.

Shaun you are on the right track opening your CSS up to people. You are serving the greater good, people will learn, will be inspired, will do good things. There will always be a few jackasses who lift your stuff. Karma will bite them in the ass someday.

Author
Will Hung
Posted
Feb 19th, 2004 5:41 pm
011

Like I mentioned before, I’m not concerned with people viewing my source. And I don’t think I’m doing anything too groundbreaking as far as layouts or hacks go—wait a minute, THE Will Hung? Okay, no joke? I don’t follow the whole American Idol thing but when Entourage went off notifying me of the previous comment I was actually downloading the “She Bangs” clip!

Joke or no joke, what are the freakin’ chances?

Author
Shaun Inman
Posted
Feb 19th, 2004 5:53 pm
012

Wow, I’m really impressed by your Flash-Image-Replacement ! I’m really looking forward to see the tutorial at ALA. For me this is for sure a kind of a ground-breaking issue…

Author
Henrik
Posted
Feb 26th, 2004 12:53 am
013

I was like wow when I saw the text anti aliased and still selectable… it had me frantically trying to find out how it was done lol. Nice work Shaun keep it up.

Author
Khalil
Posted
Mar 24th, 2004 8:18 pm
014

Oh boy, I can’t wait for the tutorial! Come on, you’re driving me crazy!

Author
Hans
Posted
Apr 4th, 2004 1:22 pm