令人抓狂的 JavaScript 混淆技术

2023-05-07 今日头条程序员梓羽同学

加入收藏

1 JAVAScript 简介

JavaScript 压缩、混淆和加密技术

对于网页来说，其逻辑是依赖于JavaScript来实现的，JavaScript 有如下特点：

JavaScript 代码运行于客户端，也就是它必须要在用户浏览器端加载并运行。
JavaScript 代码是公开透明的，也就是说浏览器可以直接获取到正在运行的 JavaScript 的源码。

压缩、混淆、加密技术：

代码压缩：即去除JavaScript 代码中的不必要的空格、换行等内容，使源码都压缩为几行内容，降低代码可读性，当然同时也能提高网站的加载速度。
代码混淆：使用变量替换、字符串阵列化、控制流平坦化、多态变异、僵尸函数、调试保护等手段，使代码变得难以阅读和分析，达到最终保护的目的。但这不影响代码原有功能。是理想、实用的JavaScript保护方案
代码加密：可以通过某种手段将 JavaScript 代码进行加密，转成人无法阅读或者解析的代码，如将代码完全抽象化加密，如 eval 加密。另外还有更强大的加密技术，可以直接将 JavaScript 代码用 C/C++ 实现，JavaScript 调用其编译后形成的文件来执行相应的功能，如Emscripten 还有 WebAssembly。

2 OB混淆

OB 混淆全称 Obfuscator，Obfuscator 其实就是混淆的意思。

官网：https://obfuscator.io/ ，其作者是一位叫 Timofey Kachalov 的俄罗斯JavaScript开发工程师，早在 2016 年就发布了第一个版本。

2.1 OB 混淆具有以下特征：

1、一般由一个大数组或者含有大数组的函数、一个自执行函数、解密函数和加密后的函数四部分组成；

2、函数名和变量名通常以 _0x 或者 0x 开头，后接 1~6 位数字或字母组合；

3、自执行函数，进行移位操作，有明显的 push、shift 关键字；

例如在下面的例子中，_0x3f26() 方法就定义了一个大数组，自执行函数里有 push、shift 关键字，主要是对大数组进行移位操作，_0x1fe9() 就是解密函数，hi() 就是加密后的函数。

2.2 OB混淆介绍

JavaScript 混淆完全是在 JavaScript 上面进行的处理，它的目的就是使得 JavaScript 变得难以阅读和分析，大大降低代码可读性，是一种很实用的 JavaScript 保护方案。

JavaScript 混淆技术主要有以下几种：

变量混淆：将带有含意的变量名、方法名、常量名随机变为无意义的类乱码字符串，降低代码可读性，如转成单个字符或十六进制字符串。
字符串混淆：将字符串阵列化集中放置、并可进行 MD5 或 Base64 加密存储，使代码中不出现明文字符串，这样可以避免使用全局搜索字符串的方式定位到入口点。
属性加密：针对 JavaScript 对象的属性进行加密转化，隐藏代码之间的调用关系。
控制流平坦化：打乱函数原有代码执行流程及函数调用关系，使代码逻变得混乱无序。
僵尸代码：随机在代码中插入无用的僵尸代码、僵尸函数，进一步使代码混乱。
调试保护：基于调试器特性，对当前运行环境进行检验，加入一些强制调试 debugger 语句，使其在调试模式下难以顺利执行 JavaScript 代码。
多态变异：使 JavaScript 代码每次被调用时，将代码自身即立刻自动发生变异，变化为与之前完全不同的代码，即功能完全不变，只是代码形式变异，以此杜绝代码被动态分析调试。
锁定域名：使 JavaScript 代码只能在指定域名下执行。
反格式化：如果对 JavaScript 代码进行格式化，则无法执行，导致浏览器假死。
特殊编码：将 JavaScript 完全编码为人不可读的代码，如表情符号、特殊表示内容等等。

总之，以上方案都是 JavaScript 混淆的实现方式，可以在不同程度上保护 JavaScript 代码。

2.3 OB混淆JS

新建一个文件夹，随后进入该文件夹，初始化工作空间

npm init

提示我们输入一些信息，创建一个 package.json 文件，这就完成了项目初始化了。

接下来我们来安装 javascript-obfuscator这个库：

npm install javascript-obfuscator --save

2.3.1 代码压缩

这里javascript-obfuscator也提供了代码压缩的功能，使用其参数 compact即可完成JavaScript 代码的压缩，输出为一行内容。默认是 true，如果定义为 false，则混淆后的代码会分行显示。

var code = `
let x = '1' + 1
console.log('x', x)
  `

const options = {
  compact: true,  // 代码压缩配置
}

const obfuscator = require('javascript-obfuscator')

function obfuscate(code, options) {
  return obfuscator.obfuscate(code, options).getObfuscatedCode()
}

console.log(obfuscate(code, options))

2.3.2 变量名混淆

变量名混淆可以通过配置identifierNamesGenerator 参数实现，我们通过这个参数可以控制变量名混淆的方式，如hexadecimal则会替换为 16 进制形式的字符串，在这里我们可以设定如下值：

hexadecimal：将变量名替换为 16 进制形式的字符串，如 0xabc123。
mangled：将变量名替换为普通的简写字符，如 a、b、c 等。该参数默认为hexadecimal。

我们将该参数修改为 mangled 来试一下：

const code = `
let hello = '1' + 1
console.log('hello', hello)
`
const options = {
  compact: true,
  identifierNamesGenerator: 'mangled'
}

2.3.3 字符串混淆

字符串混淆，即将一个字符串声明放到一个数组里面，使之无法被直接搜索到。我们可以通过控制 stringArray 参数来控制，默认为 true。

const code = `
var a = 'hello world'
`;
const options = {
  compact: false,
  unicodeEscapeSequence: true  //对字符串进行 Unicode 转码
};

JavaScript混淆知识点，今天就暂时先介绍到这里。这些知识不论对前端开发人员还是爬虫技术人员都会有所收获，有所感悟。只有了解清楚它的原理，才能更好的使用、开发乃至攻防。有问题欢迎在评论区留言，也可以动动小手点点赞！