video.js与内容安全策略（CSP）兼容问题求助

嘿，这两个问题都是 Video.js 和 CSP 规则兼容的常见坑，我来帮你逐个解决：

1. Blob Worker 被 CSP 拦截的问题 #

先说说这个 Worker 的来头：Video.js 会自动创建 Web Worker 来处理一些媒体相关的耗时任务，比如字幕解析、流媒体分片处理这类，这些 Worker 不是从你服务器的脚本文件加载的，而是用 blob: URL 动态生成的——这就是为什么你只加 worker-src 'self' 没用的原因，'self' 只覆盖你域名下的资源，不包含 blob: 协议的资源。

另外你之前写的 worker-src: 'self' 语法是错的！CSP 指令和值之间是空格，不是冒号，这也是配置无效的关键原因之一。

解决办法 #

把你的 CSP 里的 worker-src 规则改成：

worker-src 'self' blob:;

这样就允许从 blob: URL 创建 Worker 了，完全适配 Video.js 的需求。

2. Base64 字体被 CSP 拦截的问题 #

那个 data: 协议的 WOFF 字体是 Video.js 内置的图标字体——就是播放器控制栏里的播放、暂停、音量调节那些小图标，Video.js 把这些字体直接内嵌成 base64 编码写在 CSS 里了，所以走的是 data: 协议，而你当前的 font-src 规则没包含这个协议，所以被拦截了。

解决办法 #

在你的 font-src 规则里加上 data:，改成：

font-src 'self' fonts.gstatic.com maxcdn.bootstrapcdn.com data:;

这样就允许加载内嵌的 base64 字体了，控制栏的图标就能正常显示。

完整的 CSP 示例片段 #

把这两个修正后的规则合并到你现有的 CSP 里就行：

Content-Security-Policy: 
  worker-src 'self' blob:;
  font-src 'self' fonts.gstatic.com maxcdn.bootstrapcdn.com data:;
  # 这里加上你原本的其他 CSP 规则，比如 script-src、style-src 之类的

内容的提问来源于stack exchange，提问作者Pangit