Is a cross-domain attack via stylesheet possible?

Question

I need to implement a flexible styling system for web pages that are created by users of my web application.

Ideally I would like to allow them to use CSS. Is linking to a style sheet at a user defined url a Bad Idea? Why? Is it possible to do this safely?

What would your approach to this be? I am trying to avoid building a style 'editor'. Though using an off the shelf one might be an option, suggestions?

Answer 1

Is it possible to do this safely?

Depends on how you define "safely". An external style sheet could make things look ugly, or play shenanigans with existing control elements on the site. You won't be able to prevent that as it's going to be impossible to detect. Here is a nice overview of malicious things one can do that way.

Also, obviously, CSS can trigger requests to any kind of URL by setting a background-image or similar. The browser will notice if the URL is not a valid image resource but the request will always happen. This way, one could provoke a password prompt to come up that the site's user may mistake for his own login prompt.

I'm not aware of any scripting attack vectors through CSS, although I'm pretty sure that IE's behavior could be one. I would definitely strip out those.

There is a related question on Stack Overflow but none of the vulnerabilities pointed out in the accepted answer works with pure external style sheets.

Answer 2

Yes. It can be a vector. This bit livejournal.

LiveJournal contains a flaw that allows a remote cross site scripting attack. This flaw exists because the application does not validate CSS style attributes in the '/cgi-bin/cleanhtml.pl' script before being saved. This could allow a user to create a specially crafted URL that would execute arbitrary code in a user's browser within the trust relationship between the browser and the server, leading to a loss of integrity. Read more at osvdb.org/21896

Caja's Attack Vectors Wiki explains how expression and moz-binding and similar mechanisms can allow arbitrary code execution.

Effect

Crafted CSS stylesheets can execute unsanitized javascript in the global scope on some browsers.

...

Versions

IE 5 and later (but not IE 8 or later in "standards mode").

Mozilla/Firefox, versions not known.

Example

<div id='oDiv' style='left:expression(alert("hello"), 0)'>
  Example DIV
</div>

node.style.cssText = 'left:expression(alert("hello"), 0)';

<input style='-moz-binding: url("http://www.mozilla.org/xbl/htmlBindings.xml#checkbox");'>

div {
  -moz-binding: url(data:text/xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%3F%3E%0A%3Cbindings%20id%3D%22xbltestBindings%22%20xmlns%3D%22http%3A//www.mozilla.org/xbl%22%3E%0A%20%20%3Cbinding%20id%3D%22xbltest%22%3E%3Ccontent%3EPASS%3C/content%3E%3C/binding%3E%0A%3C/bindings%3E%0A);
}
node.style.MozBinding = 'url("http://www.mozilla.org/xbl/htmlBindings.xml#checkbox")';
<ul>
  <li style="behavior:url(a1.htc) url(a2.htc)">List Item</li>
</ul>

---

Is it possible to do this safely?

Yes. You can white-list CSS properties and strip out any you don't judge to be safe.

Caja defines white-lists in JSON format that allow a large subset of CSS to be used while banning those that might execute code.