html5媒体安全需传输层https、内容层drm/自定义加密、授权层动态鉴权三者协同：https为强制前提，drm或web crypto用于内容加密，token化访问控制权限，前端防护无效，安全边界在服务端。
HTML5 媒体资源的安全传输与数字版权加密机制，核心不在前端“加个密”就能防住盗链或破解，而在于分层协同：传输层靠 HTTPS 保通道，内容层靠 DRM 或自定义加密控解密，授权层靠动态鉴权管权限。三者缺一不可，且必须运行在安全上下文中。
传输层：HTTPS 是强制前提，不是可选项
所有 EME 操作、Web Crypto 调用、视频分片请求、密钥获取接口，都要求页面处于 HTTPS 安全上下文。HTTP 环境下 navigator.requestMediaKeySystemAccess 直接报错，crypto.subtle 不可用，fetch 无法携带敏感 header。证书需由可信 CA 签发（如 Let’s Encrypt），避免自签名引发浏览器拦截。不启用 HTTPS，后续所有加密逻辑形同虚设。
内容层：DRM 方案是合规主流，自定义加密适合可控场景
对教育平台、付费课程等需强版权保护的场景，应优先采用 EME + 商业 DRM（Widevine/FairPlay/PlayReady）：
- 服务端用 shaka-packager 对视频做 CENC 多方案加密，生成含 PSSH 的 DASH/HLS 清单
- 前端调用 requestMediaKeySystemAccess 检测支持性，创建 MediaKeys 并绑定 video 元素
- 通过 mediaKeySession.generateRequest 向许可证服务器发起请求，响应由 CDM 自动解密播放
若预算有限或仅需防普通下载，可用 Web Crypto + MSE 自定义 AES-GCM 分片解密：服务端切片并逐片加密，前端 fetch 后内存解密再 append 到 SourceBuffer。注意密钥绝不硬编码，须通过鉴权接口动态获取，且 IV 和 tag 需随分片元数据一同下发。
授权层：Token 化访问 + 动态校验才是防未授权的关键
单纯加密视频文件或 URL，无法阻止合法凭证被复用或共享。真正有效的控制在服务端：
- 每个视频分片 URL 带有时效性签名（如 HMAC-SHA256 + 时间戳 + 用户 ID），过期即失效
- 许可证请求头中携带 JWT，服务端验证用户身份、设备指纹、订阅状态后才返回密钥
- 播放器初始化时向后端申请短期播放令牌（play token），video src 指向代理地址，由服务端校验 token 后透传流数据
避免将 userId、role、authKey 等敏感字段塞进 URL 参数或 history.state——这等于把门禁卡贴在玻璃门上。
补充要点：别碰伪加密，也别高估前端防护能力
JS 混淆、动态拼接 src、base64 嵌入视频等手段，只能延缓小白用户操作，对稍有经验者毫无意义。Web Crypto 解密逻辑运行在客户端，密钥协商过程、算法实现、内存数据均可被调试器捕获。真正的安全边界在服务端：密钥不出域、策略可灰度、行为可审计、凭证可吊销。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
