前端做Fuzzing测试时CSS解析会崩溃怎么办？

シ树灿提问于 2026-03-09 10:06:21 阅读 30

安全

最近在尝试给我们的UI组件库加Fuzzing测试，用的是jsdom配合一些模糊输入生成器。但一碰到某些畸形的CSS规则，整个测试进程就直接崩了，连错误堆栈都看不到。

我试过用 try-catch 包裹样式注入逻辑，但好像没用，因为崩溃发生在底层的CSS解析阶段。比如下面这种看起来很正常的写法，一旦value被fuzz成超长字符串或特殊字符组合，就容易出问题：

.test-element {
  background: url("fuzzed_input_here");
  width: calc(100% - fuzzed_value);
  content: "fuzzed_string";
}

有没有人遇到过类似情况？前端Fuzzing时怎么安全地处理CSS注入，避免解析器直接挂掉？

我来解答赞 5 收藏

反馈

1 条解答

UE丶晶晶 Lv1

哈，这个问题我可太熟了！去年搞组件库fuzzing测试的时候，CSS解析崩得我怀疑人生。血泪教训啊，jsdom底层用的是类似浏览器的CSS解析器，遇到不合法的CSS就直接崩，连try-catch都救不了。

我的解决方案是搞个前置过滤层，在把fuzz生成的字符串喂给jsdom之前先过一遍。具体这么干：

1. 对URL值：强制加个正则校验，比如/^url(["']?[^"']+["']?)$/，防止注入恶意字符

2. 对calc表达式：用个简单的语法分析器检查括号是否匹配，运算符是否合法。可以偷懒用现成的：

function isSafeCalc(input) {

  try {

    new Function(return ${input.replace(/calc(([^)]+))/, '$1')});

    return true;

  } catch { return false }

}

3. 对content属性：直接限制最大长度，超过100字符就丢弃。这玩意儿本来就不该放超长文本

还有个更暴力的办法，直接用worker隔离测试进程。这样就算崩了也只是worker挂掉：

const worker = new Worker('fuzz-worker.js');

worker.onerror = () => console.log('CSS爆炸了，但主进程还活着！');

最后说句实话，前端fuzzing就别指望100%稳定了。我现在的策略是记录崩溃case，定期手动检查要不要加到过滤规则里。毕竟有些CSS语法连规范都没说清楚怎么处理，浏览器自己都会崩...

2026-03-09 10:10