MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

JavaScript代码混淆与保护技术探讨

2021-05-081.6k 阅读

JavaScript 代码混淆基础

什么是代码混淆

在JavaScript开发领域，代码混淆是一种将原本清晰可读的代码转换为难以理解和分析的形式的技术。其目的主要是保护代码的知识产权，防止代码被轻易地盗用、逆向工程以及篡改。清晰的JavaScript代码对于开发者来说是易于维护和扩展的，但同时也为恶意攻击者提供了便利，他们可以轻松地理解代码逻辑，进而窃取商业逻辑、敏感信息或进行恶意修改。通过代码混淆，我们将代码进行变形，使得即使攻击者获取到代码，也难以还原其原始逻辑。

代码混淆的作用

  1. 保护知识产权：对于商业应用中的JavaScript代码，如在线游戏、Web应用的核心逻辑等，代码中蕴含着开发者的智慧结晶和商业价值。混淆后的代码能有效阻止竞争对手通过简单的代码查看来抄袭核心算法和业务逻辑，从而保护开发者的知识产权。
  2. 防止数据泄露：许多Web应用会在前端JavaScript代码中处理敏感数据，如用户登录信息、支付信息等。如果代码未经过混淆，攻击者可能通过分析代码找到获取这些敏感数据的方法。混淆后的代码增加了攻击者分析的难度，降低了数据泄露的风险。
  3. 增强安全性：恶意攻击者可能会试图篡改JavaScript代码来实现恶意目的，如注入广告、恶意脚本等。混淆后的代码难以理解和修改，使得攻击者的篡改行为变得更加困难，从而增强了应用的安全性。

简单的代码混淆示例

考虑以下一段简单的JavaScript函数，用于计算两个数的和：

function add(a, b) {
    return a + b;
}

一种简单的混淆方式可以是对变量名和函数名进行替换。例如，使用工具将变量名和函数名替换为无意义的字符：

function z(a, b) {
    return a + b;
}

这里将函数名add替换为z，虽然这种方式相对简单，但已经使得代码的可读性有所降低。如果代码规模较大，这种简单的混淆也能增加攻击者理解代码逻辑的难度。

常见的JavaScript代码混淆技术

变量和函数名混淆

  1. 随机命名替换 这是最基本的变量和函数名混淆方法。通过编写脚本或使用专门的混淆工具，将代码中的变量名和函数名替换为随机生成的字符串。例如，在一段复杂的JavaScript模块代码中：
// 原始代码
const userInfo = {
    name: 'John',
    age: 30
};

function displayUserInfo() {
    console.log(`Name: ${userInfo.name}, Age: ${userInfo.age}`);
}

displayUserInfo();

使用混淆工具后可能变成：

const a = {
    b: 'John',
    c: 30
};

function d() {
    console.log(`Name: ${a.b}, Age: ${a.c}`);
}

d();

这里userInfo被替换为a，name被替换为b，age被替换为c，displayUserInfo被替换为d。这样，对于不了解原始代码逻辑的人来说，很难直接从变量名和函数名推断出代码的功能。

  1. 按作用域混淆 更高级的混淆方式可以根据变量和函数的作用域进行针对性的混淆。例如，对于全局作用域的变量和函数，可以使用更长、更复杂的随机字符串进行替换；而对于局部作用域内的变量，可以使用较短的随机字符串。这样既可以增加混淆的强度，又能在一定程度上减少代码体积的增加。

字符串加密与隐藏

  1. 静态字符串加密 在JavaScript代码中，字符串常常包含重要的信息，如API密钥、数据库连接字符串等。对这些静态字符串进行加密是一种重要的混淆手段。可以使用简单的加密算法，如异或加密。以下是一个简单的异或加密字符串的函数：
function xorEncrypt(str, key) {
    let encrypted = '';
    for (let i = 0; i < str.length; i++) {
        encrypted += String.fromCharCode(str.charCodeAt(i) ^ key.charCodeAt(i % key.length));
    }
    return encrypted;
}

