浏览器拦截内联样式导致样式失效，报错“refused to apply inline style”，因style-src未放行对应来源；默认style-src 'self'会拒绝div style、style标签等所有内联样式，需检查响应头csp配置、content-type是否为text/css，并改用class、cssstylesheet.insertrule()或nonce机制替代。
style-src 配置错误导致样式全挂了怎么办
直接看控制台报错：Refused to apply inline style because it violates the following Content Security Policy directive，说明浏览器已拦截所有内联样式。这不是 CSS 写错了，而是 style-src 指令没放行对应来源。默认情况下，style-src 'self' 会拒绝：<div style="...">、<code><style>...</style>、el.setAttribute('style', ...)、innerHTML 中的样式字符串。
- 检查响应头是否含
Content-Security-Policy，确认style-src值（用curl -I或 DevTools → Network → Headers） - 若用
<meta http-equiv="Content-Security-Policy">，注意它不支持nonce和hash，仅用于调试 - 别在
style-src里漏掉'self'—— 即使只加载本地 CSS，也必须显式声明
远程 CSS 用 引入却被静默丢弃
常见现象是资源显示 “loaded” 但样式没生效，控制台提示 CSS was loaded but not applied。根本原因不是跨域问题（<link rel="stylesheet"> 不受 CORS 限制），而是服务端返回的 Content-Type 不是 text/css，或用了 HTTP 混合内容（HTTPS 页面加载 http:// 的 CSS）。
- 确保远程服务器响应头含
Content-Type: text/css，否则 Chrome/Firefox 直接丢弃 - 避免
http://地址 —— HTTPS 页面下会被浏览器主动阻止，且不报 CORS 错误，只静默失败 - CDN 如 GitHub Pages、Vercel 默认不设
Access-Control-Allow-Origin，但这对<link>加载无影响；只有 JS 用fetch()读取 CSS 内容时才需要它
动态插入样式但被 CSP 拒绝
用 fetch() + CSSStyleSheet.insertRule() 加载远程 CSS，看似灵活，实则绕过浏览器原生样式加载机制，极易触发 CSP 违规和解析错误。
- 若 CSP 设了
style-src 'self'，insertRule()注入的规则会被拒绝，即使来源是同域 -
fetch('https://cdn.example.com/style.css')需目标服务器返回Access-Control-Allow-Origin，否则报 CORS 错误 - 手动
split('}').forEach(...)解析 CSS 字符串不可靠 —— 会破坏@media、@import、嵌套规则等语法结构 - 相对路径资源（如
url(./icon.png)）会以当前 HTML 页面为基准解析，90% 情况下 404
用 nonce 或 class 替代内联样式
真正安全的解法不是放宽策略，而是避开内联本身。Goober 等 CSS-in-JS 库支持 nonce，但前提是服务端每次生成唯一值并同步注入 HTML 和 CSP 头。
- 预定义 class：用
el.classList.add('rating-4')替代el.style.setProperty('--rating', '4') - 动态
<style></style>标签：需 CSP 允许style-src 'self' 'nonce-xxx'，且<style nonce="xxx"></style>中的值必须与响应头一致 -
CSSStyleSheet.insertRule()：兼容性好（IE9+），无需 nonce，但只能追加规则，不能处理@import或字体声明 - 硬编码 nonce 值或复用旧值会导致 CSP 失效 —— nonce 必须每次响应随机生成、不可预测、不可缓存
Content-Type 和 nonce 的时效性 —— 一个错位，整页 UI 就变成白纸。
