前端页面禁止别人调试的方法
1. 前端防止调试的思路与方法
我们都知道 debugger 在控制台被打开的时候就会执行， 前端页面防止调试的方法主要是通过不断 debugger 来疯狂输出断点，让控制台打开后程序就无法正常执行，以下是一个基本防止调式的代码：
(() => {
function block() {
setInterval(() => {
debugger;
}, 50);
}
try {
block();
} catch (err) {}
})();
这里需要说明以下几点：
1. 程序被 debugger 阻止了，我们无法像以往一样在 Source Tab 中的对应 JS 代码处添加断点调试，无法调试程序的执行逻辑。
2. 当我们打开控制台就会出被 debugger 阻止，所以想通过 network tab 来查看网页都做了哪些请求也是看不到的。
2. 禁止断点方法及对策
遇到防止调试我们可以禁止断点，在 Chrome 控制台的 Source Tab 页点击 Deactivate breakpoints 按钮或者按下 Ctrl + f8。
操作动画效果如下所示：
注意：上面的解决方法并没有帮我们解决根本问题，我们需要做的是调试，上面虽然把 debugger 都去掉了，但是我们也无法在通过点击每一行代码左边的行号添加 breakpoint 了，所以根本性的问题并没有解决，只是去除了那碍眼的疯狂 debugger。
如何防止恶意用户禁止断点呢？
将 setInterval(() =>{ debugger;},50); 写在一行中，你即使通过添加 logpoint 为 false 也没用，仍然是疯狂 debugger，即使你可能想到通过左下角的代码格式化来格式一下setInterval(() => {debugger;}, 50); 将它变成多行的也是没用，仍然会在刷新后重新弹 debugger。
(() => {
function block() {
setInterval(() => {debugger;}, 50);
}
try {
block();
} catch (err) {}
})();3. 突破防止调试的方法及对策
在对应的代码行添加logpoint为 false，然后按回车后刷新网页，发现成功跳过无限 debugger，于是我们就可以愉快的自由调试了。
对应的还有一种方法，即通过来添加 add script ignore list 需要忽略执行代码行或文件。
如果想恢复初始状态，可以通过删除 script ignore list 里已添加的忽略代码。
针对这种操作如何防止恶意用户呢？
我们可以通过将debugger改写成 Function("debugger")(); 的形式来应对，Function 构造器生成的 debugger 会在每一次执行时开启一个临时 js 文件，代码改造如下所示：
(() => {
function block() {
setInterval(() => {
Function("debugger")();
}, 50);
}
try {
block();
} catch (err) {}
})();
4. 防止调试方法增强
上面的代码由于没有加密混淆，多少可能还是会被别人读懂一些，我们可以尝试对代码进行加密混淆，如下所示：
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) {}
})();通过给 style 标签添加 style="display: block",contenteditable 两个属性实现在页面中便捷的调试样式。
复制下方代码到你的 html 文件中，建议试试。
<!DOCTYPE html>
<body>
<div>来调试我吧~</div>
<style style="display: block" contenteditable>
body {
background-color: rgb(140, 209, 230);
color: white;
}
div {
background-color: green;
width: 300px;
height: 300px;
line-height: 300px;
text-align: center;
}
</style>
</body>到此这篇关于前端页面禁止别人调试的方法的文章就介绍到这了,更多相关前端页面禁止别人调试内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
防抖与节流都是用来限制用户频发触发事件的机制,下面这篇文章主要给大家介绍了关于JavaScript中防抖和节流的实战应用,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-04-04
这篇文章主要介绍了JavaScript中判断函数、变量是否存在,本文给出了多个判断函数是否存在的方法,并分别给出代码实例,需要的朋友可以参考下2015-06-06
这篇文章主要介绍了ionic2中使用自动生成器的方法,需要的朋友可以参考下2018-03-03
用JS判别浏览器种类以及IE版本的几种方法小结，需要的朋友可以参考下。2011-08-08
这篇文章主要为大家详细介绍了js实现列表按字母排序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
这篇文章主要为大家详细介绍了javascript代码实现简易计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-01-01
本篇文章主要是对JS去掉第一个字符和最后一个字符的实现代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
JS具有阻塞特性,当浏览器在执行js代码时,不能同时做其它事情,下面这篇文章主要给大家介绍了关于js与css阻塞问题的相关资料,需要的朋友可以参考下2021-07-07
公司原先的JS和CSS文件都是用在线压缩程序压缩的，看似方便，但很容易出错，可能是压缩程序把CSS里面的一些Hack语句给混淆了，于是我决定用大名鼎鼎的YUI compressor。2011-01-01
本博客没有华丽的布局,只求朴实的js的代码,只为js代码爱好者提供,一周大概会出1-2篇js前沿代码的文章.只是代码,不说技术2011-12-12
最新评论