// 使用示例
const originalString = 'api_key_12345';
const encryptionKey = 'secret';
const encryptedString = xorEncrypt(originalString, encryptionKey);

// 在代码中使用加密后的字符串，需要解密函数才能使用
function xorDecrypt(encrypted, key) {
    return xorEncrypt(encrypted, key);
}

// 解密并使用字符串
const decryptedString = xorDecrypt(encryptedString, encryptionKey);
console.log(decryptedString);

在实际应用中，可以将加密后的字符串嵌入到混淆后的代码中，并且将解密逻辑也进行混淆处理，使得攻击者难以获取到原始的敏感字符串。

  1. 动态字符串生成 除了加密静态字符串，还可以采用动态生成字符串的方式来隐藏字符串内容。例如，通过一系列字符拼接操作来生成所需的字符串，而不是直接在代码中写出明文。
// 原始代码
const message = 'Hello, world!';
console.log(message);

// 混淆后
let parts = [];
parts.push('Hel');
parts.push('lo, ');
parts.push('wor');
parts.push('ld!');
const message = parts.join('');
console.log(message);

这种方式使得字符串在代码中不再以完整、可读的形式出现，增加了分析的难度。

代码结构混淆

  1. 控制流平坦化 在正常的JavaScript代码中，控制流结构如if - else、for、while等语句清晰地表达了程序的逻辑走向。控制流平坦化技术将这些结构化的控制流转换为一种看似杂乱无章的形式。例如，将一个简单的if - else语句：
let num = 10;
if (num > 5) {
    console.log('Greater than 5');
} else {
    console.log('Less than or equal to 5');
}

转换为控制流平坦化后的代码可能如下：

let num = 10;
let flag = num > 5? 1 : 0;
switch (flag) {
    case 1:
        console.log('Greater than 5');
        break;
    case 0:
        console.log('Less than or equal to 5');
        break;
}

在更复杂的代码中，可以通过引入更多的中间变量和跳转逻辑，使得控制流变得更加复杂和难以理解。

  1. 插入无用代码 插入无用代码是一种常见的代码结构混淆方式。通过在代码中插入一些看似执行操作，但实际上对程序功能没有影响的代码段，来干扰攻击者对代码逻辑的分析。例如：
function calculateSum(a, b) {
    let result = a + b;
    // 无用代码开始
    let temp = Math.random();
    if (temp > 0.5) {
        temp = temp * 2;
    } else {
        temp = temp / 2;
    }
    // 无用代码结束
    return result;
}

这里插入的关于temp变量的操作对calculateSum函数的核心功能（计算两数之和）没有任何影响，但增加了代码的复杂性，使得攻击者需要花费更多精力来区分有用代码和无用代码。

基于工具的代码混淆实践

UglifyJS

  1. 安装与基本使用 UglifyJS是一款广泛使用的JavaScript压缩和混淆工具。可以通过npm进行安装：
npm install uglify - js - g

安装完成后，假设我们有一个名为script.js的文件，其内容如下：

function addNumbers(a, b) {
    return a + b;
}

let result = addNumbers(5, 3);
console.log(result);

使用UglifyJS进行混淆的命令如下：

uglifyjs script.js - o script.min.js

这里-o参数指定输出文件为script.min.js。执行命令后，script.min.js中的代码将被压缩和混淆，例如可能变成：

function a(b, c){return b + c}let d = a(5,3);console.log(d);

可以看到，UglifyJS不仅缩短了变量名和函数名，还去除了多余的空格和换行，极大地压缩了代码体积并进行了一定程度的混淆。

  1. 高级配置选项 UglifyJS提供了丰富的配置选项来进行更精细的混淆。例如，--mangle选项可以控制变量名和函数名的混淆方式。默认情况下，UglifyJS会对所有变量和函数名进行混淆，但可以通过配置排除某些名称不进行混淆。假设我们有一个全局变量CONFIG，不希望它被混淆，可以这样配置：
uglifyjs script.js - o script.min.js --mangle --exclude - names CONFIG

