Javascript混淆與解混淆的那些事兒


像軟件加密與解密一樣,javascript的混淆與解混淆同屬於同一個范疇。道高一尺,魔高一丈。沒有永恆的黑,也沒有永恆的白。一切都是資本市場驅動行為,現在都流行你能為人解決什么問題,這個概念。那么市場究竟能容納多少個能解決這種問題的利益者。JS沒有秘密。

其實本人不贊成javascript進行hash混淆處理,一拖慢運行時速度,二體積大。JS代碼前端可獲取,天生賦予“開源”屬性,都可以在chrome devTools下查看。JS非壓縮性混淆完全違法前端優化准則。

目前網絡上可以搜索的JS混淆工具不外乎以下幾種:

eval混淆,也是最早JS出現的混淆加密,據說第一天就被破解,修改一下代碼,alert一下就可以破解了。這種方法從出生的那天就失去了意義。其實JS加密(混淆)是相對於可讀性而言的,其實真正有意義的就是壓縮型混淆uglify這一類,即可減少體重,也可減少可讀性。

但是,也不能排除部分商業源代碼使用hash類型混淆源代碼,比如 miniui 使用的JSA加密, fundebug使用的javascript-obfuscator

下面通過代碼來說明 JSA加密 和 javascript-obfuscator 的區別:

要混淆的代碼:

function logG(message) { console.log('\x1b[32m%s\x1b[0m', message); } function logR(message) { console.log('\x1b[41m%s\x1b[0m', message); } logG('logR'); logR('logG'); 

通過JSA加密混淆后生成的代碼

function o00($){console.log("\x1b[32m%s\x1b[0m",$)}function o01($){console.log("\x1b[41m%s\x1b[0m",$)}o00("logR");o01("logG") 

然后再beautifier一下:

function o00($) { console.log("\x1b[32m%s\x1b[0m", $) } function o01($) { console.log("\x1b[41m%s\x1b[0m", $) } o00("logR"); o01("logG") 

可以發現,其實沒有做什么什么修改,只是做了一些變量替換。想還原也比較簡單的。這里就不拿它來做代表,也沒有什么人用。

通過javascript-obfuscator混淆后生成的代碼

var _0xd6ac=['%s','logG','log'];(function(_0x203a66,_0x6dd4f4){var _0x3c5c81=function(_0x4f427c){while(--_0x4f427c){_0x203a66['push'](_0x203a66['shift']());}};_0x3c5c81(++_0x6dd4f4);}(_0xd6ac,0x6e));var _0x5b26=function(_0x2d8f05,_0x4b81bb){_0x2d8f05=_0x2d8f05-0x0;var _0x4d74cb=_0xd6ac[_0x2d8f05];return _0x4d74cb;};function logG(_0x4f1daa){console[_0x5b26('0x0')]('%s',_0x4f1daa);}function logR(_0x38b325){console[_0x5b26('0x0')](_0x5b26('0x1'),_0x38b325);}logG('logR');logR(_0x5b26('0x2')); 

beautifier一下:

var _0xd6ac = ['%s', 'logG', 'log']; (function(_0x203a66, _0x6dd4f4) { var _0x3c5c81 = function(_0x4f427c) { while (--_0x4f427c) { _0x203a66['push'](_0x203a66['shift']()); } }; _0x3c5c81(++_0x6dd4f4); }(_0xd6ac, 0x6e)); var _0x5b26 = function(_0x2d8f05, _0x4b81bb) { _0x2d8f05 = _0x2d8f05 - 0x0; var _0x4d74cb = _0xd6ac[_0x2d8f05]; return _0x4d74cb; }; function logG(_0x4f1daa) { console[_0x5b26('0x0')]('%s', _0x4f1daa); } function logR(_0x38b325) { console[_0x5b26('0x0')](_0x5b26('0x1'), _0x38b325); } logG('logR'); logR(_0x5b26('0x2'));

這個復雜得多,但是分析一下你會發現,其實多了一個字典,所有方法變量,都有可能存在字典中,調用時先調用字典還原方法名變量再執行。 
其實入口都是變量的規則。

字典函數:

var _0xd6ac = ['%s', 'logG', 'log']; (function(_0x203a66, _0x6dd4f4) { var _0x3c5c81 = function(_0x4f427c) { while (--_0x4f427c) { _0x203a66['push'](_0x203a66['shift']()); } }; _0x3c5c81(++_0x6dd4f4); }(_0xd6ac, 0x6e)); var _0x5b26 = function(_0x2d8f05, _0x4b81bb) { _0x2d8f05 = _0x2d8f05 - 0x0; var _0x4d74cb = _0xd6ac[_0x2d8f05]; return _0x4d74cb; }; 

