Check/Verify if user-provided CSS is not evil
https://stackoverflow.com/questions/1809059
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
I would like to allow my webapp users to save custom CSS through a text field to modify the look of their GUI.
I guess there are some evil CSS hacks out there. What should I take care about?
Solution
One solution would be for you to provide the user options through some editor, allowing them to pick colour/size of various elements. Then generate the CSS yourself based on the options the user has provided.
This would prevent any nonstandard CSS, or CSS you do not wish to use to be saved.
OTHER TIPS
There's exactly one thing, that I could think of: CSS expressions (that are, however, only evaluated in IE). These allow for JavaScript in CSS files, so I would strip anything like
property: expression(...);
or simply throw an "Not allowed" error.
But then, if you deliver the CSS back to exactly the user that put it in in the first place, he is responsible, if he himself introduces an XSS vulnerability.
In any other case: Use Zeus' solution.
If you are allowing users to directly include custom-built CSS on your site, you are asking for hackers to take it over. You are actually making the theming system less usable, because only people that know CSS are able to do this. Unless your site is specifically for web-based programmers, it's probably best to make a set of themes that the users can choose from instead.
You can also make a set of tools on your site that allow the user to change specific styles on the page through a user interface instead of directly through CSS. This will allow more users to more flexibly style their pages, but it usually comes at the cost of more development time - unless you're using a CMS, and your particular CMS allows this functionality easily in the core or in a plugin.
Hope this helps.
Among things others said, check if they are valid CSS: http://jigsaw.w3.org/css-validator/
Although I would go for Zeus' answer, you could use a CSS parser (search SO, there are various questions) and check all input against a list of approved properties (color, background, etc).
If your users may only modify their very own CSS and not the one of other users, what's the risk? The CSS will only be served to them, so in the worst case, they'll be able to hack themselves, no?