此外，--compress选项可以控制代码压缩的程度和方式，如是否删除未使用的代码、合并重复的代码等。

Closure Compiler

  1. 在线使用与本地安装 Closure Compiler是Google开发的一款强大的JavaScript优化工具，也可用于代码混淆。它既提供在线使用的版本，也可以通过npm进行本地安装：
npm install google - closure - compiler - g

在线版本可以在Google Closure Compiler的官方网站上使用。只需将JavaScript代码粘贴到输入框中，选择合适的编译级别（如SIMPLE_OPTIMIZATIONS、ADVANCED_OPTIMIZATIONS等），即可获得混淆和优化后的代码。

  1. 不同编译级别的混淆效果 选择SIMPLE_OPTIMIZATIONS编译级别时，Closure Compiler会进行一些基本的优化和混淆操作，如变量名和函数名的缩短、移除未使用的代码等。例如，对于以下代码：
function greet(name) {
    let message = 'Hello, ';
    message += name;
    return message;
}

let result = greet('John');
console.log(result);

经过SIMPLE_OPTIMIZATIONS编译后可能变成：

function a(b){let c='Hello, ';c+=b;return c}let d=a('John');console.log(d);

当选择ADVANCED_OPTIMIZATIONS编译级别时，混淆效果会更加强烈。它会进行更深入的优化，如内联函数、常量折叠等，并且对代码结构进行更复杂的变换，使得代码更难以理解和分析。例如，对于上述代码，经过ADVANCED_OPTIMIZATIONS编译后可能变成：

console.log('Hello, John');

这里由于函数greet的逻辑简单且参数固定，Closure Compiler进行了内联和常量折叠操作，直接将最终结果输出，极大地改变了代码的结构。

应对反混淆技术的策略

混淆强度的选择与平衡

  1. 权衡混淆强度与代码性能 在选择混淆技术和工具时，需要在混淆强度和代码性能之间进行权衡。一般来说，混淆强度越高，代码的可读性和可维护性越低，但安全性越高；然而，高强度的混淆可能会引入更多的计算开销，导致代码在运行时性能下降。例如，复杂的控制流平坦化和大量无用代码的插入可能会增加代码的执行时间和内存占用。因此，在实际应用中，需要根据具体的需求来选择合适的混淆强度。对于对性能要求极高的应用，如实时在线游戏，可能需要在保证一定安全性的前提下，选择相对较轻量级的混淆方式；而对于一些对性能要求不那么苛刻，但对代码保护要求较高的后台管理类Web应用，可以采用更强的混淆技术。

  2. 动态调整混淆策略 可以根据应用的使用场景和安全威胁的变化动态调整混淆策略。例如，在应用的开发和测试阶段，可以使用较低强度的混淆，以便于开发人员进行调试和维护；而在应用上线后，根据实际的安全威胁情况，如是否检测到有恶意攻击行为，可以适时增加混淆强度。此外，如果发现某种反混淆技术对当前的混淆策略有较好的破解效果，可以及时调整混淆技术，采用更复杂或多样化的混淆手段。

增加反反混淆机制

  1. 水印与签名检测 在混淆后的代码中嵌入水印或签名信息，用于检测代码是否被篡改或反混淆。水印可以是一段特殊的字符串或数据模式，签名则可以通过对代码进行哈希计算并存储在特定位置来实现。例如，在代码的某个隐秘位置插入一段包含版权信息的水印字符串：
// 混淆后的代码主体

// 水印部分
const watermark = 'Copyright (c) 2023 MyCompany. All rights reserved.';
// 检测水印的逻辑
function checkWatermark() {
    if (typeof watermark === 'undefined') {
        throw new Error('Code has been tampered with');
    }
}

// 在适当的时机调用检测函数
checkWatermark();

