如何解读模块系统在处理动态生成Blob模块时，内容安全策略（CSP）的具体限制措施？

本文共计701个文字，预计阅读时间需要3分钟。

模块系统在处理动态生成模块时，CSP的核心限制在于：

为什么 blob: 模块会被拦截

现代浏览器将 blob: 视为一种“临时、不可信”的资源来源。即使该 Blob 是由当前页面脚本同步创建的，它也不属于 'self'（即当前页面的 origin），而是一个独立的、带唯一 UUID 的伪协议地址（如 blob:https://example.com/abc123）。CSP 的 script-src 指令默认不包含 blob:，因此动态 import 会触发拒绝：

• import('blob:https://site.com/xxx') → 被阻断，控制台报错 “Refused to load script from 'blob:...'”
• 错误本质不是跨域，而是 CSP 白名单未覆盖 blob: 协议
• 这与 <img src="blob:..."> 不同——img-src 默认常含 blob:，但 script-src 通常不含

如何合法启用 blob: 模块加载

必须在 CSP 响应头中显式添加 blob: 到 script-src（或 default-src）指令中，且注意格式规范：

• 正确写法：script-src 'self' blob: https://cdn.example.com;（blob: 后无斜杠，末尾有分号）
• 错误写法：script-src 'self' 'blob:';（加了引号）、script-src 'self' blob;（漏冒号）、script-src 'self' blob: ;（多余空格可能被解析异常）
• 若使用严格 CSP（如 Power Apps 启用“严格模式”），script-src 默认不含 blob:，需手动补充

替代方案：避免依赖 blob: 模块

因 blob: 模块存在兼容性与策略维护成本，推荐以下更稳健做法：

• 改用 URL.createObjectURL(new Blob([code], {type: 'application/javascript'})) 创建后，立即通过 eval() 或 Function 执行（但需 CSP 允许 'unsafe-eval'，不推荐）
• 将动态逻辑转为预编译模块，托管在允许域名下，用 import() 加载 HTTPS 地址
• 对 Worker 场景，可利用 worker-src 'self' blob:（该指令默认已含 blob:），改用 new Worker(URL.createObjectURL(...))

调试关键点

遇到 blob 模块失败时，优先检查三项：

• 浏览器控制台 CSP 违规消息，确认拦截的是 script-src 还是 worker-src
• 响应头中 Content-Security-Policy 是否含 blob:，且拼写与分隔符正确
• 是否在开发环境测试——生产环境若缓存旧 CSP 头，更新后需清缓存或验证响应头实时值