前端安全审计中如何评估CSS注入风险？

诸葛莉霞提问于 2026-03-05 14:35:18 阅读 3

安全

最近在做项目安全自查，发现用户能自定义主题色，但担心CSS注入问题。我用了类似下面的写法，这样安全吗？

.user-theme {
  --primary-color: ${userInput};
  background-color: var(--primary-color);
}

虽然没直接用 innerHTML，但变量插到 CSS 里会不会被绕过？有没有更安全的做法？

我来解答赞 3 收藏

反馈

1 条解答

诸葛篷璐 Lv1

你这种写法确实存在风险。CSS注入不只是innerHTML的问题，关键是用户输入能不能逃逸出CSS语法。比如用户输入 red); font-size: 100px; /* 这种，最终生成的CSS就崩了。

建议这么处理：

1. 如果只是颜色值，直接用正则校验格式：

const isValidColor = /^#[0-9a-f]{3,6}$|^rgb(a)?([sd%,]+)$/i.test(userInput);

2. 更严格点可以用CSS.supports()验证（注意浏览器兼容性）：

if(CSS.supports('color', userInput)) {

  // 安全的

}

3. 实在不放心就直接用白名单，只允许预定义的几种颜色值。

顺便吐槽下，前端安全最容易被忽视的就是这种小细节，之前我们项目就被人用 url(javascript:alert(1)) 这种骚操作绕过过。所以涉及用户输入的地方，一定得把校验做死。

2026-03-05 15:04