淘寶攻略

Web前端JS代碼需要保護(hù)嗎？

這得具體情況具體分析：

1. 如果只是寫一段web頁面圖片輪播，或是跑馬燈效果等等之類簡(jiǎn)單的功能。那不需要保護(hù)。
2. 如果是精心設(shè)計(jì)一個(gè)絢麗的特效，如果想要保護(hù)這段自己付諸幸苦實(shí)現(xiàn)的特效代碼不被他人隨意拿去使用，那應(yīng)該保護(hù)這段JS代碼！
3. 如果頁面上有重要的功能是用JS代碼管控的，比如交易邏輯、帳號(hào)密碼信息、個(gè)人隱私、甚至有與遠(yuǎn)程服務(wù)器或數(shù)據(jù)庫(kù)的通信等等，那么相關(guān)的js代碼非常應(yīng)該被保護(hù)、應(yīng)該做JS代碼防盜保護(hù)！否則可能引起被黑客分析、攻擊等嚴(yán)重問題。安全相關(guān)的事情，從來都要防患于未然、不可心存僥幸。除非它對(duì)你毫不重要。

如何保護(hù)Web前端JS代碼？

1. 打包&壓縮
   有人認(rèn)為打包、壓縮就是對(duì)JS代碼的保護(hù)。確實(shí)，打包在一定程度上可以起碼些許保護(hù)作用，好像看起來是如此。但打包、壓縮的目的并不是為了保護(hù)JS代碼，而是為了使用方便、減小代碼體積，方便使用、便于傳輸。比如模塊化的編程可能產(chǎn)生200個(gè)JS文件，如果使用時(shí)逐一用“script src”進(jìn)行引用……這是種折磨，不管是對(duì)于代發(fā)人員，還是網(wǎng)絡(luò)加載（瀏覽器也會(huì)生氣！x_x）。類似Webpacket、Gulp進(jìn)行打包，可以將這些多個(gè)JS合成到一個(gè)文件，并且可能會(huì)進(jìn)行回車、換行、空格的刪除，以實(shí)現(xiàn)代碼壓縮，也有一些簡(jiǎn)單混淆操作：把長(zhǎng)變量名改為統(tǒng)一風(fēng)格的短變量名等。然后，最終生成的一個(gè)文件。代碼總量減小了、可讀性差了、使用方便了。同時(shí)讓有些人認(rèn)為這也實(shí)現(xiàn)了JS代碼保護(hù)。其實(shí)、實(shí)際上、當(dāng)然的代碼并沒有被保護(hù)：可讀性依舊，只是代碼量大了一些而已，只要稍稍耐心的讀代碼，會(huì)發(fā)現(xiàn)，代碼依然是很易理解的，沒有多少安全性可言。
2. 混淆&加密
   前端JS代碼的保護(hù)，必需要混淆和加密共用。單獨(dú)的JS源代碼加密，是行不通的，更不可能有所謂的JS不可逆加密。因?yàn)榇a在瀏覽器端執(zhí)行時(shí)，必須轉(zhuǎn)解密還原成原始代碼，才能被瀏覽器的JS引擎識(shí)別和運(yùn)行。在解密后，會(huì)存在完整的原始JS代碼。這是非常不安全的存在，有多種方法可將原始的JS代碼顯示出來。

JS代碼混淆被不少開發(fā)人員認(rèn)為是不夠高端的JS代碼保護(hù)方式，聽起來不如JS源碼加密更具安全性。事實(shí)上，混淆也有多個(gè)級(jí)別。比如比較低端的字符搜索和串替換、隨機(jī)插入偽僵尸代碼、字符串十六進(jìn)制化等等。而也有高端的手法，會(huì)先進(jìn)行語法分析、詞法分析，重建語法樹，相當(dāng)于已經(jīng)實(shí)現(xiàn)了一個(gè)JS引擎，在引擎中處理代碼，那么，就可以在其中任意一步進(jìn)行自由度極高的操作，比如在語法樹中插入新的語法結(jié)構(gòu)、比如可以將字符串全部提取并進(jìn)行加密、可以對(duì)變量進(jìn)行整體有規(guī)則化的重定義使無意義化等等。這樣就可以實(shí)現(xiàn)真正的代碼重建。這樣重建的JS代碼安全性，將會(huì)有一個(gè)質(zhì)的提升。

當(dāng)正真的混淆和加密聯(lián)合使用，可以實(shí)現(xiàn)真正的JS代碼安全保護(hù)。JS混淆中融入JS加密，JS加密中又嵌入JS混淆。這樣保護(hù)后的代碼，即使在客戶端執(zhí)行環(huán)境中被逆向還原，得到的也是大量含義不明的函數(shù)、代碼、字符串。特別重點(diǎn)是：代碼已經(jīng)經(jīng)過了重建，這時(shí)逆向得到的也是分離后的重建的無意義JS代碼、大量的僵尸代碼、混淆的字符串、不明含意的變量。可讀性與原始代碼相比……天壤之別。

固執(zhí)的人或許還會(huì)說：沒有破解不了的保護(hù)方案，只要我認(rèn)真、用心、用時(shí)的分析，還是能分析出原始代碼含意的，確實(shí)，可能如此。

但是，原本的代碼，可能只需要讀10分鐘，而從這樣保護(hù)后的JS代碼讀取原始含意，可能需要……10個(gè)月。而這時(shí)候，我們的JS代碼可能已經(jīng)更新到下一版了。

JS代碼保護(hù)的目的已經(jīng)達(dá)到了，不是嗎？