原文来自：Potter个人博客
概要内容
- 常用防调试方法
- 引入条件编译打包
常用防调试方法
- 屏蔽：相关按键 + 鼠标右键
- 检测控制台是否打开
- 检测DevTools 是否打开
- 工具类：
//*************************************************************************
// 创建日期: 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 引入和挂在即可
/* 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配置文件即可)
// 根据自己的喜好在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_条件变量 */
-
示例：
/* IFTRUE_isRelease */
import antiDebugUtils from "./utls/AntiDebugUtil";
antiDebugUtils.hook();
/*FITRUE_isRelease */
- 更多：
其实上面的一种方法就够我用了，你如需了解更多用法请查看API 传输门
最后：
现在我们知道怎么防调试了，那接下来怎么做到更安全，那就是把代码混淆掉。下一篇：Web代码混淆
参考文献：
更多相关：
- [conditional-compile-loader]developer.aliyun.com/mirror/npm/…
- webpack Vue条件编译
- 常见 Web 安全攻防总结
- 攻破Web防调试方法
以上: 如发现有问题，欢迎留言指出，我及时更正
