简单实现禁止调试前端页面代码

由于前端页面会调用很多接口，有些接口会被别人爬虫分析，破解后获取数据
为了杜绝这种情况，最简单的方法就是禁止人家调试自己的前端代码

要禁止别人调试自己的前端页面代码,主要有以下几种方案:

无限debugger

这是最常见的方法,通过不断执行debugger语句来疯狂输出断点,从而阻止代码调试。
基础代码:

(() => {
  function ban() {
    setInterval(() => {
        debugger;
    }, 50);
    try {
      ban();
    } catch (err) {}
  }
})();

禁止断点

将setInterval中的debugger代码写在一行,就能禁止用户添加断点,即使添加logpoint为false也无用。

(() => {
  function ban() {
    setInterval(() => {debugger;}, 50);
    try {
      ban();
    } catch (err) {}
  }
})();

忽略执行代码的对策

针对通过”add script ignore list”忽略执行代码行的做法,可以将debugger改写成Function(“debugger”)();的形式。Function构造器生成的debugger会在每次执行时开启一个临时js文件,从而绕过忽略。

阻止打开控制台

阻止用户通过快捷键(如F12)或右键菜单打开浏览器控制台。

window.onkeydown = window.onkeyup = window.onkeypress = function(event) {
  if (event.keyCode === 123) { // 判断是否按下F12
    event.preventDefault(); // 阻止默认事件行为
    window.event.returnValue = false;
  }
}

window.oncontextmenu = function() {
  event.preventDefault(); // 阻止默认事件行为
  return false;
}

监听控制台打开

利用Error对象的get函数,实现了控制台触发的监听。当用户打开控制台时,页面会自动刷新或跳转到其他页面,阻止调试。

第三方插件

disable-devtool

disable-devtool 可以禁用所有一切可以进入开发者工具的方法，防止通过开发者工具进行的 ‘代码搬运’

快速使用

npm 引用

npm i disable-devtool

import DisableDevtool from 'disable-devtool';

DisableDevtool();

script属性配置

<script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool'></script>

或者通过版本引用:

<!--使用指定版本-->
<script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool@x.x.x'></script>
<!--使用最新版本-->
<script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool@latest'></script>

功能

支持可配置是否禁用右键菜单
禁用 f12 和 ctrl+shift+i 等快捷键
支持识别从浏览器菜单栏打开开发者工具并关闭当前页面
开发者可以绕过禁用 (url参数使用tk配合md5加密)
多种监测模式，支持几乎所有浏览器（IE,360,qq浏览器,FireFox,Chrome,Edge…）
高度可配置、使用极简、体积小巧
支持npm引用和script标签引用(属性配置)
识别真移动端与浏览器开发者工具设置插件伪造的移动端，为移动端节省性能
支持识别开发者工具关闭事件
支持可配置是否禁用选择、复制、剪切、粘贴功能
支持识别 eruda 和 vconsole 调试工具
支持挂起和恢复探测器工作
支持配置ignore属性，用以自定义控制是否启用探测器
支持配置iframe中所有父页面的开发者工具禁用

更多使用方法参见官网：disable-devtool

console-ban

console-ban禁止 F12 / 审查开启控制台，保护站点资源、减少爬虫和攻击的轻量方案，支持重定向、重写、自定义多种策略。

使用

直接引入

<script src="https://cdn.jsdelivr.net/npm/console-ban@5.0.0/dist/console-ban.min.js"></script>
<script>
// default options
ConsoleBan.init()
// custom options
ConsoleBan.init({
  redirect: '/404'
})
</script>

在项目中使用

yarn add console-ban

import { init } from 'console-ban'

init(options)

重定向

ConsoleBan.init({
  // 重定向至 /404 相对地址
  redirect: '/404',
  // 重定向至绝对地址
  redirect: 'http://domain.com/path'
})

使用重定向策略可以将用户指引到友好的相关信息地址（如网站介绍），亦或是纯静态 404 页面，高防的边缘计算或验证码等页面。

注：若重定向后的地址可以通过 SPA 路由切换或 pjax 局部加载技术等进行非真正意义上的页面切换，则切换后的控制台监测将不会再次生效，对于 SPA 你可以在路由卫士处重新注册本实例，其他情况请引导至真正的其他页面。

重写

var div = document.createElement('div')
div.innerHTML = '不要偷看啦~'

ConsoleBan.init({
  // 重写 body 为字符串
  write: '<h1> 不要偷看啦~ </h1>',
  // 可传入节点对象
  write: div
})

重写策略可以完全阻断对网站内容的审查，但较不友好，不推荐使用。

回调函数

ConsoleBan.init({
  callback: () => {
    // ...
  }
})

回调函数支持自定义打开控制台后的策略。

总结

以上是一些简单的禁止调试前端页面代码的方法,但是这些方法都是可以绕过的,只能起到一定的防护作用,不能完全禁止调试。因此，对于一些敏感信息或关键逻辑，最好的方式是在后端进行处理，而不是完全依赖前端来保护。