How do I filter user input css?

Question

In my application I am allowing users to upload their css style sheets so they can applied to templates. The css is written as an internal style sheet, because at this time I would not like to expose the css style sheet to other users.

That creates room for users to include malicious code into the css file. Initially my plan was to convert all '<' and '>', but that is needed in the css syntax. I am after a white list solution, since it won't be feasible to exhaustively eliminate unwanted characters.

Any suggestions for implementing security measures to this scenario?

Answer 1

Use CDATA and escape the terminating sequence (]]>). I'm not sure about browser compatibility, though.

Example (untested):

<?PHP

function strReplaceAll($needle, $replacement, $haystack)
{
    // Check for infinite loop.  (NOT FOOL PROOF!)
    if(strpos($replacement, $needle) === FALSE)
        return;

    $numReplacements = 42;

    while($numReplacements)
    {
        $haystack = str_replace($needle, $replacement, $haystack, &$numReplacements);
    }

    return $haystack;
}

?>

<style type="text/css">
/*
<![CDATA[
*/

<?PHP echo sstrReplaceAll(']]>', '', $userCss); ?>

/*
]]>
*/
</style>

Answer 2

I implemented a filter that replaces all < characters to <. The reason is that CSS does not need the < character; the only character it needs is the > which is used for child selectors.

That way users cannot open tags to write malicious code.

I am more than happy to consider any other/better solutions.

Answer 3

You should definitely also filter out at least IE expressions and FF -moz-binding properties... both can be used to run (potentionally malicious) javascript using css.

This cheat sheet contains the most obvious XSS tactics, including some CSS ones.

The safest solution would probably be whitelisting as you suggested (if it is acceptable to limit users to only use whitelisted properties).

Answer 4

Dont allow users to upload a CSS FILE, make an interface that generate the CSS files dynamicly based on the options selected by the user. The options you allow. then you can make a fisical CSS file or you can make a dynamic application who writes CSS based on that configuration, this avoid to have lots of CSS files on the server... its another approach and you dont need to check every posible XSS exploit, its more easy to define what is allowed than parsing CSS and rejecting some dangerous code.