如何让别人看不懂你的 JS 代码?

更新日期: 2022-07-27阅读: 860

我们在上周的文章中一种奇特的 JavaScript 编码风格:Get 一种可以用来装逼的 JavaScript 编码风格,引起了广大网友的热议。

这是实际上属于一种代码混淆技术,可以让们的代码更难阅读和逆向,同时也能租网一些恶意爬虫和自动化分析。天我就带大家来看看还有哪些其他能让 JavaScript 代码变得难以分析的代码混淆技术。

我们以下面这段代码为例:

console.log("ConardLi",666);

通过一些转换,它可以变成下面这个样子:


怎么做到的呢?我们一起来看一下~

十六进制字符串编码

我们尝试去 Javascript Obfuscator 这个网站,选中 Encode Strings 复选框,将得到下面的代码:

console["\x6C\x6F\x67"]("\x43\x6F\x6E\x61\x72\x64\x4C\x69\x20"+ 666)

它的原理很简单,就是将字符串的每个 ASCII 字符转换为十六进制形式(将函数调用改为用括号的形式,例如 console.log -> console['log'] 在代码混淆中也是相当常见的做法),这就是最简单的混淆了,但是只能骗骗小白,我们可以轻易的反解:


这种技术还有一些其他变体,比如用 unicode 编码替换字符。https://javascriptobfuscator.com/Javascript-Obfuscator.aspx

字符串数组映射

还是在上面的网站,我们选中 Move Strings 这个选项,得到的代码是下面这样的:

var _0x8925=["\x43\x6F\x6E\x61\x72\x64\x4C\x69\x20","\x6C\x6F\x67"];
console[_0x8925[1]](_0x8925[0]+ 666)

多了个字符串数组,通过在不同索引处引入数组来间接使用这些字符串。

死代码注入

死代码其实指的就是一些无法访问的代码,我们可以在原本的代码上额外注入一些永远无法访问的代码来让代码难以阅读,但是同时也会让代码变得更大。这次我们尝试一下 defendjs:

安装:

$ npm install -g https://github.com/alexhorn/defendjs.git

我们尝试创建一个 conardli.js 并且将上面的代码放入这个文件,执行下面的命令:

$ defendjs --input conardli.js --features dead_code --output .

得到了下面这一大坨代码:

(function () {
    function a(a, d) {
        var b = new Array(0);;
        var c = arguments;
        while (true)
            try {
                switch (a) {
                case 21309:
                    return;
                case 792:
                    function e(a, b) {
                        return Array.prototype.slice.call(a).concat(Array.prototype.slice.call(b));
                    }
                    function f() {
                        var a = arguments[0], c = Array.prototype.slice.call(arguments, 1);
                        var b = function () {
                            return a.apply(this, c.concat(Array.prototype.slice.call(arguments)));
                        };
                        b.prototype = a.prototype;
                        return b;
                    }
                    function g(a, b) {
                        return Array.prototype.slice.call(a, b);
                    }
                    function h(b) {
                        var c = {};
                        for (var a = 0; a < b.length; a += 2) {
                            c[b[a]] = b[a + 1];
                        }
                        return c;
                    }
                    function i(a) {
                        return a.map(function (a) {
                            return String.fromCharCode(a & ~0 >>> 16) + String.fromCharCode(a >> 16);
                        }).join('');
                    }
                    function j() {
                        return String.fromCharCode.apply(null, arguments);
                    }
                    console.log('ConardLi', 666);
                    a = 21309;
                    break;
                }
            } catch (b) {
                $$defendjs$tobethrown = null;
                switch (a) {
                default:
                    throw b;
                }
            }
    }
    a(792, {});
}())

代码很大,其实仔细分析就会发现其余插入的代码都是无法运行的:


最顶层包了一个 IIFE,然后有一个 a 函数,a、b 两个参数。调用 a 函数时只传入了第一个参数 792,然后就会发现 a 函数里有个 switch 语句,只会执行到第二个 case,里面是这样的语句:


e、f、g、h、j、i 这几个函数都是没有调用的,所以只会执行最后的 console.log('ConardLi', 666); 语句 ...

https://github.com/alexhorn/defendjs

作用域混淆

我们将代码还原回去,重新执行 defendjs 的 scope 能力:

$ defendjs --input conardli.js --features scope --output .
(function () {
    {
        {
            function b(a, b) {
                return Array.prototype.slice.call(a).concat(Array.prototype.slice.call(b));
            }
            function c() {
                var a = arguments[0], c = Array.prototype.slice.call(arguments, 1);
                var b = function () {
                    return a.apply(this, c.concat(Array.prototype.slice.call(arguments)));
                };
                b.prototype = a.prototype;
                return b;
            }
            function d(a, b) {
                return Array.prototype.slice.call(a, b);
            }
            function e(b) {
                var c = {};
                for (var a = 0; a < b.length; a += 2) {
                    c[b[a]] = b[a + 1];
                }
                return c;
            }
            function f(a) {
                return a.map(function (a) {
                    return String.fromCharCode(a & ~0 >>> 16) + String.fromCharCode(a >> 16);
                }).join('');
            }
            function g() {
                return String.fromCharCode.apply(null, arguments);
            }
        }
        var a = [];
        console.log('ConardLi', 666);
    }
}())

这个可能看起来像是前面的一个简单版本,但是有一个关键的区别:它引入了多个具有重复标识符的词法作用域。例如,a 可能是最内层作用域中第一个函数的参数,也可以是第二个函数中的变量,甚至可以是与我们的 conaole.log 语句相同作用域中的变量。在这个简单的示例中,很容易看穿,因为最内层范围内的任何函数都不会在任何地方被调用,但是,现实的业务代码往往是很复杂的,混淆后就不那么容易看穿了。

