php - 如何在 PHP 中执行基于白名单的 CSS 过滤

Question

我正在一个网站上工作，我想让用户能够输入自定义 CSS 并将其公开显示。

但是，由于可以通过 CSS 执行大量 XSS 攻击，我希望能够找到一种“清理” CSS 输出的方法，类似于HTML Purifier的工作方式，通过解析 CSS，运行解析的 CSS针对白名单，然后根据已解析和列入白名单的 CSS 输出新样式表。

那里已经有这样的图书馆了吗？如果没有，是否有可用于创建自定义实现的 CSS 解析库？

Answer 1

我猜你会写你自己的 CSS 解析器和过滤器，所以这就是我会考虑的，虽然我从来没有做过这样的事情：

• 制作用户可以使用的可接受 CSS 属性的（白）列表。比如：color, font-family.
• background我相信至少在开始时不允许使用诸如 的速记形式可能会更好，这样您就可以轻松地解析这些值。要求他们明确写background-color, background-image。
• 如果你想要 URL，只允许相对 URL，并丢弃所有看起来不像 URL 的东西。无论如何都要记录这些问题，以便您可以改进解析器和验证器。
• 在解析时要非常严格，丢弃解析器不理解的所有内容，即使它是有效的 CSS。换句话说，制作你自己的 CSS 子集。

解析时，最难的部分是复杂 CSS 选择器的解析。但是你也可以在这里强加你自己的子集。

这是一些（伪）代码，也许它会以某种方式帮助您：

<?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;
    }
}