CODEWITHSUNDEEP
csssecurityuser-interfaceuser-experience
Alexandros Marinos
Alexandros Marinos

Reputation: 1396

User-defined CSS: What can go wrong?

So, for a new community site I am working on, we are considering allowing the users to write their own CSS. Perhaps with a text area in their profile page. Then that becomes the CSS that the website sends their browser whenever they browse the site. This looks like a fairly obvious and cheap customization but I've never seen it done.

Assuming we add some safeguards to prevent users from irreparably messing up their own page, is there anything that can go wrong from a site-wide perspective? Perhaps wrt security?

Upvotes: 3

Views: 978

Answers (5)

Nick
Nick

Reputation: 8530

OWASP has some good advice about escaping untrusted CSS that you might like to consider.

I recommend offering users some general appearance preferences (font size, style, and colour etc.) rather than giving them carte blanche. This has the advantage of being more accessible to less technical users, as well as resulting in fewer likely requests for tech support (don't forget to include a 'reset styles' button so they can undo their changes without emailing you).

Any user who is comfortable enough to override site-wide CSS styles is likely to be aware of browser-based site-specific stylesheets, so I don't see any real advantage in offering a blank styles box like the one you describe; if users were styling their pages to theme them for other visitors (e.g. tumblr) it would make much more sense.

Upvotes: 2

JB Nizet
JB Nizet

Reputation: 691635

In addition to the good remarks made in the other answers, I would say that giving the users the ability to completely edit their CSS could be dangerous for your site, and would not add much value for regular users, which don't master CSS.

Those mastering CSS could simply use a browser extension (like Stylish, for example), to customize the CSS, without any effort from your part and any security risk for your site.

I would thus do something more high-level (allowing users to choose colors, fonts, etc. using an easy to use interface), or do nothing at all.

Upvotes: 1

Terry_Brown
Terry_Brown

Reputation: 1408

I've allowed this sort of behaviour before via an inhouse CMS that we built, and had no great problems - what we did was give them limited scope in terms of what they had permission to edit and they weren't allowed to do anything that would jar with the overall look and feel of the site.

I hasten to add, we gave them a 'CSS builder' rather than direct control over the CSS, which worked well in our situation (client sites where people had very little web experience).

This sounds easier than it actually was - it's nice if they can change font, though on a multi-tenancy site we had some with a primary font of Times (where we had to create a white-list of fonts to go with that font), and some with Arial (again, a new white-list).

What we found was that using jquery, we were able to provide a pseudo-live preview of a typical content page with their changes within it, and they could hone it on the fly.

That said, we still had clients contacting us when they'd ballsed it up, so it wasn't foolproof.

So in summary:

  • I can advocate the use of white-listing though as a means of limiting choice - if they're creating a style for body text, then allowing 24pt text is not likely to bode well in user interface terms.
  • Use live preview wherever possible so they can see what it'll look like as they build the style - it may not stop stupid people, but it'll certainly at least show them how stupid they're being! :)

Upvotes: 1

RJD22
RJD22

Reputation: 10340

Well they can load up malicious scripts trough image tags in css. Letting people change your site is always a dangerous path to go in.

You need to make sure you validate the CSS well since people are sure to try to find holes in your security.

I would make a PHP controlled interface where they can change certain parts. It's is easier to validate and gives you a lot less sleepless nights imo.

Upvotes: 1

Spyros
Spyros

Reputation: 48606

Beware of Internet explorer, which is known to allow javascript code through CSS. That could be the root of XSS attacks if others see this custom CSS.

Other than that, things would probably be ok from a security perspective.

But, the CSS that users provide can just be bad. Instead of allowing them to directly provide CSS, you could have an editor for them to select colors/sizes etc and generate the needed CSS yourself.

If you decide to allow any custom CSS, make sure you sanitize. If you ask my opinion, i would vote against it and use a method like an editor, as i mentioned above.

Upvotes: 1

Related Questions