记录--别想调试我的前端页面代码

🧑‍💻 写在开头

点赞 + 收藏 === 学会🤣🤣🤣

这里我们不介绍禁止右键菜单, 禁止F12快捷键代码混淆方案。

无限debugger

  • 前端页面防止调试的方法主要是通过不断 debugger 来疯狂输出断点,因为 debugger 在控制台被打开的时候就会执行
  • 由于程序被 debugger 阻止,所以无法进行断点调试,所以网页的请求也是看不到的.

基础方案

(() => {
  function ban() {
    setInterval(() => { debugger; }, 50);
  }
  try {
    ban();
  } catch (err) { }
})();
  • setInterval 中的代码写在一行,可以禁止用户断点,即使添加 logpointfalse 也无用
  • 当然即使有些人想到用左下角的格式化代码,将其变成多行也是没用的

浏览器宽高

根据浏览器宽高、与打开F12后的宽高进行比对,有差值,说明打开了调试,则替换html内容;

  • 通过检测窗口的外部高度和宽度与内部高度和宽度的差值,如果差值大于 200,就将页面内容设置为 "检测到非法调试"。
  • 通过使用间隔为 50 毫秒的定时器,在每次间隔内执行一个函数,该函数通过创建一个包含 debugger 语句的函数,并立即调用该函数的方式来试图阻止调试器的正常使用。
(() => {
  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) { }
})();

关闭断点,调整空页面

在不打开发者工具的情况下,debugger是不会执行将页面卡住,而恰恰是利用debugger的这一点,如果你打开开发者工具一定会被debugger卡住,那么上下文时间间隔就会增加,在对时间间隔进行判断,就能巧妙的知道绝对开了开发者工具,随后直接跳转到空白页,一气呵成。(文心一言采用方案)

setInterval(function () {
  var startTime = performance.now();
  // 设置断点
  debugger;
  var endTime = performance.now();
  // 设置一个阈值,例如100毫秒
  if (endTime - startTime > 100) {
    window.location.href = 'about:blank';
  }
}, 100);

第三方插件

disable-devtool

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

该库有以下特性:

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

🦂使用🦂

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

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

disable-devtool

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

使用

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

在项目中使用:

  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: () => {
    // ...
  }
})

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

参数

注:redirectwritecallback 三种策略只能取其一,优先使用回调函数。

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

热门相关:极品妖孽归来   误踩老公底线:甜心难招架!   娘娘每天都在洗白   战斗就变强   剑斗九天