如何逃避内部css？

Question

我想使用 javascript 将一些用户生成的 css 插入到我的 html 的 head 中。问题是当我转义某些字符时会破坏 CSS。

例如：

    let css = `
        @import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
        body { font-family: "Roboto", sans-serif; }
        `,
        style = document.createElement('style');

    style.type = 'text/css';
    document.head.appendChild(style);
    css = escape(css);
    style.appendChild( document.createTextNode( css ) );

输出：

    <style type="text/css" id="custom-theme-styles">
    @import url(&#39;https://fonts.googleapis.com/css?family=Roboto&amp;display=swap&#39;);
    body { font-family: &quot;Roboto&quot;, sans-serif !important; }
    </style>

如您所见，单引号和双引号分别产生' 和"。查询字符串中的 & 符号转换为 &。我还可以看到使用 css 子组合器 (>) 的问题。

有没有办法逃脱 css 以使其不会损坏并安全呈现？感觉是个坏主意，但如果我不逃避 css，这甚至是安全问题吗？我可能是错的，但我认为<style> 标记内的<script> 标记不会执行。由于没有转义 css，我是否还缺少任何其他漏洞？

Answer 1

我已对此进行了更新，以反映来自 cmets 中 OWASP 链接的详细信息和指导

我认为使用 decodeURI() 或 escape() 之类的东西几乎没有任何好处。

OWASP 有一个相当的comprehensive guide on XSS prevention，其中包括一个部分on how to handle CSS。

用他们自己的话说：

CSS 出奇地强大，可用于多种攻击。因此，重要的是您只在属性值中使用不受信任的数据，而不是在样式数据中的其他位置使用。您应该避免将不受信任的数据放入复杂的属性中，例如 url、行为和自定义 (-moz-binding)。

您也不应该将不受信任的数据放入允许 JavaScript 的 IE 的表达式属性值中。

完整的指南值得阅读，因为您需要整体考虑许多事情，并且在安全性方面，只需一个错误即可撤消所有内容。

在实践中，我相信您可以先通过 PostCSS 之类的方式传递它，以便首先解析 CSS。 （从一般功能/架构的角度来看，这也有一些优势，因为它还可以在将来更容易添加调试消息或 CSS 前缀等功能。

通过将 CSS 传递给解析器，您可以抵御任何涉及无效 CSS 语法的漏洞，但更重要的是，它可以让您更轻松地过滤掉指南中列出的有问题的属性和值。例如

{ background-url : "javascript:alert(1)"; }

请注意，OWASP 强烈建议采用白名单方法。从禁止一切的角度出发，然后仅在您知道它们是安全且必要的情况下允许特定的例外。

正确地预防 XSS 并非易事，我目前不知道有任何工具旨在使其更容易（并且任何此类工具都必须经过精心设计和谨慎使用），但也不应该被禁止困难。

（在答案的早期版本中，我注意到样式标签被认为是text node，它可以防止某些类型的trivial injection attacks。虽然这是真的，但 OWASP 示例表明这种保护是相当虚幻的）。