第三方CSS文件虽不执行代码，但恶意样式注入可通过篡改样式诱导误操作、隐藏风控元素或配合XSS扩大攻击面；防御核心是切断生效链路，而非阻止引入。
第三方 CSS 文件本身无法“执行代码”，但恶意样式注入（CSS Injection）真实存在——它不靠 javascript: 伪协议（现代浏览器已禁），而是通过篡改关键样式属性，诱导用户误操作、隐藏风控元素、劫持点击区域或配合 XSS 进一步放大攻击面。防御核心不是“阻止引入”，而是切断恶意样式的生效链路。
为什么 style 属性和 <style> 标签不能防篡改
很多人试图用 style="display: block !important" 锁定关键按钮，但这完全无效。攻击者只需一行 JS 就能绕过：
document.getElementById('pay-btn').style.display = 'none';
原因很直接：style 是 DOM 属性，不是安全边界。开发者工具可实时编辑，用户脚本可任意覆盖，!important 对运行时 JS 修改毫无约束力。真正要监控的是最终渲染效果，而不是属性值。
用 CSP 的 style-src 拦截恶意样式加载
CSP 是第一道防线，但它只管“加载”，不管“运行时修改”。配置错误等于形同虚设：
立即学习“前端免费学习笔记（深入）”；
-
style-src 'unsafe-inline'→ 必须禁用，否则所有内联<style>和style属性都放行 -
style-src 'self'→ 只允许同源 CSS 文件，禁止@import和url()加载外部样式资源 -
style-src 'nonce-abc123'→ 服务端生成唯一 nonce，只对带nonce="abc123"的<style>或<link>生效 -
style-src https://cdn.example.com→ 若必须引用 CDN，必须显式列出，default-src不兜底
注意：strict-dynamic 对 style-src 完全无效，加了也白加。
检测并响应运行时样式篡改
加载拦截只是起点。攻击者可能已拿到页面控制权，后续仍可通过 JS 动态修改 style 或 CSS 变量。此时必须主动检测：
- 用
getComputedStyle(el).display、getComputedStyle(el).visibility等获取**实际渲染值**，而非读el.style.display - 对支付按钮、风控提示栏等关键元素，设置 500ms–2s 间隔轮询（别太密），发现异常立即恢复或告警
- 警惕 CSS 变量：攻击者用
document.documentElement.style.setProperty('--header-height', '0px')一行就能让头部塌陷，CSP 对此完全无感 - 关键变量尽量不暴露 setter；业务中用
calc()或硬编码值替代 JS 动态赋值
最易被忽略的点：第三方 CSS 一旦被加载进 document，它的选择器（如 button、.modal）就永久具备穿透能力。Shadow DOM 是目前唯一能真正隔离的方案，但需确认目标浏览器支持（Chrome 41+、Firefox 63+、Safari 10.1+、Edge 79+）。其他所有“作用域”手段，本质都是命名或构建时的障眼法，运行时仍可被 JS 绕过。