通過以上發現,我們可以把JS混淆歸結為三類,分別是 eval類型,hash類型,壓縮類型。而壓縮類型,是目前前端性能優化的常用工具,以uglify為代表。

常用的前端壓縮優化工具:

JavaScript: 
babel-minify 
terser 
uglify-js 
uglify-es 
Google Closure Compiler 
YUI Compressor

CSS: 
PostCSS 
clean-css 
CSSO 
YUI Compressor

HTML: 
html-minifier

從工具流(workflow) 來看,不論是 webpack 還是 gulp ,目前javascript最流行工具還是uglify。

相應的解混淆工具:

解混淆策略其實是依據生成代碼規律編寫,不外乎觀察特征分析,再觀察特征分析,不斷調整。都是手辦眼見功夫。

都沒有什么難度可言,有的就是耐性。比如javascript-obfuscator對應的解混淆工具可以 
分解為N因子問題:

如何查詢function的作用域? 
預執行變量替換可能存在類型? 

如:

var _0xd6ac = ['%s', 'logG', 'log']; (function(_0x203a66, _0x6dd4f4) { var _0x3c5c81 = function(_0x4f427c) { while (--_0x4f427c) { _0x203a66['push'](_0x203a66['shift']()); } }; _0x3c5c81(++_0x6dd4f4); }(_0xd6ac, 0x6e)); var _0x5b26 = function(_0x2d8f05, _0x4b81bb) { _0x2d8f05 = _0x2d8f05 - 0x0; var _0x4d74cb = _0xd6ac[_0x2d8f05]; return _0x4d74cb; }; function logG(_0x4f1daa) { console[_0x5b26('0x0')]('%s', _0x4f1daa); } function logR(_0x38b325) { console[_0x5b26('0x0')](_0x5b26('0x1'), _0x38b325); } logG('logR'); logR(_0x5b26('0x2'));

要還原成

function logG(message) { console.log('\x1b[32m%s\x1b[0m', message); } function logR(message) { console.log('\x1b[41m%s\x1b[0m', message); } logG('logR'); logR('logG'); 

第一步你總得知道字典函數,然后執行字典函數 _0x5b26('0x0') 還原成 log.

那么就好辦了,寫代碼的事。 
如 https://github.com/jscck/crack.js/blob/master/crack.js

還原后,如何重構代碼,那么你還得知道代碼生成之前是通過什么工具打包的webpack? 還是?

如webpack 的各種封裝頭和尾 
https://webpack.js.org/configuration/output/#expose-a-variable

(function webpackUniversalModuleDefinition(root, factory) { if(typeof exports === 'object' && typeof module === 'object') module.exports = factory(); else if(typeof define === 'function' && define.amd) define([], factory); else if(typeof exports === 'object') exports['MyLibrary'] = factory(); else root['MyLibrary'] = factory(); })(typeof self !== 'undefined' ? self : this, function() { return _entry_return_; });

假如再深入一點,可能會涉及到JS語法解釋器, AST抽象語法樹

目前涉及到 JS語法解釋器, AST抽象語法樹的功能如下:

prepackesprimababel

或者可以閱讀《編程語言實現模式》,涉及到 antlr4

當然也可以通過esprima等工具來做解混淆,只是工作量大一點,值不值的問題。

對於未來,JS商業源碼加密的方向可能webassembly,先在服務端編譯成wasm,源碼就能真正的閉源。

有人的地方就有路,有混淆的地方就有解混淆,目前機器學習編程響應的解混淆工具也做的相當出色,比如

Secure, Reliable, and Intelligent Systems Lab

Machine Learning for Programming 產品 
nice2predictjsnice … 
查看 https://www.sri.inf.ethz.ch/research/plml

拓展參考

AST抽象語法樹

為什么額外說一下AST抽象語法樹,因為你可以 input-> ast -> output Anything。

比如你jsx轉換小程序模版語法,這樣你就可以用react語法來寫小程序,如Taro。 
mpvue, wepy, postcss …… 這些都是通過AST進行構建轉換的工具,es6 -> es5, babel 都是使用AST。

AST抽象語法樹大致流程:

Input 生成 AST tree

然后通過AST類型斷言進行相應的轉換

http://esprima.org/demo/parse.html

反編譯工具全集

小程序

https://github.com/qwerty472123/wxappUnpacker

推薦.Net、C# 逆向反編譯四大工具利器

https://www.cnblogs.com/ldc218/p/8945892.html

2018年支持java8的Java反編譯工具匯總 
https://blog.csdn.net/yannqi/article/details/80847354

原文:http://blog.w3cub.com/blog/2019/04/01/js-confusion/


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM