Potter's Blog

努力成为更强大的自我

0%

Web如何防调试

发表于 分类于 阅读次数： Valine：
本文字数： 4.8k 阅读时长 ≈ 4 分钟

概要内容

  • 常用防调试方法
  • 引入条件编译打包

常用防调试方法

  • 屏蔽：相关按键 + 鼠标右键
  • 检测控制台是否打开
  • 检测DevTools 是否打开
  • 工具类：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
//*************************************************************************
//     创建日期:     2020-12-23 04:12:52
//     文件名称:     AntiDebugUtil.js
//     创建作者:     Harry
//     版权所有:     剑齿虎
//     开发版本:     V1.0
//     相关说明:     反调试程序
//*************************************************************************

//-------------------------------------------------------------------------
function AntiDebugUtils() {

}

//-------------------------------------------------------------------------
/**
 * 监听按键 + 鼠标右键
 * */
AntiDebugUtils.prototype.registerKeyDown = function () {
  console.log("hook----->registerKeyDown");
  /*监听F12、Ctrl + Shift + I、Ctrl + S*/
  document.onkeydown = function (event) {
    if (event.key === "F12") {
      console.log("KeyDown: F12");
      event.returnValue = false;
    } else if (event.ctrlKey && event.shiftKey && event.key === "I") {//此处I必须大写
      console.log("KeyDown: Ctrl + Shift + I");
      event.returnValue = false;
    } else if (event.ctrlKey && event.key === "s") {//此处s必须小写
      console.log("KeyDown: Ctrl + S");
      event.returnValue = false;
    }
  };

  /*
* 监听右键菜单
* */
  document.oncontextmenu = function (event) {
    console.log("KeyDown: 鼠标右键");
    event.returnValue = false;
  };
}
//-------------------------------------------------------------------------
/*
* 检测控制台是否打开
* */
AntiDebugUtils.prototype.registerConsoleWindow = function () {
  console.log("hook----->registerConsoleWindow");
  setInterval(function () {
    const before = new Date();
    (function () {
    }).constructor("debugger")();
    // debugger;
    const after = new Date();
    const cost = after.getTime() - before.getTime();
    if (cost > 100) {
      console.log("registerConsoleWindow: 检测到打开了调试窗口");
      window.location = "about:blank";
    }
  }, 1000);
}
//-------------------------------------------------------------------------
/*
* 检测DevTools 是否打开
* */
AntiDebugUtils.prototype.registerDevTools = function () {
  console.log("hook----->registerDevTools");
  let div = document.createElement('div');
  let loop = setInterval(() => {
    console.log(div);
    console.clear();
  });
  Object.defineProperty(div, "id", {
    get: () => {
      clearInterval(loop);
      window.location = "about:blank";
    }
  });
}
//-------------------------------------------------------------------------
AntiDebugUtils.prototype.hook = function () {
  console.log("hook----->");
  // this.registerKeyDown();
  // this.registerConsoleWindow();
  // this.registerDevTools();
}
//-------------------------------------------------------------------------
const antiDebugUtils = new AntiDebugUtils();
export default antiDebugUtils;

  • 使用方法：main.js 引入和挂在即可
    1
    2
    3
    4
    /* IFTRUE_isRelease */
    import antiDebugUtils from "./utls/AntiDebugUtil";
    antiDebugUtils.hook();
    /*FITRUE_isRelease */

引入条件编译打包：

项目随着需求不断迭代开发，无法避免的会出现各种环境、各种渠道等，然后针对其打出不同的包，所以就需要我们去了解下条件编译，针对不同条件把不符合条件的代码(JS\CSS\HTML)排除，条件编译插件很多，推荐js-conditional-compile-loader插件，我针对JS\CSS\HTML 分别进行条件编译测试都通过，简单好用

  • 配置条件变量：修改webpack.base.conf.js中的配置(提示：如果使用不同版本Webpack，可能没有webpack.base.conf.js，那么找对应的webpack配置文件即可)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    // 根据自己的喜好在options中添加条件变量
    const conditionalCompiler = {
      loader: 'js-conditional-compile-loader',
      options: {
        isBeta: (process.env.ENV_CONFIG !== "prod") ? true : false,
        isRelease: (process.env.ENV_CONFIG === "prod") ? true : false
      }
    }

    // 找到module.exports中的module.rules, 修改成如下样子
    {
        test: /\.vue$/,
        use: ['vue-loader', conditionalCompiler],
    },
    {
    test: /\.js$/,
    include: [resolve('src'), resolve('test')],
    use: [
        //step-2
        'babel-loader?cacheDirectory',
        //step-1
        conditionalCompiler,
    ],
    },

  • 使用方法：

    / IFTRUE_条件变量 / you need contorl coding.. /FITRUE_条件变量 /

  • 示例：

1
2
3
4
/* IFTRUE_isRelease */
import antiDebugUtils from "./utls/AntiDebugUtil";
antiDebugUtils.hook();
/*FITRUE_isRelease */
  • 更多：

    其实上面的一种方法就够我用了，你如需了解更多用法请查看API 传输门

最后：

现在我们知道怎么防调试了，那接下来怎么做到更安全，那就是把代码混淆掉。下一篇：Web代码混淆

参考文献：

更多相关：

以上: 如发现有问题，欢迎留言指出，我及时更正

如何文章对你有益，请给我买杯豆浆喝