?
Solved

How do I hide (obfuscate) css so that others cannot copy it?

Posted on 2008-09-03
23
Medium Priority
?
964 Views
Last Modified: 2012-08-14
Is there a way to hide my css file so that people cannot read or copy it?
0
Comment
Question by:anAppBuilder
  • 11
  • 5
  • 3
  • +3
23 Comments
 
LVL 24

Accepted Solution

by:
glcummins earned 500 total points
ID: 22384092
The simple answer is: you don't.

Every time your page is requested, your web server sends a copy of your website and CSS to the client's browser. The browser must be able to interpret your HTML and CSS and render a valid image of your page. Your CSS must be in a valid, standard format for the browser to be able to use it. Therefore, a user will be able to read it as well.

However, if you really want to do something like this, you can skip the external stylesheet entirely, and edit all of your styles via Javascript. Then run your Javascript through one of the many available obfuscators, and you have hidden your styles (at least to the casual observor).

Finally, one must ask: why would you want to do this? Do you believe that your CSS is so good that it should be proprietary? Are you styling divs and buttons in exciting new ways that no one ever has before? Perhaps you should take a look at http://www.csszengarden.com , and see some of the types of styles that professional designers share with the world every day.
0
 
LVL 30

Assisted Solution

by:VirusMinus
VirusMinus earned 500 total points
ID: 22384512
the more correct answer would be: you CAN'T not with any certainty anyway.

a novice may find it hard to get to your CSS and an expert may find it hard, but given enough time and resources anyone can eventually see it.

With tools like firebug I doubt you can be satisfied even if you did manage to protect your CSS :)

Having said that, have a read of some of these:
http://www.htmlguardian.org/protect-css.html (click on protect css on the left)
http://forums.digitalpoint.com/showthread.php?t=12096
http://www.n1studios.net/tutorials/php/css-file-protection.html

and I am with glcummins on wanting to know why you would want to hide this?


0
 
LVL 44

Assisted Solution

by:scrathcyboy
scrathcyboy earned 500 total points
ID: 22384537
When we are starting out with HTML web design and CSS styling, and especially javascript, we all tend to think our code is unique, proprietary and valuable -- until we learn more, and then realize that everything we did has actually been done before.  It is unlikely that you have anything unique or not thought of before --

but if you do, the best way to "hide" the CSS is to NOT put it in a separate file -- put all the CSS inline in the HTML document.  Sure it makes the document longer, but it is also a deterrent.  If you remove ALL the spaces from HTML coding, and have all CSS listed inline for each table, DIV or other page element, it is such a "hassle" to try to extract it, that essentially 100% of people will never bother, it is just too much hassle.

That is about as good as you can do.  Remember, when a web browser has rendered ("captured") all parts of a web page, including a separate CSS file, where it is easiest to get all of it in one shot -- there is no way you can stop the user from getting all parts of the web page.  They are in the browser and its cache, and anyone can save those files, or download your entire website, CSS, images, pages and all.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 30

Expert Comment

by:VirusMinus
ID: 22384648
using firebug like i mentioned above, even with scrathcyboy's method I could still get at the CSS very easily.
and using inline CSS won't allow you to do things like :hover methods so its pretty useless in my book.
0
 
LVL 29

Assisted Solution

by:Badotz
Badotz earned 500 total points
ID: 22386204
>>and using inline CSS won't allow you to do things like :hover methods so its pretty useless in my book.

As well as being a nightmare to maintain.

When you have to change the background colors of all of your <span> elements, you will rue the day you decided to "inline" your CSS.
0
 

Author Closing Comment

by:anAppBuilder
ID: 31493033
Thank you all.  Knowing what you can't do is valuable, too.
0
 
LVL 29

Expert Comment

by:Badotz
ID: 22404387
No worries - glad to help.
0
 
LVL 3

Expert Comment

by:nifmcm
ID: 22496968
i have seen the question "why do you want to do this?" asked so many times on so many forums and nobody bothers to answer. so, i thought i would answer for my own reasons for wanting to do this.

i own a company that moves brands into the online environment. one of our main focuses is to design and then create html templates for clients who then hand them onto developers who apply them in different cms systems.
and one of our biggest problems is that once we put our templates live for the client to view and approve they have immediate access to our code. and if all clients were trustworthy souls, well, it'd be a lovely world to live in... but, sadly, they are not. and so, after snatching the code they delay and delay payment to the degree that money we rely on just ain't available!
sadly, we cannot enforce payment before the client is happy with the job we have done and so we are forced to put it live.

and so, our only solution would be to make it as difficult as possible for them to utilise what they snatch until such time as they have actually approved and payed for the job we have done.

i don't think it is a case of people thinking their code is special etc... i think it is just a matter of really needing to get payed!
0
 
LVL 29

Expert Comment

by:Badotz
ID: 22498873
>>sadly, we cannot enforce payment before the client is happy with the job we have done and so we are forced to put it live.

Well, correct me if I'm wrong, but isn't this the real problem?

The issue of protecting your creations is covered under various aspects of the law (or should be).

The fact that is that once you put somethng on the web, it is difficult to hide it. There are ways to hide aspects of a site - server-side code is much harder to get at - but the end result, the client-side stuff, is visible to all.

Either you accept that or you will be in constant sorrow.
0
 
LVL 24

Expert Comment

by:glcummins
ID: 22499070
In a retail environment, restrictions are placed on how you can handle a product before you purchase it. For example, you cannot leave a shoe store while wearing an un-purchased pair of shoes. You can handle a display gun, but you cannot load or fire it.

Similarly, access controls can be placed on a web-centric product before purchase. You can provide the customer with screenshots. You can place your code on a server that can only be accessed from your office. You can set up a remotely-controlled box that has direct access to your server so that the customer can fully access your product, but only from your well-controlled remote box.

All of these options are an inconvenience to the customer, but no more so that the restrictions placed on a retail shopper. You will need to decide what level of access to give to your customers before the money changes hands.
0
 
LVL 29

Expert Comment

by:Badotz
ID: 22499321
>>You can provide the customer with screenshots.

This idea has merit.

>>You can place your code on a server that can only be accessed from your office.

This - not so much. What if the client is in Serbia and your offices are in Cleveland? Who gets to travel?

>>You can set up a remotely-controlled box that has direct access to your server so that the customer can fully access your product, but only from your well-controlled remote box.

Doesn't this just shift the problem to a different system? How do you hide what this web presents? If you could, there would be no need for this (pointless? useless? futile?) subterfuge.
0
 
LVL 24

Expert Comment

by:glcummins
ID: 22499401
#2 would only work if physical access was easily obtained. You are correct that it would not be convenient if the coder and client are widely separated.

#3 works like this: I set up a system that can be accessed via VNC or some other remote-control software. My client logs onto that system, and now I can control all of his actions (such as copying text, FTPing files, etc) to ensure that no code is copied off the system. He can now interact freely with the demo site, but cannot copy anything to any location other than the VNC machine.
0
 
LVL 29

Expert Comment

by:Badotz
ID: 22499509
>>#3 works like this:

If you present information to a client that is viewed with a browser, then there is nothing you can do to prevent them from viewing the source of the page, and possibly gaining access to other files. If there were, we wouldn't be having this discussion.
0
 
LVL 24

Expert Comment

by:glcummins
ID: 22499521
Yes, I understand. They can view anything they want. However, copying the contents of the files verbatim would be made much more difficult.
0
 
LVL 29

Expert Comment

by:Badotz
ID: 22499578
>>However, copying the contents of the files verbatim would be made much more difficult.

Right, but that is the problem the Asker wished to eliminate: the ability to copy "his" files from a browser. Or to somehow "protect" them from view.
0
 
LVL 24

Expert Comment

by:glcummins
ID: 22499665
Yes. We all agreed that it would be impossible to completely eliminate the threat. My goal is to simply provide the asker (and others) with possibilities to reduce the threat. Just as a retail store still experiences shoplifting from time to time, there is the possibility of theft here as well. Our goal is to make that theft as difficult as possible, while still serving the customer's needs.
0
 
LVL 29

Expert Comment

by:Badotz
ID: 22500051
>>Our goal is to make that theft as difficult as possible, while still serving the customer's needs.

Do not include me in that "our". It is not my goal.

The topic seems to have been derailed into the realm of philosophy - or worse, a "belief system" - which, as far as I am concerned, is the root of all evil, and pointless to discuss.
0
 
LVL 3

Expert Comment

by:nifmcm
ID: 22508748
wow! didn't realise this would cause such a hoo-hah!
thanks for all the replies!

re: screenshot... unfortunately for us, the thing the client wants is our code and a screenshot is no proof we have actually delivered what they want... we could just have plopped a jpg into a browser for all they know... they want to be able to interact with it... make sure it works in the browsers specified for the job... view the source (yep... defeats the purpose of obsfucating the css - unless we obsfucate the css and most of the html and allow them to simply view snippets).

my thoughts were to take a copy to client on a laptop so they can view it working, but not copy it... but, this poses a few problems... one of which is that some of our clients are not within driving range... in fact, some are not even on the same continent.
the next issue is that this would only give the client about half an hour to look at everything as we couldn't really sit all day in his/her office with him/her... or vice versa (we have a small office that doesn't cater for having clients and their developers hanging about all day!)

regarding the law... yep, client's shouldn't do what they do and the law should protect us... however, the reality is that it'll cost us as much as the job is worth just to pursue it with lawyers notes etc. plus it takes time... and the point is more that we want clients paying on time and not that the client ultimately steals our code. we have a fairly small business at this point and we rely on prompt payments every month in order to keep going. our biggest issue is that once the client has the code, they feel no sense of urgency to make the payments. this then puts us in a pickle as we end up having to take loans to cover our own expenses each month while we try to cajole the money out of the clients (which generally we do manage to do... but sometimes only after about 1 - 2 months).
not all of our clients are like this, but it only takes one or two to delay payment before we are stressing.

thus our great desire for a way to protect code until such time as client has payed in full as it'll force them to do so on time!

but, as i am finding, this seems not to be an easy task. but i do appreciate all the ideas put forth here and if i ever figure out a good foolproof way of doing this i'll let y'all know :)
0
 
LVL 29

Expert Comment

by:Badotz
ID: 22508801
So tell your prospective clients the price is $5,000 and you require half ($2,500) up front - for development costs, etc.

When you deliver the project, offer them a 50% discount ($2,500). It's a win-win situation.
0
 
LVL 29

Expert Comment

by:Badotz
ID: 22508814
I mean if the cost of the project is $2,500, double it and use that as the base cost. Then ask for the 50% payment.

If the client turns out to be a p.i.t.a., don't offer the discount.
0
 
LVL 3

Expert Comment

by:nifmcm
ID: 22508824
hehe:) except our clients wouldn't pay double what we charge in the first place... if they would we'd be rich by now!!! :)

we do take 50% upfront anyway, but we need that other 50% too.
0
 
LVL 29

Expert Comment

by:Badotz
ID: 22508850
How do you know what your clients will pay?

If 50% is too steep, add 1/3 of the base price to the total price, or 1/4.

They either want what you have or they don't.
0
 
LVL 29

Expert Comment

by:Badotz
ID: 22508855
Whatever, that is far easier than trying to hide your work from them.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
Suggested Courses
Course of the Month15 days, 14 hours left to enroll

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question