前端反调试初探

任何网页开发者出于对自己网页的保护，都不想自己的前端代码被他人窃取或者抄袭。虽然我们平时都在忙着往代码里面写BUG，但是依然阻止他人对你代码的觊觎。

由此，前端反调试需求应运而生。

在平时的项目开发中，有大概下面几个常见的前端反调试技术：

公众号后台回复【反调试】获取源代码。

一、无限debugger反调试

代码很简单，就一行，作用是让用户打开开发者工具后，前端页面直接进入debugger界面，阻止用户的进一步操作，这样用户无法在界面进行常规操作，也就无法知道程序的执行逻辑。

（点击图片放大）

注意事项：

1、一定要使用匿名函数。否则别人直接在控制台重定义函数就完了，比如：function startDebug() {};

2、一定要写在一行。否则别人可以通过设置条件断点false，来使debugger失效。

代码虽然简单，但是却很有效。

它会不停地打断你，页面跳到source页面，阻止你看他代码不断的产生不可回收的对象，占据你的内存，造成内存泄漏，没过多久浏览器就会卡顿。

缺点：可以通过禁用浏览器断点功能（Deactivate breakpoints）来禁止debugger，但是也存在很大的缺陷，因为对于其他代码，我们还是需要断点调试功能的。所以这个方法仅限于静态分析。

二、禁用F12等按键

通过JavaScript阻止F12，鼠标右键等默认打开开发者工具的操作。

没啥好说的，直接上代码（点击图片放大）。

“return false”，

“ event.preventDefault()” 和  “event.stopPropagation()” 三者的区别？

• event.preventDefault(); 阻止浏览器默认行为

• event.stopPropagation() ：阻止事件冒泡

• return false:

• • 在jQuery中，等于前两者之和。

  • 在非jQuery中，等于event.preventDefault();，并不能阻止事件冒泡。

参考链接：event-preventdefault-vs-return-false^[1]

三、禁用F12等按键并debugger

通过第二步，禁止F12等按键后，虽然无法使用快捷键进入调试工具，但是如果通过浏览器右上角的【设置】，进入【更多工具】，再打开【开发人员工具】，调试界面还是可以打开的。

那么我们就要在他进入【开发人员工具】后，也要打开debugger，所以我们在第二步的基础上进行优化。

直接上代码了（点击图片放大）：

加了一段反调试代码，如果还是打开了控制台，无限debugger，并且网页变得极其卡顿。

参考链接：

• https://app.yinxiang.com/fx/f30b911e-8e33-4823-bcb6-4fcf89274b17^[2]

• https://segmentfault.com/a/1190000011461827^[3]

这样我们的前端反调试就完成了，能防住一些基本的小白用户，但是无法防住真正的大神。

那么，“反反调试”也出现了，真是道高一尺，魔高一丈。

可以参考这篇文章：前端Chrome反《反调试》^[4]

公众号后台回复【反调试】获取源代码。

（完）

参考资料

[1]

event-preventdefault-vs-return-false: https://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false

[2]

https://app.yinxiang.com/fx/f30b911e-8e33-4823-bcb6-4fcf89274b17: https://app.yinxiang.com/fx/f30b911e-8e33-4823-bcb6-4fcf89274b17

[3]

https://segmentfault.com/a/1190000011461827: https://segmentfault.com/a/1190000011461827

[4]

前端Chrome反《反调试》: https://www.zhangbj.com/p/586.html