style-src 'self' 不能单独信任，因其仅阻止跨源CSS加载，却无法防御JS动态注入style、同源CDN劫持、模板拼接漏洞或被攻陷的静态资源路径导致的恶意样式执行。
直接禁用外部 CSS 加载是最有效手段；若必须引入，需组合 CSP + SRI + 运行时检测三道防线，否则任何单点防护都可能被绕过。
为什么 style-src 'self' 不能单独信任
CSP 的 style-src 'self' 只阻止跨源 <link> 和 @import，但无法防御：攻击者已控制页面 JS 后动态插入 document.createElement('style')；第三方 CDN 被劫持后返回恶意 CSS（此时仍是同源）；或服务端模板错误拼接了用户可控字符串进 <style> 标签。更隐蔽的是，style-src 'self' 允许所有同源 CSS 文件，而一个被攻陷的静态资源路径（如 /assets/theme.css）就足以让整站失效。
必须启用 Subresource Integrity（SRI）校验
SRI 是验证外部 CSS 完整性的唯一可靠方式，它不依赖域名或证书，只认哈希值。配置时注意三点：
- 生成哈希必须用完整响应体（含 BOM、换行符），推荐用
openssl dgst -sha256 -binary file.css | openssl base64 -A -
<link>必须同时带integrity和crossorigin属性，否则浏览器忽略校验 - CDN 返回 304 或压缩（gzip/br）会改变响应体，导致哈希不匹配——务必确保 CDN 对带
integrity的请求禁用缓存和压缩
示例：<link rel="stylesheet" href="https://cdn.example.com/v1.2.0/main.css" integrity="sha256-abc123..." crossorigin="anonymous">
立即学习“前端免费学习笔记（深入）”；
运行时检测关键元素是否被隐藏或位移
恶意 CSS 最常干的事是把「确认付款」按钮设为 display: none、把风控提示栏 visibility: hidden、或用 pointer-events: none 劫持点击。这些修改无法被 CSP 拦截，必须主动轮询：
- 对支付按钮、二次确认弹窗、敏感操作入口等 DOM 节点，每 800ms 调用一次
getComputedStyle(el).display和getComputedStyle(el).visibility - 避免检查
el.style.display—— 攻击者改的是计算样式，不是内联 style 属性 - 警惕 CSS 自定义属性：攻击者可通过
document.documentElement.style.setProperty('--btn-opacity', '0')隐蔽控制，检测时需同步读取getComputedStyle(document.documentElement).getPropertyValue('--btn-opacity')
HTML 内联样式与脚本中埋入的敏感数据更危险
很多人专注防外部 CSS，却在 HTML 中明文写死用户邮箱、权限列表甚至 token：<script>init({user: {id: 123, email: "a@b.com"}})</script>。这类内容一旦被 CDN 缓存，就等于把用户凭证广播给所有人。更糟的是，浏览器内存缓存（back/forward cache）可能在用户离开页面后仍保留该 HTML 片段。
- 禁止在 HTML 字符串中拼接任何用户上下文字段；改用 fetch 异步加载，或服务端做运行时混淆（如 Base64 + XOR）
- 对含敏感数据的 HTML 响应，后端必须返回
Cache-Control: no-store，且 Nginx 等反向代理不能配置proxy_ignore_headers Cache-Control -
<meta http-equiv="Cache-Control" content="no-store">仅作补充，RFC 不强制支持，不可依赖
真正难防的不是「外部 CSS 被污染」，而是「你已信任它并让它参与关键渲染逻辑」——只要一个选择器（比如 button#pay）被第三方 CSS 定义，它的样式穿透能力就永久生效。所以最硬核的解法，永远是：非必要不引入；必要时用 Shadow DOM 隔离；隔离不了，就靠 SRI 锁哈希、CSP 锁加载、运行时锁渲染效果。
