正确配置style-src应仅允许'self'或显式指定哈希/nonce，禁用'unsafe-inline'；它控制、style属性、@import及url()加载的样式资源，不支持strict-dynamic，且需与HTML标签中的nonce或哈希严格匹配。
CSS内容安全策略（CSP）中如何正确配置style-src
直接说结论：只允许'self'或明确哈希/nonce，禁用'unsafe-inline'——否则CSP对内联样式和<style></style>块基本失效。
浏览器执行CSS时，只要样式来自<style></style>标签、style属性或@import引入的外部URL，都会被style-src指令拦截。很多人误以为关掉script-src就安全了，其实CSS也能触发DOM XSS（比如通过expression()在旧IE，或配合url()加载恶意资源）。
-
style-src 'self'：允许同源.css文件，但禁止所有内联样式和<style></style>块 -
style-src 'nonce-abc123'：需在HTML响应头或<meta>中同步提供相同nonce值，且只对带nonce="abc123"的<style></style>或<link rel="stylesheet">生效 -
style-src 'sha256-...'：适用于静态<style></style>块，但每次修改CSS就得重算哈希，CI/CD里容易漏更新 - 避免
style-src https:这种宽泛写法——它允许任意HTTPS CSS，等于开放白名单给全网域名
为什么@import和url()会被style-src管住
很多人以为@import走的是网络请求，该归connect-src管。错。CSS规范里，@import和background: url(...)中的URL属于“样式资源加载”，由style-src统一控制。
典型翻车场景：某组件库用@import url('https://cdn.example.com/theme.css')，但CSP头没放开这个域名，结果样式空白，控制台报Refused to load the stylesheet ... because it violates the following Content Security Policy directive: "style-src 'self'"。
立即学习“前端免费学习笔记（深入）”；
- 检查浏览器开发者工具的Console，过滤
CSP，错误信息里会明确写出被拦截的URL和违反的指令 -
url()里如果写的是data URL（如url(data:text/css,...)），也受style-src约束，且'unsafe-inline'不豁免data URL - 想放行CDN资源？必须显式加入
style-src，例如style-src 'self' https://cdn.example.com，不能靠default-src兜底
使用strict-dynamic对CSS无效，别乱套用
strict-dynamic是为JS设计的，只作用于script-src，对CSS完全无意义。把它加进style-src里，浏览器直接忽略该指令——既不报错，也不生效，纯属浪费字符。
常见混淆点：有人看到JS用了script-src 'strict-dynamic' 'nonce-xyz'，就顺手给CSS也写上style-src 'strict-dynamic' 'nonce-xyz'，结果发现nonce样式还是被拦，还以为是浏览器bug。
-
strict-dynamic在style-src中没有任何规范定义，Chrome/Firefox/Safari均不识别 - 真正能继承信任链的是
style-src-attr（控制style属性）和style-src-elem（控制<style></style>和<link>），但它们不支持strict-dynamic - 如果要用nonce，确保它同时出现在HTTP响应头（如
Content-Security-Policy: style-src 'nonce-abc'）和HTML标签里（<style nonce="abc"></style>），大小写和空格必须完全一致
开发环境绕过CSP的临时方案别带到生产
本地调试时用style-src 'unsafe-inline'省事，但上线前必须删掉。更隐蔽的坑是：某些构建工具（如Webpack的style-loader）默认把CSS注入成<style></style>标签，而没配nonce或hash，导致生产环境CSP报错。
- Vite用户注意：
build.cssCodeSplit设为false时，CSS可能被打包进JS并动态插入<style></style>，此时需配合experimentalStyleIsolation或改用link方式引入 - Next.js 13+的App Router中，
use client组件里用style属性或styled-jsx，若未配nonce，会直接触发CSP拦截 - 最稳妥的做法：把所有CSS外链化，用
<link rel="stylesheet">加载，然后只放开style-src 'self'，彻底规避内联问题
复杂点在于，现代前端框架的样式抽象层（比如CSS-in-JS、scoped style、shadow DOM）会让资源加载路径变得不透明，得一层层查生成的HTML和网络请求，才能准确定位是哪个url()或<style></style>触发了拦截。
