页面加载视频触发Content Security Policy错误的解决咨询

问题根源 #

你当前的CSP配置存在语法错误：'unsafe-eval'和'unsafe-inline'是针对脚本（script-src）、样式（style-src）的指令，不能放在media-src规则下。这种无效配置会导致浏览器无法解析整个meta标签的CSP规则，进而 fallback 到了错误的media-src *规则——而*仅匹配http/https/ws/wss等网络协议，不包含blob:，所以加载blob协议的视频被拦截。

修复步骤 #

1. 修正CSP配置语法
   将不属于media-src的指令移到对应规则下，确保blob:明确包含在media-src中，同时用分号分隔不同指令。示例配置：

   <meta http-equiv="Content-Security-Policy" content="media-src data: blob: 'self'; script-src 'self' 'unsafe-eval' 'unsafe-inline'; style-src 'self' 'unsafe-inline';">
   

   • media-src data: blob: 'self'：允许加载来自同源、data协议和blob协议的媒体资源
   • script-src 'self' 'unsafe-eval' 'unsafe-inline'：对应脚本相关的宽松规则（如果确实需要的话）
   • style-src 'self' 'unsafe-inline'：对应样式相关的规则

2. 检查是否存在服务器端CSP覆盖
   如果服务器通过HTTP响应头（比如Content-Security-Policy）发送了CSP规则，页面中的meta标签配置会被忽略。此时需要修改服务器端的CSP配置，确保media-src中包含blob:。

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