来为你的网站禁用掉调试工具？

14332223
217 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第18天，点击查看活动详情

前言

现在很多人都会去便携属于自己的博客网站，并且在这个网站上可能会有一些属于你自己的代码以及好看的样式，但是对于前端来说，哪怕你是压缩了代码，别人也能够根据关键词来获取你界面一些关键代码，更不用说样式了，通过调试工具给你抄的干干净净都是有可能的，所以本文我们来介绍一些能够禁用非开发者以外的人进行调试的方法。

本文方法仅适用于小白，大佬请绕道。

禁用调试的方法

  1. 首先比较基础的方法就是禁用掉网页的 f12 建 以及 鼠标的右击事件，又或者去监听浏览器的宽高大小是否发生变化，这属于比较基础的方法。

  2. 网页重定向，将网页重定向到另一个页面，比方说 www.baidu.com .

  3. 无限 debugger ，通过不断地触发 debugger 来禁止调试。

比较简单的直接禁用鼠标键盘，和监听浏览器窗口的我们就不说了，今天主要看一下 debugger 的原理

debugger 原理

debugger 禁用核心原理就是如果调试工具可用，则调试语句将执行.也就是经常一打开就跳出debugger。

打个最简单的例子

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Example DEBUGGER</title>
</head>
<body>
<script>
debugger;
</script>
</body>
</html>

在我们唤醒调试工具之后，就会触发 debugger 导致断点。

image.png

比较常见的无限制debugger、配合settimeout延迟debugger、代码混淆+debugger等等。但是本质上都是上面说的，如果调试工具可用，则调试语句将执行，所以我们可以根据这些原理，来写一个简单的dome。

<script type="text/javascript">
		setInterval(function () {
			check();
		}, 50);
		var check = function () {
			let timer = null;
			function doCheck(a) {
			    debugger
				doCheck(++a);
			}
			try {
				doCheck(0);
			} catch (err) {}
		};
		check();
	</script>

但是这个做法的缺点也很明显，只需要禁用掉断点调试工具就可以了，虽然无法在别的地方使用断点了，又或者使用谷歌提供的跳过断点的工具 add script ignore list

image.png

这样就可以比较完美的跳过这个断点。

那么要怎么避免 恶意用户使用 add script ignore list 来偷跑呢，我们可以把上面的 debugger 改写成为 Function("debugger")(); 的形式来应对，Function 构造器生成的 debugger 会在每一次执行时开启一个临时 js 文件

image.png

这样就无法添加 add script ignore list 了。

然后可以将 Function("debugger")(); 写成 (function () {}["constructor"]("debugger")());，并且把这串代码通过各种方法包装混淆一下，简单的实现一个防止调试的功能

在线地址：禁止调试1

总结

本文简单的举例了几种防止调试的方法，实现的原理也都非常的简单，并且附带上了一些小的demo，简单的实现了我所知道的禁用方式。

avatar
文章
阅读
粉丝