字符编码

还是使用 defendjs ,对我们的代码执行下面的命令:

$ defendjs --input conardli.js --features literals --output .

得到下面的代码:

(function () {
    function c() {
        var c = arguments;
        var b = [];
        b[1] = '';
        b[1] += a(67, 111, 110);
        b[1] += a(97);
        b[1] += a(114, 100);
        b[1] += a(76, 105);
        return b[1];
    }
    {
        {
            function e(a, b) {
                return Array.prototype.slice.call(a).concat(Array.prototype.slice.call(b));
            }
            function d() {
                var a = arguments[0], c = Array.prototype.slice.call(arguments, 1);
                var b = function () {
                    return a.apply(this, c.concat(Array.prototype.slice.call(arguments)));
                };
                b.prototype = a.prototype;
                return b;
            }
            function f(a, b) {
                return Array.prototype.slice.call(a, b);
            }
            function g(b) {
                var c = {};
                for (var a = 0; a < b.length; a += 2) {
                    c[b[a]] = b[a + 1];
                }
                return c;
            }
            function h(a) {
                return a.map(function (a) {
                    return String.fromCharCode(a & ~0 >>> 16) + String.fromCharCode(a >> 16);
                }).join('');
            }
            function a() {
                return String.fromCharCode.apply(null, arguments);
            }
        }
        var b = [];
        console.log(d(c, b)(), 666);
    }
}())

在这种情况下,硬编码会被转换成 Unicode 然后重新计算,这样直接阅读代码就很难再直接看穿硬编码的字符串了。

变量缩短

Mangling 是一种为了优化和混淆目的而缩短变量和属性名称的转换。比如下面的代码:

let sixSixSix = 666;
let name = "ConardLi ";
console.log(name + sixSixSix);

我们使用 DefendJS 的 mangling 功能:

$ defendjs --input conardli.js --features mangle --output .

得到的代码是:

(function () {
    var a = 666;
    var b = 'ConardLi! ';
    console.log(b + a);
}())

两个变量都被重新命名了,在这个简单的例子下还是很好分析的。但是如果是庞大的业务代码,这会让我们的代码变得非常难以阅读。

代码压缩

下面,综合利用一下几种技术,执行:

defendjs --input conardli.js --output . --features=control_flow,literals,mangle,compress

得到下面的代码:

(function(){function a(d,g){var b=new Array(1);;var e=arguments;while(true)t
来源: code秘密花园


链接: https://fly63.com/article/detial/11947

挑战常规--不要使用||赋予默认值

js是一种弱类型的编程语言,代表着传入的变量并不清楚作为何种类型使用。对js来说传入的任意参数都应该考虑不同类型的结果,而不是单单考虑一种情况。若传入0、false等,||所要实现默认值的功能完全错误的

YodaOS 中是如何生成 API 的

本文简单介绍了 YodaOS 在 API 设计过程中,如何利用 DSL,解决 YodaOS API 在多种应用形态保持一致性。以此,我们希望抛砖引玉:帮助读者更好地了解 YodaOS API 的生成过程,帮助读者了解到 DSL,也能将这种思路应用在自己的项目中

JavaScript 私有成员

JavaScript 一直没有私有成员并不是没有原因,所以这一提议给 JavaScript 带来了新的挑战。但同时,JavaScript 在 ES2015 发布的时候已经在考虑私有化的问题了,所以要实现私有成员也并非毫无基础。

web前端学习之路

对于程序员来说,如果哪一天开始他停止了学习,那么他的职业生涯便开始宣告消亡。这不是什么危言耸听的怪语,而是一位大牛几年前告诉我的,他的信条。

web前端开发好学吗?

随着互联网+时代的到来,移动互联网行业的发展也是突飞猛进。无论你是否承认,这个时代已经被网页所包围了,这所有一切,都是前端工程师的杰作。今天给大家聊的就是\"前端真的好学吗?\"

Web前端小白入门

Web前端开发怎么入门,主要都有哪些要素组成?Web前端开发是由网页制作演变而来的,主要由HTML、CSS、JavaScript三大要素组成。专业的Web前端开发入门知识也一定会包含这些内容,下面就给大家简单介绍一下。

highcharts 时间少8小时问题

Highcharts 中默认开启了UTC(世界标准时间),由于中国所在时区为+8,所以经过 Highcharts 的处理后会减去8个小时。如果不想使用 UTC,有2种方法可供使用:

巧妙利用引用,将数组转换成树形数组

笔者所做的一个项目需要做一个前端的树形菜单,后端返回的数据是一个平行的list,list中的每个元素都是一个对象,例如list[0]的值为{id: 1, fid: 0, name: 一级菜单},每个元素都指定了父元素,生成的菜单可以无限级嵌套

NodeJS/JWT/Vue 实现基于角色的授权

在本教程中,我们将完成一个关于如何在 Node.js 中 使用 JavaScript ,并结合 JWT 认证,实现基于角色(role based)授权/访问的简单例子。作为例子的 API 只有三个路由,以演示认证和基于角色的授权

forward和redirect的区别?http状态码301,302分别代表什么?

从地址栏显示来说:forward是服务器内部重定向,客户端浏览器的网址不会发生变化;redirect发生一个状态码,告诉服务器去重新请求那个网址,显示的的新的网址数据共享:forward使用的是同一个request

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!