+
22
-

nodejs如何将一个完整的js代码文件切割成不同的部分混淆后动态加载进入html运行?

nodejs如何将一个完整的js代码文件切割成不同的部分混淆后动态加载进入html运行?


网友回复

+
30
-

这是一个非常典型的“前端代码保护”需求。为了防止别人直接下载完整的 JS 文件,通常采用 “混淆 + 切片 + 动态加载 + 运行时重组” 的组合策略。

虽然前端代码在浏览器运行最终都会还原,但这种方法可以极大增加逆向工程的成本。

下面我将提供一个完整的 Node.js 解决方案,包含以下步骤:

原始代码准备

构建脚本 (build.js):负责混淆代码、将代码切割成多个乱码片段、生成加载器。

运行环境 (index.html):通过加载器还原并运行代码。

准备工作

首先,你需要初始化项目并安装一个核心混淆库 javascript-obfuscator。

mkdir js-protector
cd js-protector
npm init -y
npm install javascript-obfuscator --save-dev

1. 编写原始代码 (source.js)

这是你想要保护的完整业务逻辑代码。

// source.js
console.log("核心程序开始加载...");

function secretAlgorithm(a, b) {
    return a * b + 100;
}

const userData = {
    name: "Admin",
    role: "SuperUser"
};

setTimeout(() => {
    const result = secretAlgorithm(10, 20);
    console.log(`计算结果: ${result}`);
    console.log(`当前用户: ${userData.name}`);
    alert("完整代码已成功动态加载并执行!");
}, 1000);

2. 编写构建/切割脚本 (build.js)

这个 Node.js 脚本是核心。它会做以下几件事:

读取 source.js。

使用 javascript-obfuscator 进行深度混淆。

将混淆后的字符串转换成 Base64 或 Hex(增加阅读难度)。

将字符串物理切割成多个 .dat 或 .txt 文件。

生成一个用于拼接和执行的 loader.js。

// build.js
const fs = require('fs');
const path = require('path');
const JavaScriptObfuscator = require('javascript-obfuscator');

// 配置
const CONFIG = {
    inputFile: './source.js',
    outputDir: './dist',
    chunkCount: 4, // 将代码切成几份
    chunkPrefix: 'data_', // 切片文件名前缀
};

// 1. 读取源码
const sourceCode = fs.readFileSync(CONFIG.inputFile, 'utf8');

// 2. 深度混淆源码
console.log("正在混淆代码...");
const obfuscationResult = JavaScriptObfuscator.obfuscate(sourceCode, {
    compact: true,
    controlFlowFlattening: true, // 控制流扁平化(让逻辑变乱)
    deadCodeInjection: true,     // 注入死代码
    stringArray: true,
    stringArrayEncoding: ['rc4'], // 字符串加密
    splitStrings: true,
    selfDefending: true,         // 自我保护(防止格式化)
});
const obfuscatedCode = obfuscationResult.getObfuscatedCode();

// 3. 将混淆后的代码转换为 Base64 (防止传输过程中出现编码问题,同时增加一层肉眼不可读)
//    这里为了演示,我们在Base64基础上再做一个简单的异或操作或翻转,让它彻底不像代码
const encodedCode = Buffer.from(obfuscatedCode...

点击查看剩余70%

我知道答案,我要回答