禁止别人调试自己的前端页面代码
程序员成长指北
共 4588字,需浏览 10分钟
· 2023-09-01
大厂技术 高级前端 Node进阶
点击上方 程序员成长指北,关注公众号
回复1,加入高级Node交流群
🎈 为啥要禁止?
-
由于前端页面会调用很多接口,有些接口会被别人爬虫分析,破解后获取数据 -
为了 杜绝 这种情况,最简单的方法就是禁止人家调试自己的前端代码
🎈 无限 debugger
-
前端页面防止调试的方法主要是通过不断 debugger
来疯狂输出断点,因为debugger
在控制台被打开的时候就会执行 -
由于程序被 debugger
阻止,所以无法进行断点调试,所以网页的请求也是看不到的 -
基础代码如下:
/**
* 基础禁止调试代码
*/
(() => {
function ban() {
setInterval(() => {
debugger;
}, 50);
}
try {
ban();
} catch (err) { }
})();
🎈 无限 debugger 的对策
-
如果仅仅是加上面那么简单的代码,对于一些技术人员而言作用不大 -
可以通过控制台中的 Deactivate breakpoints
按钮或者使用快捷键Ctrl + F8
关闭无限debugger
-
这种方式虽然能去掉碍眼的 debugger
,但是无法通过左侧的行号添加breakpoint
🎈 禁止断点的对策
-
如果将 setInterval
中的代码写在一行,就能禁止用户断点,即使添加logpoint
为false
也无用 -
当然即使有些人想到用左下角的格式化代码,将其变成多行也是没用的
(() => {
function ban() {
setInterval(() => { debugger; }, 50);
}
try {
ban();
} catch (err) { }
})();
🎈 忽略执行的代码
-
通过添加 add script ignore list
需要忽略执行代码行或文件 -
也可以达到禁止无限 debugger
🎈 忽略执行代码的对策
-
那如何针对上面操作的恶意用户呢 -
可以通过将 debugger
改写成Function("debugger")();
的形式来应对 -
Function
构造器生成的debugger
会在每一次执行时开启一个临时js
文件 -
当然使用的时候,为了更加的安全,最好使用加密后的脚本
// 加密前
(() => {
function ban() {
setInterval(() => {
Function('debugger')();
}, 50);
}
try {
ban();
} catch (err) { }
})();
// 加密后
eval(function(c,g,a,b,d,e){d=String;if(!"".replace(/^/,String)){for(;a--;)e[a]=b[a]||a;b=[function(f){return e[f]}];d=function(){return"\w+"};a=1}for(;a--;)b[a]&&(c=c.replace(new RegExp("\b"+d(a)+"\b","g"),b[a]));return c}('(()=>{1 0(){2(()=>{3("4")()},5)}6{0()}7(8){}})();',9,9,"block function setInterval Function debugger 50 try catch err".split(" "),0,{}));
🎈 终极增强防调试代码
-
为了让自己写出来的代码更加的晦涩难懂,需要对上面的代码再优化一下 -
将 Function('debugger').call()
改成(function(){return false;})['constructor']('debugger')['call']();
-
并且添加条件,当窗口外部宽高和内部宽高的差值大于一定的值 ,我把 body
里的内容换成指定内容 -
当然使用的时候,为了更加的安全,最好加密后再使用
(() => {
function block() {
if (window.outerHeight - window.innerHeight > 200 || window.outerWidth - window.innerWidth > 200) {
document.body.innerHTML = "检测到非法调试,请关闭后刷新重试!";
}
setInterval(() => {
(function () {
return false;
}
['constructor']('debugger')
['call']());
}, 50);
}
try {
block();
} catch (err) { }
})();
作者:极客飞兔
链接:https://juejin.cn/post/7262175454714626108
Node 社群
我组建了一个氛围特别好的 Node.js 社群,里面有很多 Node.js小伙伴,如果你对Node.js学习感兴趣的话(后续有计划也可以),我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。
“分享、点赞、在看” 支持一下
评论
金融研究 | 使用Python测量关键审计事项的「信息含量」
Tips: 公众号推送后内容只能更改一次,且只能改20字符。如果内容出问题,或者想更新内容, 只能重复推送。为了更好的阅读体验,建议阅读本文博客版, 链接地址https://textdata.cn/blog/2023-01-13-information-content-of-critical-aud
大邓和他的Python
0
我看阿里的年终奖总算发了!
到4月底了,这两天看朋友圈,发现阿里的年终奖终于发了,问了问老同学,也从网上检索了不少信息,基本搞清楚了阿里今年的年终奖情况。近来来阿里一些集团对绩效等级做了较大的调整,以前的旧绩效系统中,绩效分为3.25、3.5、3.75、4和5五个等级,其中4和5是较高绩效等级,较少见。而且之前3.5绩效内部划
公子龙
0
金融研究(更新) | 使用Python构建关键审计事项的「信息含量」
Tips: 公众号推送后内容只能更改一次,且只能改20字符。如果内容出问题,或者想更新内容, 只能重复推送。为了更好的阅读体验,建议阅读本文博客版, 链接地址https://textdata.cn/blog/2023-01-13-information-content-of-critical-aud
大邓和他的Python
0
盘点Lombok的几个骚操作,你绝对没用过!
👉 欢迎加入小哈的星球 ,你将获得: 专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡 / 赠书福利全栈前后端分离博客项目 2.0 版本完结啦, 演示链接:http://116.62.199.48/ ,新项目正在酝酿中
小哈学Java
0
堪称最优秀的Docker可视化管理工具——Portainer你真的会用吗?
来源:blog.csdn.net/shark_chili3007/article/details/123366179👉 欢迎加入小哈的星球 ,你将获得: 专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡 / 赠书福利全栈前后端分离博客项目
小哈学Java
0
Apache Paimon毕业,湖仓架构的未来发展趋势!
北京时间 2024 年 4 月 16日,开源软件基金会 Apache Software Foundation(以下简称 ASF)正式宣布 Apache Paimon 毕业成为 Apache 顶级项目(TLP, Top Level Project)。经过社区的共同努力和持续创新,Apache Paim
程序源代码
0
【深度学习】人人都能看懂的LSTM
熟悉深度学习的朋友知道,LSTM是一种RNN模型,可以方便地处理时间序列数据,在NLP等领域有广泛应用。在看了台大李宏毅教授的深度学习视频后,特别是介绍的第一部分RNN以及LSTM,整个人醍醐灌顶。本文就是对视频的记录加上了一些个人的思考。0. 从RNN说起循环神经网络(Recurrent Neur
机器学习初学者
0
老爸嘲讽我了,写破代码一年就挣十几万,他在工地带50个工人,一个月光人头费就3万,让我滚回去跟他干!
点击上方 "大数据肌肉猿"关注, 星标一起成长点击下方链接,进入高质量学习交流群今日更新| 1052个转型案例分享-大数据交流群来自:网络,侵删有个网友的父亲是做工程的,天天就嘲笑他,说他天天写着破代码有啥用,一年就拿个十多万的死工资,然后告诉他自己在工地里面带了50个工人,一个月能抽三万
程序源代码
0