JavaScript Magic Tricks: Code Minification & Encryption
Tags: webdev, javascript, minification, encryption
Published: 2023-10-09 01:31:36

This article shares a technique: using array compression and encryption for JavaScript code.

## Technical principle
The principle is to put certain contents in JavaScript code, such as characters or code segments, keywords, into an array, and then retrieve the original content by calling the index of the array. 
Why this method has a compression effect? Because repeated keywords or content in the code usually occupy a lot of space. For example, if a content with 10 characters appears 10 times, it will occupy 100 characters in length. However, if it is put into array A, A[?] is 4 characters, and it will only occupy 40 characters in length after being used 10 times. Therefore, it has a compression effect. 
At the same time, this method is also commonly used for obfuscating JavaScript code, known as "arrayification". After the code is arrayified, many characters, variables, calls, values, and other items in the code will become array stacks. When looking at it, it is just a sea of arrays, which is its encryption effect.

For example, a piece of code:

`console.log();
var abcdefg;
abcdefg = "jshaman.com/en/"
abcdefg = "jshaman团队专注于JS混淆加密"
abcdefg = "jshaman.com/en/" + " " + "jshaman团队专注于JS混淆加密"
console.log(abcdefg);
console.log();`

Using the idea mentioned earlier, separate the code with spaces, and put the separated content into an array:

`_=[
  '`console.log();`',
  '`var`',
  '`abcdefg;`',
  '`abcdefg`',
  '`"jshaman.com/en/"`',
  '`"jshaman团队专注于JS混淆加密"`',
  '`console.log(abcdefg);`'
]`

Replacing the corresponding subscript of the array to obtain the encrypted code:

`_[0]
_[1] _[2]
_[3] = _[5]
_[3] = _[8]
_[3] = _[5] + " " + _[8]
_[17]
_[0]`

As such, the code length is significantly shorter and more difficult to understand than before. 
Note: This is for demonstration purposes only and lacks decryption and execution functionality.

## Source

```
//要加密的JS代码
var js_code =`
console.log();
var abcdefg;
abcdefg = "jshaman.com/en/"
abcdefg = "jshaman团队专注于JS混淆加密"
abcdefg = "jshaman.com/en/" + " " + "jshaman团队专注于JS混淆加密"
console.log(abcdefg);
console.log();
`;
console.log();
console.log("原始代码：\n", js_code);
console.log();
//把代码以空格分割，放入数组
var str_arr = js_code.trim().split(/\s+/);
var str_obj = {};
var min_str_arr = [];
var min_str_arr_index = [];
var index = 0;
//遍历代码数组
for(i=0; i<str_arr.length; i++){
    //长度大于3的数组内容
    if(str_arr[i].length >= 3){
        //判断对像中是否存在，用对像不用数组是因为效率更高
        if(str_obj[str_arr[i]] == null){
            index = i;
            str_obj[str_arr[i]] = i;
            //缩小的数组
            min_str_arr.push("`" + str_arr[i] + "`");
            //缩小的数组索引，解密用
            min_str_arr_index.push(index);
        }else{
            //索引，解密用
            index = str_obj[str_arr[i]];
        }
        //将代码进行替换加密
        js_code = js_code.replace(str_arr[i],"_["+ index +"]");
    }
}

console.log()
console.log("数组：\n")
console.log(min_str_arr)
console.log("数组索引：\n")
console.log(min_str_arr_index)
console.log()

console.log("加密代码：\n\n",js_code);
console.log();


for(i=0; i<min_str_arr.length; i++){
js_code = js_code.replace(new RegExp("_\\["+min_str_arr_index[i]+"\\]","g"), min_str_arr[i].replace("`","").replace("`",""));
}
console.log("解密代码：\n",js_code);
console.log()

console.log("解密代码执行结果：");
eval(js_code)

```

## Execute

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y4ve7qulz85wgzgesyms.png)