how to manage security with user added external css (like myspace)

Question

I've got a page which it has been requested I allow some user customization via CSS.

I'm happy to do this, but am trying to figure out how to make it secure. There aren't many stylesheets that will be applied to the page, but I had originally thought that if I just checked that the page was a css extension that I would be safe.

However, the research I have done shows that xss is easy to do through css. But i haven't been able to find any resouces on how to allow user generated external css to be included safely.

Does anybody have an suggestions or resources for this?

MySpace manages to do it, along with a few other sites, but I can't see how to ensure this will be secure.

I don't have any 'secure' user data on the page where the external css goes. But I do get a few variables for a search.

----------------additional data after sliky's response ----------------------

I am not planning on enabling every user to add an external css. However, the css variable can be set by special qualified users, and once that variable is availble, essentially anybody can set it as they please. The only method for getting that variable in use is to spread the URL themselves, so maybe I'm over concerned with the security, but I doubt it.

I can set it so that the page is not indexed with a external stylesheet, but am still concerned about how to maintain security for the end user.

I would have a link on my site where it would be http://mysite.com/page?useracct=12343&extcss=http://location/of/css.css

I set-up the useracct, so only where the users I allow to enable the different css have links created for their pages. On my site, I would link to that users account with the css page.

So somebody can't just come along and say http://mysite.com/page?extcss=http://new/dangerous/css.css

However, they could create the link http://mysite.com/page?useracct=12343&extcss=http://new/dangerous/css.css The only way somebody would get to that page would be if that person who created the dangerous css forwarded that link along.

I guess if I hashed and salted the extcss, it could be more secure. Maybe that is the best way to go?

Answer 1

Use a language that has a CSS library, or write a parser to build an AST-like structure from the CSS and then check for dodgy stuff.

This might be harder than it sounds, things like div sizes (engulfing the entire page), floating and z-orders will be tricky to manage and you may have to have bounds on the values you can provide.

a nice idea

Create an XML based theming schema that can be translated to CSS. Allow users to upload images+XML to generate a theme.

XML is simpler to control.

PHP CSS Parser, Python CSS parsing

Good Luck

Answer 2

While effectively having your own language for allowing the addition of CSS may seem good, you may still inevitably end up with the same problems as letting them just write anything (say loading external files, etc) and be in a world of hurt.

A better model, from a security point of view, is think over exactly what they will want to customise and let them only edit those things.

So you may provide abilities to set:

• Background colours
• Fonts
• Images for various things
• Etc

Twitter (last time I used it anyway) had a nice method for doing this, and the result is also that the site is customisable, yet maintains a standard look, which, IMHO, is great.

Answer 3

There are many ways that CSS can execute arbitrary JS. See

• http://code.google.com/p/google-caja/wiki/CssAllowsArbitraryCodeExecution
• http://code.google.com/p/google-caja/wiki/CssImportsAllowUnsanitizedCodeExecution
• http://code.google.com/p/google-caja/wiki/HistoryMining

If you need a flexible CSS parser and sanitizer, you can take a look at CssValidator and its associated tests show some of what it does: CssValidatorTest