前端安全：反调试机制/防逆向/代码混淆

前端小王hs

于 2025-05-07 10:15:00 发布

阅读量1.8k

点赞数 47

分类专栏：笔记前端文章标签：前端安全前端小王hs javascript html5 webpack

本文链接：https://blog.csdn.net/weixin_44001222/article/details/147744358

版权

笔记同时被 2 个专栏收录

136 篇文章

订阅专栏

前端

57 篇文章

订阅专栏

前端小王hs：
清华大学出版社《后台管理实践——Vue.js+Express.js》作者 
网络工程师 前端工程师 项目经理 阿里云社区博客专家 

email: 337674757@qq.com
vx: 文章最下方有vx链接
资料/交流群： vx备注前端安全

前端安全

反调试机制（无限调试暂停）
防逆向/代码混淆
- webpack TerserPlugin
墨菲定律

研究这个主要是某次在某AI工具中打开 开发者工具的时候，页面进入了 无限调试暂停模式，就觉得也挺好玩的

前端反调试机制/防逆向/代码混淆主要用于防止用户查看源码/网络请求，在一定程度上能够提高代码的安全性

反调试机制（无限调试暂停）

当页面进入无限调试暂停时，会在页面顶部出现“已在调试程序中暂停”的效果，如下图所示：

本质上是在代码中调用了debugger，当代码执行到debugger时会触发调试器和暂停执行程序，通常用于打断点检查程序问题时使用

如果是正常的情况下，点击蓝色的继续执行（Resume Script Execution），那么会跳出调试，直到遇到下一个断点或debugger语句继续暂停
在这里插入图片描述
而无限调试，就是点击继续执行，还是会处在暂停的状态，其实原理非常简单，就是使用了setInterval，以及判断用户是否打开了开发者工具

示例代码如下：

    setInterval(function() {
        if (window.console && console.table) {
			console.log(111)
            debugger;
        }
    }, 1000);

window.console判断用户是否打开了控制台
console.table说明控制台已经被初始化了

当这两个情况同时出现时，说明用户打开了开发者工具，那么触发debugger
调试暂停

直接禁止F12默认行为

在打开控制台之前，可以直接将用户按F12即打开控制台的行为阻止，换句话说，就是按F12，不弹出开发者工具，代码如下：

<div class="original-content">
    <h1>欢迎访问我的网页</h1>
    <p>这是一个普通的网页内容。</p>
    <p>按 F12 查看效果。</p>
</div>

<!-- 屏蔽提示框 -->
<div id="blockOverlay" class="blocked-message" style="display:none;">
    禁止查看源码！
</div>

    // 监听按键事件
    document.addEventListener('keydown', function(event) {
        // 判断是否按下了 F12 键
        if (event.key === 'F12' || event.keyCode === 123) {
            // 阻止默认行为（如打开开发者工具）
            event.preventDefault();
            event.stopPropagation();

            // 显示屏蔽层
            document.getElementById('blockOverlay').style.display = 'flex';

            // 清空原有内容
            document.querySelector('.original-content').style.display = 'none';

            // 强制调试器中断
            debugger;

            // 禁用右键菜单
            window.oncontextmenu = function() {
                return false;
            };
        }
    });

在上面的代码中，默认情况下页面如下图所示：

当用户按F12时会将页面原本的内容置为none，切换为**禁止查看源码！**的内容，实现效果如下图所示：

禁止查看源码
当然，用户还可以点击浏览器右上角的设置，找到“开发者工具”，那么此时同样会进入无限调试，如下图所示：
打开开发者工具
而源码也是清晰可见的，并没有能够阻止用户查看源码，如下图所示：

但此时即无限调试下，网络请求是暂停的，这里就不做演示了！

如何取消无限调试？

那么如何取消无限调试呢？有两种方法，一种是停用JavaScript，一种是停用断点（欢迎在评论区指出其他好办法）

停用断点

当点击停用断点后刷新页面，页面即变为正常状态

注意：在这种情况下，网络请求也会正常进行请求

停用JavaScript

点击开发者工具右上角的设置按钮，如下图所示：

在设置页面的最下方找到停用JavaScript，进行勾选，如下图所示：

接着刷新，页面就会显示正常，并且不会进入无限调试暂停的状态

防逆向/代码混淆

如果不想源码被逆向工程轻易分析，那么可以对代码进行混淆，以在线的代码混淆工具JavaScript Obfuscator为例，JavaScript Obfuscator能够对代码
的变量进行重命名、字符串加密等操作，在其官网有一段简单的代码例子：

function hi() {
  console.log("Hello World!");
}
hi();

当进行混淆后，变为了一大串看似随机的代码，如下图所示：
混淆结果
此外，还有UglifyJS、谷歌提供的Closure Compiler等代码压缩和混淆工具

webpack TerserPlugin

在webpack中，可以使用TerserPlugin对代码进行压缩和混淆， erserPlugin能够去除代码中的注释、空格，并对变量名、函数名进行混淆以减小文件大小并增加逆向工程的难度

安装代码：

npm install terser-webpack-plugin --save-dev

// webpack中配置
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
};

墨菲定律

这里引用墨菲定律的一句话：任何可能出错的事情最终都会出错

而在代码中，则体现出作者越想隐藏代码，别人就越感兴趣，所以前端安全如果仅仅在前端做手段，那是远远不够的，还需在后端、数据库等方面共同努力

欢迎关注csdn前端领域博主: 前端小王hs，喜欢可以点个赞！您的支持是我不断更新的动力！

前端小王hs:
清华大学出版社《后台管理实践——Vue.js+Express.js》作者
网络工程师 前端工程师 项目经理 阿里云社区博客专家 

email: 337674757@qq.com
wx:最下方有联系方式
资料/交流群： vx备注前端安全