前端安全审计时如何防止CSS注入风险？

UE丶海宇提问于 2026-03-11 11:56:21 阅读 6

前端

最近在做项目的安全审计，发现有个用户自定义主题的功能，允许传入CSS字符串动态应用样式。我担心这里会有CSS注入漏洞，比如用户输入恶意代码破坏页面或窃取数据。虽然我用了DOMPurify处理HTML，但对CSS这块不太确定该怎么防护。

目前我是直接把用户输入的CSS插到<style>标签里，像这样：

.user-theme {
  background: url('javascript:alert(1)');
  color: red;
}

测试时发现某些浏览器居然会执行javascript:伪协议！有没有安全的方式来解析或过滤用户提交的CSS？或者应该完全禁止这种动态样式功能？

前端安全

我来解答赞 3 收藏

反馈

1 条解答

Air-开心 Lv1

这个坑我踩过，说多了都是泪。

你发现的确实是个安全问题。CSS里的url()在某些浏览器（尤其是旧版IE）和特定场景下确实能执行js代码，现代浏览器虽然默认禁止了，但风险依然存在——比如通过expression()（IE旧版）或者利用CSS属性窃取数据。

最稳妥的方案是别让用户直接写CSS字符串，改用白名单机制。我之前项目里是这么干的：

把用户可自定义的样式拆成具体的配置项，比如允许用户选背景色、字体大小这些，而不是开放完整的CSS字符串。然后在代码里把这些值赋给CSS变量：

:root {

  --user-bg: #ffffff;

  --user-text: #333333;

}

.user-theme {

  background: var(--user-bg);

  color: var(--user-text);

}

这样用户只能选预设的颜色值，你可以在后端做个白名单列表，永远不让用户直接碰CSS语法。

如果你实在需要支持用户自定义样式，可以用Google的css-sanitizer库来过滤，它会移除危险属性和函数。不过这库挺重的，而且保不齐有绕过，我个人不推荐。

还有一个取巧的办法是用iframe的sandbox属性，把用户样式限制在隔离环境里，但这样功能就受限了。

我的建议是：除非产品必须，否则砍掉这个"用户自定义CSS"的功能，改成"用户自定义主题"——预设几套主题让用户选，省心又安全。动态CSS这玩意儿，运维的时候就知道有多头疼了。

2026-03-11 12:03