跟大家講解下有關Javascript混淆與解混淆的詳細介紹（附代碼），相信小伙伴們對這個話題應該也很關注吧，現在就為小伙伴們說說Javascript混淆與解混淆的詳細介紹（附代碼），小編也收集到了有關Javascript混淆與解混淆的詳細介紹（附代碼）的相關資料，希望大家看到了會喜歡。
本篇文章給大家帶來的內容是關于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=['[41m%s[0m','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')]('[32m%s[0m',_0x4f1daa);}function logR(_0x38b325){console[_0x5b26('0x0')](_0x5b26('0x1'),_0x38b325);}logG('logR');logR(_0x5b26('0x2'));再beautifier一下：
var _0xd6ac = ['[41m%s[0m', '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')]('[32m%s[0m', _0x4f1daa);}function logR(_0x38b325) { console[_0x5b26('0x0')](_0x5b26('0x1'), _0x38b325);}logG('logR');logR(_0x5b26('0x2'));這個復雜得多，但是分析一下你會發現，其實多了一個字典，所有方法變量，都有可能存在字典中，調用時先調用字典還原方法名變量再執行。其實入口都是變量的規則。
字典函數：
var _0xd6ac = ['[41m%s[0m', '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-minifyterseruglify-jsuglify-esGoogle Closure CompilerYUI CompressorCSS:
PostCSSclean-cssCSSOYUI CompressorHTML:
html-minifier從工具流(workflow) 來看，不論是 webpack 還是 gulp ，目前javascript最流行工具還是uglify。
相應的解混淆工具：
eval對應的解混淆工具, 隨便百度都可以搜索到，如jspackerJSA對應的解混淆工具unjsajavascript-obfuscator對應的解混淆工具crack.js壓縮類型uglify對應的工具UnuglifyJS，在線版jsnice解混淆策略其實是依據生成代碼規律編寫，不外乎觀察特征分析，再觀察特征分析，不斷調整。都是手辦眼見功夫。
都沒有什么難度可言，有的就是耐性。比如javascript-obfuscator對應的解混淆工具可以分解為N因子問題：
如何查詢function的作用域？預執行變量替換可能存在類型？...
如：
var _0xd6ac = ['[41m%s[0m', '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')]('[32m%s[0m', _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/crac...
還原后，如何重構代碼，那么你還得知道代碼生成之前是通過什么工具打包的webpack? 還是？
如webpack 的各種封裝頭和尾https://webpack.js.org/config...
(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抽象語法樹的功能如下：
prepack, esprima, babel
或者可以閱讀《編程語言實現模式》，涉及到 antlr4。
當然也可以通過esprima等工具來做解混淆，只是工作量大一點，值不值的問題。
對于未來，JS商業源碼加密的方向可能webassembly，先在服務端編譯成wasm，源碼就能真正的閉源。
有人的地方就有路，有混淆的地方就有解混淆，目前機器學習編程響應的解混淆工具也做的相當出色，比如
<img src="https://www.sri.inf.ethz.ch/assets/images/sri-logo.svg" alt="Secure, Reliable, and Intelligent Systems Lab" width="136" >
Machine Learning for Programming 產品nice2predict，jsnice ...查看 https://www.sri.inf.ethz.ch/r...
拓展參考AST抽象語法樹為什么額外說一下AST抽象語法樹，因為你可以 input-> ast -> output Anything。
比如你jsx轉換小程序模版語法，這樣你就可以用react語法來寫小程序，如Taro。mpvue, wepy, postcss …… 這些都是通過AST進行構建轉換的工具，es6 -> es5, babel 都是使用AST。
AST抽象語法樹大致流程：
Input 生成 AST tree
然后通過AST類型斷言進行相應的轉換
【相關推薦：JavaScript視頻教程】
以上就是Javascript混淆與解混淆的詳細介紹（附代碼）的詳細內容，更多請關注php中文網其它相關文章！
來源：php中文網