How to preform whitelist-based CSS filtering in PHP

Question

I am working on a site and I would like to make a user able to enter custom CSS into that will be publicly displayed.

However, seeing as a good deal of XSS attacks can be preformed through CSS, I would like to be able to find a way to "clean" the CSS output, similar to how HTML Purifier works, by parsing the CSS, running the parsed CSS against a whitelist, and then outputting a new stylesheet based on the parsed and whitelisted CSS.

Is there already a library like this out there? If not, is there a CSS parsing library that can be used to create a custom implementation?

I don't know of any such library, but a CSS parser shouldn't be that hard to implement. — Ionuț G. Stan
– Ionuț G. Stan, Commented Sep 1, 2009 at 20:35
CSS parsing isn't as easy as it looks, especially when you have to disallow certain constructs that can be misinterpreted by bad browser parsers. — bobince
– bobince, Commented Sep 1, 2009 at 23:20
Black-listing is definitely hard, but white-listing is not. And I don't see what's so hard about parsing CSS. It's not a programming language and you don't need to render something based on it, in this particular case. Some CSS constructs that may be harder to parse are @-rules, but you don't have to support the full CSS spec, just the white-listed subset. — Ionuț G. Stan
– Ionuț G. Stan, Commented Sep 2, 2009 at 6:00

Ionuț G. Stan · Accepted Answer · 2009-09-02 08:42:20Z

I guess you're going to write your own CSS parser and filter, so here's what I'd consider, although I've never done such a thing:

Make a (white) list of acceptable CSS properties that your users can use. Like: color, font-family.
I believe it might be better to not allow short-hand forms such as background, at least in the beginning, so that you can easily parse the values. Require that they explicitly write background-color, background-image.
If you want URLs, only allow relative URLs, and discard everything that doesn't even closely look like a URL. Log these issues anyway, so that you can improve your parser and validator.
Be very strict in your parsing, discard everything that your parser doesn't understand even if it would be valid CSS. In other words, make your own CSS subset.

When parsing, the hardest part would be the parsing of complex CSS selectors. But you can impose your own subset here too.

Here's some (pseudo)code, maybe it will help you somehow:

<?php

function tokenizeCSS() {
    return array(
        array(
            'selector'   => '#foo .bar',
            'properties' => array(
                'background-color' => 'transparent',
                'color'            => '#fff',
            ),
        );
    );
}

function colorValidator($color)
{}

/**
 * This is basically the white list. Keys are accepted CSS properties
 * and values are the validator callbacks.
 */
$propertyValidators = array(
    'background-color' => 'colorValidator',
    'color'            => 'colorValidator',
);

$filteredRules = array();

foreach (tokenizeCSS() as $rule) {
    if (! validSelector($rule['selector'])) {
        continue;
    }

    foreach ($rule['properties'] as $property => $value) {
        /**
         * Check property is in white list
         */
        if (! isset($propertyValidators[$property]) {
            continue;
        }

        /**
         * Check property is valid
         */
        if (! $propertyValidators[$property]($value)) {
            continue;
        }

        /**
         * Valid rule
         */
        $filteredRules[$rule['selector']][$property] = $value;
    }
}

Collectives™ on Stack Overflow

How to preform whitelist-based CSS filtering in PHP

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related