前端怎么样限制用户截图?

简介: 其实限制用户截图这个方案本身就不合理,除非整个设备都是定制的,在软件上阉割截图功能。为了这个需求添加更复杂的功能对于一些安全性没那么高的需求来说,有点本末倒置了。下面聊聊正经方案:1.对于后台系统敏感数据或者图片,主要是担心泄漏出去,可以采用斜45度七彩水印,想要完全去掉几乎不可能,就是观感比较差。2.对于图片版权,可以使用现在主流的盲水印,之前看过腾讯云提供的服务,当然成本比较高,如果版权需求较大,使用起来效果比较好。3.视频方案,tiktok下载下来的时候会有一个水印跑来跑去,当然这个是经过处理过的视频,非原画,画质损耗也比较高。Netflix等视频网站采用的是服务端权限控制,走的

做后台系统,或者版权比较重视的项目时,产品经常会提出这样的需求:能不能禁止用户截图?有经验的开发不会直接拒绝产品,而是进行引导。


先了解初始需求是什么?是内容数据过于敏感,严禁泄漏。还是内容泄漏后,需要溯源追责。不同的需求需要的方案也不同。来看看就限制用户截图,有哪些脑洞?

有哪些脑洞

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

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

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

2.失焦后加遮罩层

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

3.高速动态马赛克

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


下面是一个知乎上的方案效果。(原地址):

1721811203826.jpg

正经需求vs方案

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


下面聊聊正经方案:

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

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

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


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

相关文章
|
6月前
|
移动开发 前端开发 JavaScript
前端vue3——html2canvas给网站截图生成宣传海报
前端vue3——html2canvas给网站截图生成宣传海报
230 0
|
移动开发 前端开发 JavaScript
【项目笔记】:前端canvas截图功能
canvasAPI、canvas音视频截图功能及注意事项
276 0
|
人工智能 前端开发 JavaScript
AI能代替前端开发吗?以一键截图分享为例,看看AI到底有多强
AI能代替前端开发吗?以一键截图分享为例,看看AI到底有多强
150 0
|
前端开发
前端hook项目pc总结笔记-开发中用的截图工具
前端hook项目pc总结笔记-开发中用的截图工具
90 0
前端hook项目pc总结笔记-开发中用的截图工具
|
安全 前端开发 API
前端怎么样限制用户截图?
做后台系统,或者版权比较重视的项目时,产品经常会提出这样的需求:能不能禁止用户截图?有经验的开发不会直接拒绝产品,而是进行引导。
258 0
|
前端开发 安全 API
前端怎么样限制用户截图?
前端怎么样限制用户截图?
196 0
前端怎么样限制用户截图?
|
前端开发 安全 程序员
前端如何限制用户截图
前端如何限制用户截图
|
数据采集 移动开发 前端开发
前端如何实现一键截图功能?
网页截图功能目前也是非常常见的需求, 尤其是在在线教育领域. 我们朋友圈的微信海报, 活动海报等, 一般都是运营/市场人员通过设计工具设计而成, 但是如何更好的映射到自己的服务体系里面, 比如H5页面中, 植入更多信息收集, 交互能力. 这一块的应用探索, 页面截图是一个非常好的解决方案.
413 0
|
数据采集 Web App开发 弹性计算
有了 serverless,前端也可以快速开发一个 Puppeteer 网页截图服务
本文介绍了如何用函数计算产品来快速部署一个 Puppeteer Web 应用。
有了 serverless,前端也可以快速开发一个 Puppeteer 网页截图服务
|
14天前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。