当前位置:首页 > 软件开放 > 正文内容

textarea屏蔽js代码(css屏蔽代码)

软件开放7个月前 (04-07)314

来自公众号:前端充电宝

来自公众号:前端充电宝

有时候不希望用户去调试或复制前端代码,那该如何禁止用户调试前端代码呢?今天就来分享一个开源的前端工具:Disable Devtool,一行代码禁用 Web 开发者工具!

功能简介

disable-devtool 可以禁用一切可以进入开发者工具的方法,阻止通过开发者工具进行的“代码抓取”。

它具有以下特点:

支持可配置是否禁用右键菜单

取消 f12 和 ctrl+shift+i 等快捷键

支持识别从浏览器菜单栏打开开发者工具并关闭当前页面

开发者可以绕过拒绝(url参数使用tk配合md5加密)

多种监测模式,支持几乎所有浏览器(IE,360,QQ浏览器,FireFox,Chrome,Edge...)

高度可配置、使用极简、体积紧凑

支持npm引用和脚本标签引用(属性配置)

识别真移动端与浏览器开发者工具设置插件格式化的移动端,为移动端节省性能

支持识别开发者工具关闭事件

支持可配置是否取消选择、复制、剪切、粘贴功能

支持识别eruda和vconsole调试工具

支持挂起和恢复支架工作

支持配置ignore属性,默认自定义控制是否启用

支持配置 iframe 中所有父页面的开发者工具禁用

推荐使用 npm 进行安装(使用脚本会被代理单独拦截掉从而无法执行),安装 disable-devtool:

npm i disable-devtool

基本使用:

importDisableDevtool from'disable-devtool';

DisableDevtool(options);

这里的 options 就是配置项。可配置参数如下:

interfaceIConfig {

md5?:string;// 绕过禁用的md5值,详情见3.2,默认不启用绕过禁用

url?:string;// 关闭页面失败时的跳转页面,默认值为localhost

tkName?:string;// 绕过禁用时的url参数名称,默认为 ddtk

ondevtoolopen?(type:DetectorType,next:Function):void;// 开发者面板打开的回调,启用时url参数无效,type 为监测模式,详见3.5, next函数是关闭当前窗口

ondevtoolclose?:void;// 开发者面板关闭的回调

interval?:number;// 定时器的时间间隔 默认200ms

disableMenu?:boolean;// 是否禁用右键菜单 默认为true

stopIntervalTime?:number;// 在移动端时取消监视的等待时长

展开全文

clearIntervalWhenDevOpenTrigger?:boolean;// 是否在触发之后停止监控 默认为false, 在使用ondevtoolclose时该参数无效

detectors?:ArrayDetectorType;// 启用的检测器 检测器详情见 3.5 默认为全部,建议使用全部

clearLog?:boolean;// 是否每次都清除log

disableSelect?:boolean;// 是否禁用选择文本 默认为false

disableCopy?:boolean;// 是否禁用复制 默认为false

disableCut?:boolean;// 是否禁用剪切 默认为false

disablePaste:boolean;// 是否禁用粘贴 默认为false

ignore?:(string|RegExp)[]|null|(=boolean);// 某些情况忽略禁用

disableIframeParents?:boolean;// iframe中是否禁用所有父窗口

timeOutUrl?:// 关闭页面超时跳转的url;

}

DisableDevtool 的返回值类型如下:

interfaceIDDResult {

success:boolean;// 表示是否正常启用

reason:string;// 未正常启用的原因

}

Disable-Devtool 有以下监测模式,使用 detectors定义:

enumDetectorType {

Unknown =-1,

RegToString =0,// 根据正则检测

DefineId,// 根据dom id检测

Size,// 根据窗口尺寸检测

DateToString,// 根据Date.toString 检测

FuncToString,// 根据Function.toString 检测

Debugger,// 根据断点检测,仅在ios chrome 真机情况下有效

Performance,// 根据log大数据性能检测

DebugLib,// 检测第三方调试工具 eruda 和 vconsole

};

