前端真的能防录屏?EME(加密媒体扩展)DRM 反录屏原理 + 实战代码
在实际开发中,很多开发者会问:前端真的能防录屏吗?单纯靠 JS 监听快捷键显然不够,绕过的方法太多了。要实现真正的防护,必须依赖浏览器原生支持的 API,也就是 Encrypted Media Extensions (EME)。
什么是 Encrypted Media Extensions(EME)
Encrypted Media Extensions 是 W3C Web API,用于让浏览器播放受 DRM(Digital Rights Management,数字版权保护)加密的媒体。通俗来说,EME 就是一套 JS API,用来控制浏览器的 DRM 解密模块。
更多详细规范可以参考官方文档:https://www.w3.org/TR/encrypted-media/
常见 DRM 方案
| 平台 | DRM |
|---|---|
| Chrome、Android | Google Widevine |
| Edge/Windows | Microsoft PlayReady |
| Safari/iOS/macOS | Apple FairPlay |

EME 是如何实现浏览器防截屏 / 防录屏
在浏览器层面,EME 配合 DRM 可以实现一定程度的防截屏和防录屏,核心逻辑如下:
- 媒体文件是加密的:内容本身是加密视频(如 Widevine Modular 加密),而非明文。
- 浏览器通过 CDM 模块解密:浏览器内置一个 CDM(Content Decryption Module)。例如 Chrome 内置 Widevine CDM,它运行在沙箱中,不暴露密钥给 JS。
- 禁止系统级截屏:这取决于 DRM 的安全等级。例如在 Chrome 上播放 Netflix 时,使用系统截图键或屏幕录制,视频区域会显示为黑色。
- Widevine L1(硬件级)支持防截屏。
- DRM 解密后的视频帧不会进入 CPU 层,而是直接通过 GPU 的保护路径输出,截屏 API 无法捕获受保护的视频帧。
- 禁止浏览器扩展抓取视频帧:DRM 视频帧在受保护的视频管线(Video Pipeline)中,普通扩展无法获取。
- 禁止调试工具记录媒体流:媒体解密密钥不会暴露在 JS 环境中。
EME 播放加密媒体的代码示例
EME 是一套 W3C 标准化的 JavaScript API,它在不暴露密钥和明文数据的前提下,充当网页应用、浏览器和底层 DRM 系统(CDM)之间的'安全信使'。


