blob url加载css绕过csp的style-src检查，因其是浏览器内存内生成的临时地址，不发起网络请求，不属于外部资源加载范畴，故不触发csp校验。
因为 Blob URL 是浏览器内存内生成的临时地址，不经过网络请求、不暴露路径、不受 CSP style-src 限制，且天然规避跨域、MIME 类型校验和远程资源失效风险。
Blob URL 加载 CSS 为什么绕过 CSP 的 style-src 检查
CSP 的 style-src 只约束外部样式资源加载行为（<link rel="stylesheet">、@import、url()、style 属性），而 Blob URL 是本地内存引用，不属于“外部资源加载”范畴。浏览器不会对 blob:https://example.com/xxx 发起网络请求，因此不触发 CSP 校验逻辑。
- ✅ 正确用法：
const blob = new Blob([cssText], { type: 'text/css' }); const url = URL.createObjectURL(blob); link.href = url; - ❌ 错误假设：以为加了
style-src 'unsafe-inline'就能用document.write('<style>...</style>')—— 实际上现代浏览器已基本禁用document.write，且该方式仍受 CSP 约束 - ⚠️ 注意：
URL.createObjectURL()创建的 URL 必须配对调用URL.revokeObjectURL()，否则内存泄漏
相比 <link href="xxx.css">，Blob URL 避开了哪些真实失败场景
外链 CSS 在移动端或 WebView 中极易因服务端响应头、协议缺失、路径解析错位而静默失败；Blob URL 把内容“固化”在 JS 执行上下文中，把不可控的网络链路压缩为可控的内存操作。
- 服务端没返回
Content-Type: text/css？Blob 不需要——类型由Blob构造时{ type: 'text/css' }显式声明 - iOS WKWebView 拦截
//cdn.example.com/style.css？Blob URL 是blob:https://...，协议和域名完全匹配当前上下文 - CSS 里有
url(./icon.png)导致 404？Blob 中的 CSS 是纯字符串，不解析相对路径，所有资源应提前转为 data URL 或内联 base64 - CDN 崩了或 DNS 失败？Blob 已在内存中，加载零依赖网络
为什么说它比动态 document.createElement('style') 更适合复杂规则注入
<style></style> 标签插入虽简单，但对含 @keyframes、@media、嵌套 @supports 的大块 CSS，容易因 HTML 解析器对特殊字符（如 、<code>&）的预处理而损坏内容；Blob URL 则完整保留原始字符串，交由 CSS 解析器原生处理。
- ✅ 安全写法：
new Blob(['@keyframes slide { from { opacity: 0; } to { opacity: 1; } }'], { type: 'text/css' }) - ❌ 危险写法：
style.textContent = '@keyframes slide { from { opacity: 0; } to { opacity: 1; } }'—— 在某些旧版安卓 WebView 中可能被截断或转义 - ⚠️ 关键点：Blob 内容是二进制安全的，
textContent是文本安全的；当 CSS 含非 UTF-8 字符（如注释里的 emoji 或 base64 片段）时，Blob 更可靠
真正容易被忽略的是：Blob URL 的生命周期绑定到当前文档，页面刷新即失效；若需跨路由复用（比如 SPA 中多个页面共享同一套主题 CSS），必须在每次进入新路由时重新创建并注入，不能缓存 URL 字符串本身——因为旧 URL 已被 revokeObjectURL 回收或随页面卸载自动释放。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
