Content Security Policy限制导致Blob视频加载失败求助

问题原因 #

你的CSP仅设置了media-src 'self';，但Blob URL不属于'self'的覆盖范围——'self'只匹配当前域名的同源HTTP/HTTPS资源，而blob:是独立的协议源，因此浏览器会根据CSP规则阻止Blob视频的加载。图片加载正常是因为图片未使用Blob协议，或你的CSP对img-src的配置（默认或显式）允许其加载。

解决方案 #

修改Content Security Policy的media-src指令，添加blob:源：

• 如果是通过HTTP响应头设置CSP，更新为：

  Content-Security-Policy: media-src 'self' blob:;
  

• 如果是通过HTML meta标签设置，更新为：

  <meta http-equiv="Content-Security-Policy" content="media-src 'self' blob:;">
  

显式声明blob:后，浏览器就会允许加载Blob协议的媒体资源，解决当前的加载报错问题。

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