网络防盗图,前端做点什么呢?

前端比划

共 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应用平台等

浏览 43
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报