尤其是电商网站,难免会被人恶意盗图,惹上图片被侵权的烦恼。这里不说使用图片水印或采取法律手段来保护自己的合法权益。单纯的从前端视角,我们可以做些什么呢? 显然,我们可以从事前防范和事后分析两个维度来处理。做不了完美防范,但至少聊胜于无,大家有更好的建议,欢迎留言讨论。
事前: 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应用平台等

推荐内容