前端反调试初探

这是我参与更文挑战的第14天，活动详情查看： 更文挑战

大家好，我是前端队长Daotin，想要获取更多前端精彩内容，关注我，解锁前端成长新姿势。

以下正文：

任何网页开发者出于对自己网页的保护，都不想自己的前端代码被他人窃取或者抄袭。虽然我们平时都在忙着往代码里面写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

三、禁用F12等按键并debugger

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

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

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

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

参考链接：

• app.yinxiang.com/fx/f30b911e…
• segmentfault.com/a/119000001…

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

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

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

（完）

最近热门文章：

• 图片瀑布流，就是如此简单（so easy）
• 梳理ajax跨域常用4种解决方案（简单易懂）
• Vue.js命名风格指南（易记版）

以上，如果你看了觉得对你有所帮助，就点个赞叭，这样Daotin也有更新下去的动力，跪谢各位父老乡亲啦~~~ 听说喜欢点赞的人，一个月内都会有好运降临哦 ~~