前端安全审计时怎么判断CSS有没有安全风险？

UE丶思源提问于 2026-03-03 20:06:21 阅读 7

前端

最近在做项目的安全审计，听说CSS也可能有安全问题，比如XSS之类的。但我一直以为CSS是静态样式，不会执行代码，所以有点懵。

我试过用一些在线工具扫描，但没报错。不过我们有个动态加载用户自定义主题的功能，会把用户输入的CSS插入到页面里，这会不会有风险？下面是我们用的一段示例CSS：

.user-theme {
  background-color: #f0f0f0;
  color: var(--user-text-color);
  font-family: 'CustomFont', sans-serif;
}

这种写法安全吗？还是说只要允许用户输入任意CSS就一定有隐患？

前端安全安全审计

我来解答赞 1 收藏

反馈

1 条解答

海燕 Dev Lv1

只要允许用户输入任意CSS就不安全，黑客能用 background-image: url(...) 把你的敏感数据偷走，或者用样式覆盖搞钓鱼。必须用库把 url、expression、@import 这类危险属性全干掉，别信用户的输入。

const css = require('css');



function sanitizeUnsafeCSS(input) {

  let ast;

  try {

    ast = css.parse(input);

  } catch (e) {

    return ''; // 语法错误直接丢弃

  }



  const safeRules = [];

  const dangerousProps = ['behavior', 'expression', 'binding', 'set'];



  ast.stylesheet.rules.forEach(rule => {

    if (rule.type === 'rule') {

      // 过滤声明

      const safeDecls = rule.declarations.filter(decl => {

        if (!decl.property || !decl.value) return false;

        

        // 检查属性名是否危险

        if (dangerousProps.some(d => decl.property.toLowerCase().includes(d))) {

          return false;

        }



        // 检查值里有没有 url() 或 javascript: 或 @import

        const val = decl.value.toLowerCase();

        if (val.includes('url(') || val.includes('javascript:') || val.includes('@import')) {

          return false;

        }



        return true;

      });



      if (safeDecls.length > 0) {

        safeRules.push({ ...rule, declarations: safeDecls });

      }

    }

  });



  return css.stringify({ stylesheet: { rules: safeRules } });

}

2026-03-04 10:01