ondevtoolopen事件的回调参数就是被触发的监测模式。可以在 ondevtoolopen里执行业务逻辑,比如做数据上报、用户行为分析等:

DisableDevtool({

ondevtoolopen(type,next){

alert('Devtool opened with type:'+type);

next;

}

textarea屏蔽js代码(css屏蔽代码)

});

那么问题来了,如果把 Devtools 禁用了,那如果线上应用出了问题,作为应用的开发者,也是无法调试的,怎么办呢?该工具的作者当然想到了这一点,它使用 key 与 md5 配合的方式使开发者可以在线上绕过禁用。

使用流程:指定一个 key a(该值不要记录在代码中),使用 md5 加密得到一个值 b,将 b 作为 md5 参数传入,开发者在访问 url 的时候只需要带上url参数 ?ddtk=a即可绕过禁用。

disableDevtool对象暴露了 md5 方法,可供开发者加密时使用:

DisableDevtool.md5('xxx');

---END---

扫描二维码推送至手机访问。

版权声明:本文由飞速云SEO网络优化推广发布,如需转载请注明出处。

本文链接:http://muyuzhen.com/post/103477.html

分享给朋友:

“textarea屏蔽js代码(css屏蔽代码)” 的相关文章

软件开发详细设计文档(软件开发详细设计文档自动生成工具)

软件开发详细设计文档(软件开发详细设计文档自动生成工具)

本篇文章给大家谈谈软件开发详细设计文档,以及软件开发详细设计文档自动生成工具对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、软件开发文档的分类 2、软件开发中详细设计文档现在是必须的么?如果不是用什么取代? 3、软件开发需要编写哪些文档? 软件开发文档的分类...

夜猫下载(夜猫下载是什么)

夜猫下载(夜猫下载是什么)

本篇文章给大家谈谈夜猫下载,以及夜猫下载是什么对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、夜猫的呼唤电子书txt全集下载 2、如何下载夜猫视频? 3、夜猫电子书txt全集下载 4、《夜猫》txt全集下载 5、山海夜猫小助手怎么下载 夜猫的呼唤电子书t...

数字藏品怎么交易赚钱(藏品怎样交易)

数字藏品怎么交易赚钱(藏品怎样交易)

本篇文章给大家谈谈数字藏品怎么交易赚钱,以及藏品怎样交易对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、数字藏品怎么卖掉赚钱,齐白石的五虾图数字藏品 2、数字藏品怎么赚钱 3、数字藏品都能交易吗? 4、数字藏品在哪里交易 5、老弟问我数字藏品买卖赚钱吗...

电脑怎么安装音频设备Windows8(win7电脑怎么安装音频设备)

电脑怎么安装音频设备Windows8(win7电脑怎么安装音频设备)

本篇文章给大家谈谈电脑怎么安装音频设备Windows8,以及win7电脑怎么安装音频设备对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、win7电脑没有音频设备怎么办? 2、win8没有相应的声卡驱动没声音怎么办? 3、电脑没有声音怎么办windows10 4...

好大学在线网站官网(好大学在线是什么)

好大学在线网站官网(好大学在线是什么)

今天给各位分享好大学在线网站官网的知识,其中也会对好大学在线是什么进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、好大学在线是免费的吗 2、线上教学平台有哪些 3、好大学在线小程序怎么登录 好大学在线是免费的吗 好大学在线”免费提供的平台及课程服务...

女生说可遇不可求是什么意思(女生对男生说可遇不可求是什么意思)

女生说可遇不可求是什么意思(女生对男生说可遇不可求是什么意思)

本篇文章给大家谈谈女生说可遇不可求是什么意思,以及女生对男生说可遇不可求是什么意思对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、你对一个人表白的时候,她和你说“感情的事,是可遇不可求的”是什么意思啊? 2、分手后,女朋友哭着对我说,你是我的可遇不可求,可遇不可留,可...