0%

Web如何防调试

概要内容

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

常用防调试方法

  • 屏蔽:相关按键 + 鼠标右键
  • 检测控制台是否打开
  • 检测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代码混淆

参考文献:

更多相关:


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

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