前端能防截图吗?

把 8 种防截图技术做成开关,你亲手启用、亲手挨打。看完这一页,你会明白为什么 Netflix 敢花 20 亿建 DRM,而普通网站只能靠水印。

机密区域(银行转账凭证)

下面这张凭证是保护对象。启用下方的防护后,尝试按 PrintScreen、切换 Tab、按 F12,看它有什么反应。

转账凭证 · 请勿外传
付款方
张 * 敏(尾号 8823)
收款方
李某工程有限公司
金额
¥ 128,600.00
日期
—
流水号
—
备注
项目尾款结算
防护强度
0 无防护

事件日志

防护技术开关

每种技术都有难度徽章和有效性百分比。点「启用」把它加到机密区域,卡片会实时应用视觉/行为变化。带「仅示意」徽章的项目(如 HDCP/EME DRM)在纯前端 DOM 页面里没法真的生效,只在下方"攻防模拟"里参与判定,这是浏览器/OS 权限决定的上限,不是 demo 坏了。

核心事实

浏览器无法阻止你面前的显示器被相机拍下来。所有纯前端"防截图"技术真正做的事只有两件: 一是提高截图的技术门槛(拖慢自动化爬虫), 二是让截图带上溯源痕迹(水印)。 真正硬拦只能靠 OS 级 API(Netflix 的 HDCP、腾讯会议桌面版的 SetWindowDisplayAffinity),浏览器做不到。

攻防模拟

选一种截图方式,让它来打你在实验台启用的那套防护。看每道防线是拦住、可溯源还是彻底无效。

一句话结论

手机对屏拍照是所有前端防护的物理上限。你能对付的只有:在浏览器里操作的截图/录屏/爬虫。 所以真正的策略是假设它一定会被截图,把重点放在水印溯源和后端权限上。

真实产品怎么做

下面是主流产品的防截图策略(基于公开可观察行为整理)。注意几乎所有 web 端都靠水印溯源,硬拦的都是原生客户端。

方案对比

方案拦得住什么副作用建议场景
动态水印什么都拦不住,全部可溯源轻微影响可读性所有涉及个人信息的页面
失焦即模糊切窗时的旁观者视线使用体验略碎支付页、审阅页
DevTools 检测菜鸟开发者误伤正常调试用户付费内容预览
Canvas 渲染DOM 爬虫不可搜索/无障碍差付费文档预览
HDCP DRM浏览器内截屏/录屏(仅视频)需硬件全链路支持付费视频
后端权限控制所有未授权访问需要登录体系真正的机密内容