style-src必须显式配置，否则等效于'style-src none'导致样式全拒；它不继承default-src，且独立约束内联style、style属性、@import及link外链，Vue/React动态样式也需显式授权。
CSP 的 style-src 必须显式声明，否则默认继承 default-src；不配或配错会导致样式加载失败、页面白屏或控制台报 Refused to apply inline style 错误。
为什么 style-src 单独配置比依赖 default-src 更安全
很多项目只写 default-src 'self'，以为 CSS 也会自动放行——但实际不是。浏览器对 style-src 有独立校验逻辑：内联 、style="" 属性、@import、外部 全部受它约束。一旦没配 style-src，浏览器就用空策略兜底（等效于 style-src 'none'），直接拒绝所有样式。
-
default-src 'self'不会自动赋予style-src权限，这是 CSP 规范明确规定的“指令不继承”行为 - Vue/React 组件中动态插入的
（比如 emotion、styled-components）必须被style-src显式允许，否则 runtime 报错 - 使用
'unsafe-inline'虽能解燃眉之急，但等于放弃对 XSS 注入样式的防御能力
style-src 白名单的合法取值和实操选择
白名单不是越宽越好，得按真实资源来源分层控制：
-
'self'：必须保留，覆盖同域所有.css文件和内联（前提是没启用 nonce 或 hash） -
https://cdn.jsdelivr.net：只写协议+域名+端口，不带路径；多个 CDN 用空格分隔，如https://fonts.googleapis.com https://cdn.jsdelivr.net -
'unsafe-inline'：仅用于灰度期临时兼容，上线前必须移除；配合report-uri收集哪些组件在用内联样式 -
'sha256-xxx'或'nonce-xxx'：对确定不变的内联样式用哈希，对每次请求生成唯一 nonce 的框架（如 Next.js）用 nonce 方式
示例（Nginx 配置）：
add_header Content-Security-Policy "default-src 'self'; style-src 'self' https://fonts.googleapis.com https://cdn.jsdelivr.net; font-src 'self' https://fonts.gstatic.com;";
常见错误：看似配了，但样式仍被拦截
这些细节不注意，style-src 就形同虚设：
- 漏掉
font-src：Google Fonts 的 CSS 里含@font-face，字体文件由font-src控制，和style-src无关 - CDN 域名拼错：比如写成
https://fonts.google.com（少了个apis），浏览器严格匹配 Host，不自动补全 - HTTP 和 HTTPS 混用：当前页是 HTTPS，但
style-src里写了http://xxx，会被直接忽略（除非加upgrade-insecure-requests） - 没处理
@import：CSS 文件内部的@import url('...')请求，目标地址也受style-src约束，不是只看外层的域名
如何验证 style-src 是否生效且无遗漏
别只靠肉眼检查配置，用浏览器 DevTools 实时确认：
- 打开 Network → 找到 CSS 请求 → 查看 Response Headers 里是否有
content-security-policy字段 - 触发样式加载失败时（如白屏），Console 里会输出类似
Refused to load the stylesheet 'https://xxx.css' because it violates the following Content Security Policy directive: "style-src 'self'"—— 错误信息里明确告诉你缺哪个源 - 用
Content-Security-Policy-Report-Only头 +report-uri先跑一周，收集所有被拦的样式 URL，再批量加入白名单
真正难的不是写那几行配置，而是厘清「谁在加载什么样式」「从哪来」「是否可预测」——尤其是第三方 UI 库、字体服务、埋点 SDK 的隐式样式注入，最容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
