外部css加载必须用，不能用@import或js动态注入，因其不触发cors预检、不受同源策略阻断（需服务端返回content-type: text/css），而@import受style-src控制，js注入则绕过csp且易因mime类型失败。
外部CSS加载必须用 <link>，不能用 @import 或 JS 动态注入
浏览器对 <link rel="stylesheet"> 的加载有特殊豁免，它不触发 CORS 预检，也不受同源策略阻断——前提是远程服务器返回 Content-Type: text/css。而 @import 在 CSS 文件里调用时，会被归为 style-src 控制范围；JS 用 fetch() + insertRule() 加载则完全绕过浏览器样式安全机制，既违反 CSP，又大概率因 MIME 类型或路径解析失败导致样式不生效。
常见错误现象：net::ERR_BLOCKED_BY_CLIENT（广告拦截插件）、CSS was loaded but not applied（服务端未返回 text/css）、控制台报 Refused to apply inline style（误用 JS 注入）。
- 始终把
<link>放在内，避免 FOUC - 禁用
http://协议的远程地址（当前页是 HTTPS 时会被浏览器主动拦截） - GitHub Pages、Vercel 等静态托管默认不设
Access-Control-Allow-Origin，但这对<link>无影响——只有 JS 主动读取 CSS 内容时才需要
style-src 必须显式列出所有外部域名，不能只写 'self'
只配 style-src 'self' 对外部 CSS 完全无效：它只限制外链 CSS 的执行权限，但不会允许加载。真正起作用的是 style-src 白名单本身——浏览器会检查每个 <link> 的 href 协议+域名是否匹配该指令。
例如引入 https://fonts.googleapis.com/css2?family=Roboto，就必须在 CSP 中写 style-src 'self' https://fonts.googleapis.com；漏掉协议（如写成 fonts.googleapis.com）或端口（如 https://cdn.example.com:8080）都会被拒绝。
- 多个 CDN 需全部列出：
style-src 'self' https://cdn.jsdelivr.net https://fonts.googleapis.com - 支持通配符但慎用：
https://*.example.com允许子域，但不匹配example.com本身 - 若使用
@import引入其他 CSS（比如 Bootstrap 里 import Normalize），还需确保目标 URL 也在style-src中，否则@import请求会被connect-src拦截
启用 default-src 'none' 后，font-src 和 img-src 很容易被忽略
设了 default-src 'none' 就等于关掉所有资源类型的默认通道，此时即使 style-src 正确，外部 CSS 里引用的字体或图片仍会静默失败。比如 Bootstrap 的图标字体、Tailwind 的 @layer 里嵌的 base64 图片、Google Fonts 的 woff2 文件，都依赖独立指令放行。
典型遗漏点：
-
font-src没加 Google Fonts 域名 → 字体图标显示为方块 -
img-src没包含data:→ base64 图片无法渲染 -
connect-src漏掉字体 CDN →@font-face的src请求被拦（尤其当字体文件通过url()引用时）
实际配置示例：default-src 'none'; style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data:
动态主题切换时，别直接操作 <link disabled> 属性
用 JS 控制 <link disabled> 切换主题，在 CSP 严格模式下可能触发违规：如果新 CSS 文件域名不在 style-src 白名单中，浏览器会在加载阶段就拒绝请求，而不是等到应用时才报错。更隐蔽的问题是，某些框架（如 Vue 的 v-html 渲染）会把 <link> 标签当作普通 HTML 插入，导致重复加载或策略冲突。
安全做法是预先加载所有主题 CSS，并用 CSS class 控制显示/隐藏，而非动态增删 <link>：
- 所有主题 CSS 都在
里一次性声明，disabled属性初始为true - 切换时只修改
的 class，靠 CSS 选择器控制不同主题的生效范围 - 确保所有主题 CSS 的域名都在
style-src中，避免运行时补漏
复杂点在于：CSP 不校验 CSS 内容本身，只管加载来源。所以即使你用 nonce 或 hash 授权内联样式，对外部 CSS 来说，唯一有效的钥匙就是 style-src 白名单——少一个域名，就少一种可用的主题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
