javascript - 如何转义内部CSS？

Question

我想将一些用户生成的 css 插入到 head 中我的 html 使用 javascript。问题是当我转义某些字符时会破坏 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，这是否是一个安全问题？我可能是错的，但我不认为 <script> <style> 内的标签标签将执行。如果没有转义 css，我是否遗漏了任何其他漏洞？

Answer 1

我已更新此内容以反射(reflect)评论中 OWASP 链接的详细信息和指导

我认为使用 decodeURI() 或 escape() 之类的东西几乎没有任何好处，它们不是为此目的。

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

用他们自己的话说:

CSS is surprisingly powerful, and can be used for numerous attacks. Therefore, it's important that you only use untrusted data in a property value and not into other places in style data. You should stay away from putting untrusted data into complex properties like url, behavior, and custom (-moz-binding).

You should also not put untrusted data into IE's expression property value which allows JavaScript.

值得完整阅读本指南，因为您需要从整体上考虑许多事情，并且为了安全起见，只需一个错误即可撤消所有内容。

在实践中，我相信您可以从通过类似 PostCSS 的方式传递它开始为了首先解析CSS。 (从一般功能/架构的 Angular 来看，这也有一些优势，因为它也将使将来添加调试消息或 CSS 前缀等功能变得更加容易)。

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

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

请注意，OWASP 强烈建议采用白名单方法。从禁止所有内容的 Angular 出发，然后仅在您知道安全且必要时才允许特定异常(exception)。

正确预防 XSS 并非易事，我目前还不知道有什么工具可以让它变得更容易(而且任何此类工具都必须经过精心设计和谨慎使用)，但是它也不应该被禁止困难。

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