網頁前端的程式語言 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 可能算是最沒有效果的一個：
上圖是個簡單的範例，上半部是簡單的數學乘法運算，下半部是加密效果，看起來滿厲害的，完完全全看不懂在做什麼呢！
2. 破解方法
為什麼說是最沒有效果的加密工具？只要把剛剛加密後的程式碼，貼到以下這個 JS 美化工具：
按下「Beautify Code」後，程式碼幾乎被還原回去了呢！只是變數名稱被改了而已，整個運算邏輯看得一清二楚。
3. 補充說明
所以這個 packer 的作用，其實如作者自己下的副標題「A JavaScript Compressor」，只是個壓縮程式碼的工具。
然而程式碼比較短時，也是看不出有壓縮的效果，以本篇的範例來看，壓縮後的程式碼，比原來的長度還多一大串呢！
那麼為何要介紹這麼廢的工具呢？其實是另有妙用，這裡暫且先賣個關子。
三、JS 混淆工具
1. 線上工具 Javascript Obfuscator
線上的 JS 混淆工具也非常多，而混淆的特點是，也許看得出程式邏輯，但會讓你看得非常痛苦，放棄解析的慾望。
例如來看這個算是知名度不錯的混淆工具：
混淆後的程式碼不長，但是看起來有沒有覺得腦袋爆炸的感覺？
2. 破解方法
一樣把混淆後的程式碼，丟到前面的「JS 美化工具」看看：
結果很容易就看出程式邏輯了，雖然變數字串比較長，但不影響閱讀。
不過「JS 美化工具」並非萬靈丹，本篇舉例的程式碼剛好處理邏輯很簡單，如果是比較長的程式碼，混淆後「JS 美化工具」不一定能還原。
3. 高級破解工具
那麼比較困難的混淆程式碼，可以試試另一個比較專門的破解工具：
這個工具專門用來還原不易閱讀的 JS，前面有提到壓縮後的 JS，變數名稱被簡化是不可逆的，將不易閱讀。
而 JS NICE 會試著提供相關變數的類型註解，並幫我們把變數名稱改成有意義的字串，閱讀起來比較容易。
四、JS 加密 + 混淆
看起來無論是加密或混淆，JS 都有工具可以讓程式碼變得可以閱讀。不過如果將 JS "加密"再進行 "混淆"，要還原就非常困難了，請按照以下 3 步驟進行：
- 先使用 JS 壓縮工具
- 再使用 packer
- 最後使用 Javascript Obfuscator
上圖為 3 步驟後的混淆程式碼，我們試著用前述工具來還原。
這是「JS 美化工具」的還原結果，完全不知所云啊~~根本不能執行的！
這是「JS NICE」的還原結果，仍然是一團混亂，無法閱讀與解析。
五、總結
結論很明確，只要接續使用本篇提到的三種工具，壓縮 + 加密 + 混淆，就能有效保護 JS 不被解析與盜用。
而接下來的問題會是，每次要處理 JS 時，都得開啟三個線上工具來操作，不斷進行複製貼上的手工活。而且這三種工具缺一不可，若是其中一個網站開天窗或倒了，就得花不少時間來找替代品。
因此我決定做一個整合工具，將這三個功能一次執行，一條龍作業既快速又安全，當工具完成後會補充在此。
更多 Javascript 相關技巧：