2020年5月29日

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

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

Wayne Fu 0 A+
js-encrypt-obfuscator-tool.jpg-Javascript 壓縮、混淆、加密、解密工具及原理網頁前端的程式語言 Javascript,由於攤在陽光下誰都看得到,不如後端來得安全。因此除了機密性的程式碼別放前端,最好網頁上的 JS 也需要經過處理,除了降低可讀性,也可避免被盜用。

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

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



一、壓縮 JS 工具


1. 為何要壓縮 JS

壓縮 JS 是非常必要的,原因如下:

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

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


2. 線上工具

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

  • YUI Compressor:
  • UglifyJS 3
    • 線上工具:JSCompress
    • 這是比較新的壓縮工具,壓縮比最強悍,代表 JS 語法優化程度最高。
    • 版本 3 支援 ES6 語法



二、JS 加密工具


1. 線上工具 packer

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


js-encrypt-obfuscator-tool-1.jpg-Javascript 壓縮、混淆、加密、解密工具及原理

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


2. 破解方法

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


js-encrypt-obfuscator-tool-2.jpg-Javascript 壓縮、混淆、加密、解密工具及原理

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


3. 補充說明

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

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

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



三、JS 混淆工具


1. 線上工具 Javascript Obfuscator

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

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


js-encrypt-obfuscator-tool-3.jpg-Javascript 壓縮、混淆、加密、解密工具及原理

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


2. 破解方法

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

js-encrypt-obfuscator-tool-4.png-Javascript 壓縮、混淆、加密、解密工具及原理

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

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


3. 高級破解工具

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


js-encrypt-obfuscator-tool-5.jpg-Javascript 壓縮、混淆、加密、解密工具及原理

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

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



四、JS 加密 + 混淆


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

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

js-encrypt-obfuscator-tool-6.jpg-Javascript 壓縮、混淆、加密、解密工具及原理

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


js-encrypt-obfuscator-tool-7.png-Javascript 壓縮、混淆、加密、解密工具及原理

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


js-encrypt-obfuscator-tool-8.jpg-Javascript 壓縮、混淆、加密、解密工具及原理

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



五、總結


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

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

事實上免費服務要自己付主機費用,哪可能永遠不會收起來,我遇過太多次這三種工具的網站發生 404 或 5xx 的狀況,因此決定自己做一個整合工具,將這三個功能一次執行,一條龍作業既快速又安全,網站的存續至少是我能控制的,那麼當工具完成後會補充在此:



更多 Javascript 相關技巧:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

2 則留言:

  1. 我之前也想要研究混淆工具,不過一忙就先擱著了
    沒想到WFU大整理了這麼詳細的過程,這正是我之前想要研究內容,太感謝了!

    回覆刪除
    回覆
    1. 這流程用很久了,但一直覺得麻煩,直到最近終於解決技術問題,準備自己做工具,所以先寫份說明 :)

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP