style-src默认禁用所有内联样式，拒绝div的style属性、style标签及JS动态插入的样式字符串；加'unsafe-inline'虽可恢复但严重削弱XSS防护；应改用预定义class、CSSStyleSheet.insertRule()或nonce/hash机制。
style-src 默认禁用所有内联样式
CSP 的 style-src 指令默认不包含 'unsafe-inline'，所以浏览器会直接拒绝三类内联样式：HTML 元素的 style 属性（如 <div style="color:red">）、<code><style></style> 标签内容、以及 JS 中通过 el.setAttribute('style', ...) 或 el.innerHTML = '...' 动态插入的样式字符串。这不是解析错误，而是策略主动拦截——控制台会明确报错：Refused to apply inline style because it violates the following Content Security Policy directive。
加 'unsafe-inline' 是最危险的妥协
虽然在 style-src 里加上 'unsafe-inline' 能让所有内联样式恢复生效，但它等价于给攻击者开了后门：一旦页面存在 XSS 漏洞，恶意代码就能自由注入任意视觉欺骗样式（比如伪造登录框、遮盖真实按钮）。更糟的是，它还会让 style-src 的白名单形同虚设——你写了 style-src 'self' https://cdn.example.com，但只要加了 'unsafe-inline'，攻击者根本不需要绕过域名限制。
真正可用的替代方案只有三种
绕过拦截不是放宽策略，而是换写法：
- 用预定义 class 替代
style属性：把<button style="padding:8px;background:#007bff"></button>改成<button class="btn-primary"></button>，样式统一收口到外部 CSS 文件 - 用
CSSStyleSheet.insertRule()动态加规则：JS 中创建<style nonce="abc123"></style>后，调用sheet.insertRule('.dynamic{color:red}', 0)，这样既动态又受 nonce 控制 - 对静态
<style></style>块用 hash：服务端计算其内容 SHA256 值，写进策略如style-src 'self' 'sha256-xxx'；但注意，JS 拼出来的样式字符串无法用 hash 验证
本地调试时最容易忽略的验证点
很多人上线前没发现样式失效，是因为本地开发环境没配 CSP 响应头，或者只在 <meta> 里试——而 <meta http-equiv="Content-Security-Policy"> 不支持 nonce 和 hash，且无法覆盖响应头策略。上线前必须确认：
立即学习“前端免费学习笔记（深入）”；
- 用
curl -I https://yoursite.com检查响应头是否含Content-Security-Policy，且style-src值正确 - 打开 DevTools → Application → Content Security Policy 面板，看实时拦截记录是否与预期一致
- 如果用了 nonce，确保每次 HTTP 响应中的
nonce值都唯一且不可预测，不能硬编码或复用
