网络防盗图，前端做点什么呢？-轻识

网络防盗图，前端做点什么呢？

前端比划

共 1243字，需浏览 3分钟

2023-08-02 07:00

尤其是电商网站，难免会被人恶意盗图，惹上图片被侵权的烦恼。这里不说使用图片水印或采取法律手段来保护自己的合法权益。单纯的从前端视角，我们可以做些什么呢？

显然，我们可以从事前防范和事后分析两个维度来处理。做不了完美防范，但至少聊胜于无，大家有更好的建议，欢迎留言讨论。

事前：

1、使用背景图，规避直接右键就能下载保存图片、复制图片地址

2、禁用contextmenu事件，不显示上下文菜单，规避直接保存下载。

3、在图片上覆盖一张指殊图片，让其视觉隐藏opacity设为0，让其下载时默认得到这张不正确的图片

4、img标签图片，根据情况设置图片样式pointer-events:none；此时上下文菜单不会显示图片相关操作

5、SEO无要求的，图片地址用js赋值，部分防范脚本形式的抓取

6、大图切片展示，将大图拆分为几张小图，另一层面，也能一定程度上提升正常用户的浏览体验。

7、针对查看浏览器开发者控制台的情形，可以考虑进行一些简单干扰，如让其持续断点等。可以在npm上直接搜索判别devtool是否打开的库。

//简单中断开发者调试setInterval(function () {    var startTime = new Date().getTime();    var timer = setTimeout(function () {        $('body').removeClass('except-visit-mask');    }, 1e3);    debugger;    var endTime = new Date().getTime();    if(endTime - startTime > 300) {        if(timer != null) {            clearTimeout(timer);        }        // 认为开发者工具已开启        $('body').addClass('except-visit-mask');    }}, 2e3);

事后：

1、禁止异常访问，如根据IP、user-agent、语言、地区等，或正常流量理应包含的请求特征；

2、向恶意盗图者本身站点及相关服务商投诉，如电商平台、CDN供应商、app应用平台等