Javascript 壓縮、混淆、加密、解密工具及原理

woff

網頁前端的程式語言 Javascript，由於攤在陽光下誰都看得到，不如後端來得安全。因此除了機密性的程式碼別放前端，最好網頁上的 JS 也需要經過處理，除了降低可讀性，也可避免被盜用。

常見的處理方式有壓縮、加密、混淆等等，如果做得太簡化，使用某些破解工具就能還原。因此本篇會說明比較安全、複雜的作法與流程。

然而再提醒一下，前端程式碼並沒有無法破解的手段，不過本篇的作法要還原已經是極度困難的事。除非是遇到高手，否則預防一般訪客、或是 Script Kid 倒是綽綽有餘了。


一、壓縮 JS 工具
1. 為何要壓縮 JS

壓縮 JS 是非常必要的，原因如下：

• 可去除變數名稱，讓程式碼不易閱讀
• 此過程為不可逆，無法還原
• 大幅縮小程式碼容量，縮短網頁載入時間
  
  

由於壓縮後程式碼無法還原，請記得保留原始版本。


2. 線上工具

推薦的線上壓縮工具有這些：

• YUI Compressor：
  
  
  • 線上工具：Online YUI Compressor
  • Yahoo 開發的壓縮工具，效果不錯
  • 不支援 ES6
    
    
• UglifyJS 3
  
  
  • 線上工具：JSCompress
  • 這是比較新的壓縮工具，壓縮比最強悍，代表 JS 語法優化程度最高。
  • 版本 3 支援 ES6 語法
    
    
  
  

二、JS 加密工具
1. 線上工具 packer

JS 線上加密工具非常多，這裡介紹的 packer 可能算是最沒有效果的一個：

• http://dean.edwards.name/packer/
  
  

Javascript 壓縮 混淆 加密 解密工具

上圖是個簡單的範例，上半部是簡單的數學乘法運算，下半部是加密效果，看起來滿厲害的，完完全全看不懂在做什麼呢！


2. 破解方法

為什麼說是最沒有效果的加密工具？只要把剛剛加密後的程式碼，貼到以下這個 JS 美化工具：

• Online JavaScript Beautifier
  
  

Javascript 壓縮 混淆 加密 解密工具

按下「Beautify Code」後，程式碼幾乎被還原回去了呢！只是變數名稱被改了而已，整個運算邏輯看得一清二楚。


3. 補充說明

所以這個 packer 的作用，其實如作者自己下的副標題「A JavaScript Compressor」，只是個壓縮程式碼的工具。

然而程式碼比較短時，也是看不出有壓縮的效果，以本篇的範例來看，壓縮後的程式碼，比原來的長度還多一大串呢！

那麼為何要介紹這麼廢的工具呢？其實是另有妙用，這裡暫且先賣個關子。



三、JS 混淆工具
1. 線上工具 Javascript Obfuscator

線上的 JS 混淆工具也非常多，而混淆的特點是，也許看得出程式邏輯，但會讓你看得非常痛苦，放棄解析的慾望。

例如來看這個算是知名度不錯的混淆工具：

• Javascript Obfuscator
  
  

Javascript 壓縮 混淆 加密 解密工具

混淆後的程式碼不長，但是看起來有沒有覺得腦袋爆炸的感覺？


2. 破解方法

一樣把混淆後的程式碼，丟到前面的「JS 美化工具」看看：

Javascript 壓縮 混淆 加密 解密工具

結果很容易就看出程式邏輯了，雖然變數字串比較長，但不影響閱讀。

不過「JS 美化工具」並非萬靈丹，本篇舉例的程式碼剛好處理邏輯很簡單，如果是比較長的程式碼，混淆後「JS 美化工具」不一定能還原。


3. 高級破解工具

那麼比較困難的混淆程式碼，可以試試另一個比較專門的破解工具：

• JS NICE
  
  

Javascript 壓縮 混淆 加密 解密工具

這個工具專門用來還原不易閱讀的 JS，前面有提到壓縮後的 JS，變數名稱被簡化是不可逆的，將不易閱讀。

而 JS NICE 會試著提供相關變數的類型註解，並幫我們把變數名稱改成有意義的字串，閱讀起來比較容易。



四、JS 加密 + 混淆
看起來無論是加密或混淆，JS 都有工具可以讓程式碼變得可以閱讀。不過如果將 JS "加密" 再進行 "混淆"，要還原就非常困難了，請按照以下 3 步驟進行：

• 先使用 JS 壓縮工具
• 再使用 packer
• 最後使用 Javascript Obfuscator
  
  

Javascript 壓縮 混淆 加密 解密工具

上圖為 3 步驟後的混淆程式碼，我們試著用前述工具來還原。

Javascript 壓縮 混淆 加密 解密工具

這是「JS 美化工具」的還原結果，完全不知所云啊~~根本不能執行的！

Javascript 壓縮 混淆 加密 解密工具

這是「JS NICE」的還原結果，仍然是一團混亂，無法閱讀與解析。



五、總結
結論很明確，只要接續使用本篇提到的三種工具，壓縮 + 加密 + 混淆，就能有效保護 JS 不被解析與盜用。

而接下來的問題會是，每次要處理 JS 時，都得開啟三個線上工具來操作，不斷進行複製貼上的手工活。而且這三種工具缺一不可，若是其中一個網站開天窗或倒了，就得花不少時間來找替代品。


文章出處
https://ww.wfublog.com/2020/05/js-encrypt-obfuscator-tool.html