可通过五种技术实现HTML5中JS混淆加密：一、javascript-obfuscator工具；二、Webpack+webpack-obfuscator插件；三、Terser插件高级配置；四、HTML内联Base64动态解密；五、服务端Node.js实时混淆注入。
如果您希望对 HTML5 页面中的 JavaScript 代码进行混淆或打包加密，以增加逆向分析难度，则需借助前端构建工具或专用混淆库。以下是实现该目标的多种技术路径：
一、使用 JavaScript 混淆工具（如 javascript-obfuscator）
该方法通过语法转换、字符串编码、控制流扁平化等手段，使源码逻辑难以被直接阅读，适用于单文件或少量脚本场景。
1、在项目根目录执行 npm install --save-dev javascript-obfuscator 安装依赖。
2、创建 obfuscate.js 文件，写入如下内容：const fs = require('fs'); const obfuscator = require('javascript-obfuscator'); const code = fs.readFileSync('src/app.js', 'utf8'); const result = obfuscator.obfuscate(code, { controlFlowFlattening: true, stringArray: true, rotateStringArray: true }); fs.writeFileSync('dist/app.obf.js', result.getObfuscatedCode());
立即学习“前端免费学习笔记（深入）”；
3、运行 node obfuscate.js 生成混淆后的 JS 文件。
二、通过 Webpack + webpack-obfuscator 插件打包加密
该方式将混淆集成至构建流程，在打包阶段自动处理所有入口 JS 文件，适合中大型 HTML5 项目。
1、安装插件：npm install --save-dev webpack-obfuscator
2、在 webpack.config.js 的 plugins 数组中添加：new WebpackObfuscator({ rotateStringArray: true, stringArray: true, controlFlowFlattening: true, identifiersDictionary: ['a','b','c','d'] })
3、执行 npx webpack --mode=production 启动构建，输出文件即含混淆逻辑。
三、使用 Terser 插件配合自定义压缩与编码策略
Terser 是 Webpack 默认 JS 压缩器，可通过配置启用高级混淆选项，如名称混淆与保留关键字干扰。
1、在 webpack.config.js 的 optimization.minimizer 中配置 TerserPlugin：new TerserPlugin({ terserOptions: { compress: { drop_console: true }, mangle: { reserved: ['jQuery', '$'] }, format: { comments: false } } })
2、启用 mangle.properties 并设置 regex: /^_/ 以仅混淆以下划线开头的属性名。
3、构建后检查 dist 目录下生成的 bundle.js，确认变量名已被替换且无原始语义残留。
四、HTML 内联脚本的 Base64 动态解密加载
该方法将关键 JS 逻辑转为 Base64 字符串嵌入 HTML，运行时由小段解密函数还原执行，规避静态扫描。
1、使用 Node.js 将 app.js 转为 Base64：node -e "console.log(Buffer.from(fs.readFileSync('app.js')).toString('base64'))"
2、在 HTML 文件中插入如下结构：
3、确保解密函数本身不包含明文关键词，例如用 ['a','t','o','b'].join('') 替代直接书写 atob。
五、服务端动态注入混淆脚本（Node.js Express 示例）
该方式不在客户端暴露原始构建产物，每次响应返回不同混淆版本的 JS，提升对抗静态提取能力。
1、安装依赖：npm install express javascript-obfuscator
2、在路由中读取原始 JS 并实时混淆：res.send(``);
3、访问页面时，浏览器接收到的始终是新生成的混淆代码，原始 logic.js 不会出现在任何静态资源路径中。