如果攻击者对代码进行反混淆或篡改，水印可能会被破坏，通过检测水印的存在与否，可以判断代码是否被非法处理。

  1. 防调试技术 采用一些防调试技术来阻止攻击者通过调试工具来分析混淆后的代码。例如，在代码中检测是否处于调试模式，如果检测到调试行为，则采取一些措施，如终止程序运行或跳转到错误页面。可以通过检测window.debugger属性是否存在来判断是否处于调试模式：
if (typeof window.debugger === 'function') {
    // 处于调试模式，采取措施
    window.location.href = 'error.html';
}

此外，还可以使用setInterval不断检测调试状态，使得攻击者难以在不被发现的情况下进行调试分析。

混淆代码的调试与维护

调试混淆代码的挑战

  1. 难以理解的代码结构 经过混淆后的代码，其变量名和函数名被替换为无意义的字符，代码结构也可能被打乱，如控制流平坦化、插入无用代码等。这使得开发人员在调试时难以快速定位问题所在。例如，原本通过变量名就能清晰了解其用途的代码，在混淆后可能需要花费大量时间去跟踪变量的赋值和使用过程，才能理解其功能。

  2. 丢失的调试信息 在混淆过程中，一些原本用于调试的信息，如注释、函数和变量的原始命名等，可能会被去除或改变。这导致在调试时缺乏足够的上下文信息，增加了调试的难度。例如，在原始代码中通过注释说明某个函数的功能和参数含义，混淆后这些注释可能被删除，使得开发人员需要重新分析代码来理解其功能。

调试混淆代码的方法

  1. 使用Source Map Source Map是一种将混淆后的代码映射回原始代码的机制。许多混淆工具，如UglifyJS、Closure Compiler等，都支持生成Source Map文件。在开发环境中，当浏览器加载混淆后的JavaScript文件时，同时加载对应的Source Map文件，浏览器的调试工具（如Chrome DevTools）就能根据Source Map将混淆后的代码映射回原始代码，使得开发人员可以在调试时看到原始的变量名、函数名和代码结构。例如，在使用UglifyJS进行混淆时，可以通过添加--source - map选项来生成Source Map文件：
uglifyjs script.js - o script.min.js --source - map script.min.js.map

然后在HTML文件中引用混淆后的JavaScript文件时，通过sourceMappingURL注释来关联Source Map文件：

<script src="script.min.js"></script>
<!--# sourceMappingURL=script.min.js.map -->

这样在调试时，开发人员就能在浏览器的调试工具中看到原始代码，方便定位和解决问题。

  1. 渐进式调试 在没有Source Map或者Source Map不可用的情况下，可以采用渐进式调试的方法。首先，在混淆前的原始代码中添加一些关键位置的日志输出，例如在函数的入口和出口处记录参数和返回值。然后对代码进行混淆并运行，通过分析日志来逐步理解混淆后代码的执行逻辑。另外，可以逐步增加混淆的强度，每次增加后进行测试和调试，这样可以在每次变化后更容易定位问题所在。例如，先只对变量名和函数名进行混淆，调试通过后再进行代码结构的混淆，如控制流平坦化等，逐步适应混淆后的代码并解决出现的问题。

维护混淆代码的建议

  1. 保留关键信息 在进行混淆之前，对于一些关键的代码片段或功能模块，尽量保留其原始的注释和命名，或者使用特殊的标记来表示其重要性。这样在维护时，开发人员可以快速定位到这些关键部分，理解其功能。例如，对于处理用户认证和授权的核心代码，可以在混淆配置中排除对这部分代码的某些混淆操作，或者在混淆后通过特殊的注释标记来提醒开发人员其重要性。

  2. 版本控制与文档更新 使用版本控制系统（如Git）来管理代码的变更，包括混淆前后的代码版本。这样在需要回溯或分析代码历史时，可以方便地获取到不同阶段的代码。同时，在代码混淆后，及时更新相关的技术文档，记录混淆的方式、采用的工具以及可能影响代码理解和维护的关键信息。例如，在文档中说明哪些部分的代码使用了特殊的混淆技术，以及这些技术可能对代码维护带来的影响，以便后续开发人员能够快速上手进行维护工作。