深入聊聊前端限制用户截图的脑洞

先了解初始需求是什么？是内容数据过于敏感，严禁泄漏。还是内容泄漏后，需要溯源追责。不同的需求需要的方案也不同。来看看就限制用户截图，有哪些脑洞？【推荐：web前端教程】

有哪些脑洞

v站和某乎上的大佬给出了不少脑洞，我又加了点思路。

• 1.基础方案，阻止右键保存和拖拽。

这个方案是最基础，当前可只能阻拦一些小白用户。如果是浏览器，分分钟调出控制台，直接找到图片url。还可以直接ctrl+p，进入打印模式，直接保存下来再裁减。

• 2.失焦后加遮罩层

这个方案有点意思，看敏感信息时，必须鼠标点在某个按钮上，照片才完整显示。如果失去焦点图片显示不完整或者直接遮罩盖住。

• 3.高速动态马赛克

这个方案是可行的，并且在一些网站已经得到了应用，在视频或者图片上随机插像素点，动态跑来跑去，对客户来说，每一时刻屏幕上显示的都是完整的图像，靠用户的视觉残留看图或者视频。即时手机拍照也拍不完全。实际应用需要优化的点还是挺多的。比如用手机录像就可以看到完整内容，只是增加了截图成本。

下面是一个知乎上的方案效果。

原地址：https://www.zhihu.com/question/417108591/answer/1450568587

前端（vue）入门到精通课程：进入学习
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具：点击使用

正经需求vs方案

其实限制用户截图这个方案本身就不合理，除非整个设备都是定制的，在软件上阉割截图功能。为了这个需求添加更复杂的功能对于一些安全性没那么高的需求来说，有点本末倒置了。

下面聊聊正经方案：

1.对于后台系统敏感数据或者图片，主要是担心泄漏出去，可以采用斜45度七彩水印，想要完全去掉几乎不可能，就是观感比较差。

2.对于图片版权，可以使用现在主流的盲水印，之前看过腾讯云提供的服务，当然成本比较高，如果版权需求较大，使用起来效果比较好。

3.视频方案，tiktok下载下来的时候会有一个水印跑来跑去，当然这个是经过处理过的视频，非原画，画质损耗也比较高。Netflix等视频网站采用的是服务端权限控制，走的视频流，每次播放下载加密视频，同时获得短期许可，得到许可后在本地解密并播放，一旦停止播放后许可失效。

总之，除了类似于Android提供的截图API等底层功能，其他的功能实现都不完美。即使是底层控制了，一样可以拍照录像，没有完美的方案。不过还是可以做的相对安全。

以上就是深入聊聊前端限制用户截图的脑洞的详细内容，转载自php中文网