HTML5视频安全防护关键在于精准配置media-src指令，它专控video/audio标签及poster、WebVTT字幕等媒体资源加载，需明确限定可信HTTPS域名、慎用通配符、禁用http:，并协同connect-src、img-src等指令形成完整防护。
HTML5 视频的安全防护，关键在于 media-src 指令的精准配置。它直接控制 <video> 和 <audio> 标签能加载哪些音视频资源，是防止恶意媒体文件注入、中间人劫持或跨域内容滥用的第一道防线。
media-src 的作用与必要性
不同于 script-src 或 style-src，media-src 专管音视频资源的来源。浏览器在解析 src、poster（图片）、WebVTT 字幕（<track> 的 src）时，都会受其约束。若未显式设置 media-src，浏览器会回退到 default-src；但 default-src 不一定涵盖媒体场景，容易造成策略遗漏或过度宽松。
推荐的 media-src 配置方式
-
明确限定可信域名：只允许自有域名和经审核的 CDN，例如
media-src 'self' https://cdn.example.com https://videos.yourapp.net; -
支持通配符子域（谨慎使用）：如确需多级 CDN 支持，可用
https://*.example.com，但避免https://*或*—— 后者等同于开放全部外源，极大增加风险 -
允许 data: URI（按需启用）：某些内联 base64 视频缩略图或小音频片段需用
data:，可加入data:，但不宜作为常规方案 -
禁止不安全协议：确保不包含
http:，强制使用 HTTPS，防范传输层篡改
常见陷阱与规避建议
Video.js、hls.js 等播放器常动态加载分片（.m3u8、.ts）、字幕或封面图，这些请求同样受 media-src 约束。若出现“Media load failed”或控制台报 “Refused to load media from …” 错误，大概率是 media-src 未覆盖对应资源路径。
- 检查所有实际加载的媒体 URL（包括 HLS 清单、DASH MPD、字幕 .vtt 文件），确保其协议、域名、端口均匹配策略
- 避免依赖 'self' 覆盖全部——比如 poster 图片来自 CDN，或字幕托管在另一子域，就必须显式列出
- 若使用第三方视频服务（如 Vimeo embed），需额外配置 frame-src 和 media-src，且注意其是否支持 HTTPS 及 CORS
与其他指令的协同关系
media-src 不是孤立存在的。它需与以下指令配合才能形成完整防护：
立即学习“前端免费学习笔记（深入）”；
- connect-src：HLS/DASH 播放器通过 fetch/XHR 加载分片，该行为由 connect-src 控制，而非 media-src
- img-src：video 的 poster 属性、自定义图标、错误占位图等属于图片资源，应归入 img-src
- font-src / style-src：播放器 UI 中的字体、内联样式（如 Video.js 的默认 skin）可能触发对应指令校验
- object-src 'none'：禁用 Flash 等插件，杜绝旧式媒体扩展带来的绕过可能
