前端小王hs：
清华大学出版社《后台管理实践——Vue.js+Express.js》作者 
网络工程师 前端工程师 项目经理 阿里云社区博客专家 
email: 337674757@qq.com
vx: 文章最下方有vx链接
资料/交流群： vx备注前端安全

前端安全

• 反调试机制（无限调试暂停）
• • 直接禁止F12默认行为
  • 如何取消无限调试？
  • • 停用断点
    • 停用JavaScript
    • 防逆向/代码混淆
    • • webpack TerserPlugin
      • 墨菲定律

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

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

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

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

        

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

        如果是正常的情况下，点击蓝色的继续执行（Resume Script Execution），那么会跳出调试，直到遇到下一个断点或debugger语句继续暂停

        

        而无限调试，就是点击继续执行，还是会处在暂停的状态，其实原理非常简单，就是使用了setInterval，以及判断用户是否打开了开发者工具

        示例代码如下：

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

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

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

        

        直接禁止F12默认行为

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

        
            
        欢迎访问我的网页
            
        这是一个普通的网页内容。
            
        按 F12 查看效果。
        
        
        
            禁止查看源码！
        
        

            // 监听按键事件
            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备注前端安全