JavaScript 混淆 - 保護 JavaScript 程式碼不被竊取

Sahil Bhosale 2023年10月12日
JavaScript 混淆 - 保護 JavaScript 程式碼不被竊取

JavaScript 中的混淆是一種將 JavaScript 程式碼編碼為不可讀格式的技術。它使程式碼難以理解和逆向工程。

眾所周知,JavaScript 程式碼是從伺服器獲取並由瀏覽器在客戶端呈現的。因此,任何人都可以使用瀏覽器中的檢查工具輕鬆訪問和複製它。

這是一個問題,因為我們不希望每個人都檢視我們編寫的程式碼。它也可能導致安全風險,因為如果攻擊者在你的 JavaScript 程式碼中發現漏洞;該網站很容易受到攻擊。

這主要發生在網站或 Web 應用程式沒有後端時。始終建議將重要邏輯保留在後端(伺服器端),並且永遠不要將其傳送到客戶端。

但在某些情況下,你可能必須將程式碼的某些關鍵部分傳送到客戶端。混淆 JavaScript 程式碼的目標是將此類程式碼加密為人類無法理解的格式。

這樣,即使客戶可以訪問你的程式碼,他們也可能看不懂,即使他們複製了程式碼,他們也可能無法修改。下面我們有一個 JavaScript 程式碼片段。

console.log('Hello World!');

上面的程式碼被混淆之後,就是這個樣子,但是你幾乎看不懂任何東西。如果你直接在瀏覽器中執行此程式碼,它也會為你提供與前面程式碼相同的輸出。

var _0xf14d =
    ['\x48\x65\x6C\x6C\x6F\x20\x57\x6F\x72\x6C\x64\x21', '\x6C\x6F\x67'];
console[_0xf14d[1]](_0xf14d[0])

輸出:

Hello World!

此過程可能無法 100% 保護你的程式碼,但最好有一些東西而不是什麼都沒有。這是你可以用來增強網站安全性的安全措施之一。

如何混淆 JavaScript 程式碼

許多可以幫助將程式碼轉換為不可讀格式的工具都可以線上獲得,它們允許你對 JavaScript 程式碼執行混淆處理。下面是一些可用於對 JavaScript 程式碼進行編碼的混淆工具。

JavaScriptObfuscator.com

這是一個免費網站,你可以在其中混淆你的 JavaScript 程式碼。該網站將網站編碼為較小的編碼字串。

obfuscate_js_2_02

這個網站的唯一缺點是它沒有對程式碼的每一部分進行編碼。正因為如此,猜測被混淆的程式碼會更容易一些。

Obfuscator.io

obfuscator.io 是一個免費的開源網站,可讓你對 JavaScript 程式碼的每一部分進行混淆處理。這將生成大量的輸出字串,使程式碼非常難以猜測和逆向工程。

obfuscate_js_1_01

輸出:

function _0x2b7f(_0x4b6c11,_0x315769){var _0x1dc05a=_0x1dc0();return _0x2b7f=function(_0x2b7f7e,_0x228a95){_0x2b7f7e=_0x2b7f7e-0x64;var _0x45187e=_0x1dc05a[_0x2b7f7e];return _0x45187e;},_0x2b7f(_0x4b6c11,_0x315769);}(function(_0x5dd9bf,_0x334784){var _0xeea2f6=_0x2b7f,_0x3165e7=_0x5dd9bf();while(!![]){try{var _0x2b0404=parseInt(_0xeea2f6(0x6b))/0x1+parseInt(_0xeea2f6(0x6c))/0x2*(-parseInt(_0xeea2f6(0x66))/0x3)+-parseInt(_0xeea2f6(0x6d))/0x4+-parseInt(_0xeea2f6(0x6a))/0x5+-parseInt(_0xeea2f6(0x64))/0x6*(parseInt(_0xeea2f6(0x65))/0x7)+parseInt(_0xeea2f6(0x67))/0x8+parseInt(_0xeea2f6(0x69))/0x9;if(_0x2b0404===_0x334784)break;else _0x3165e7['push'](_0x3165e7['shift']());}catch(_0xc4f2f5){_0x3165e7['push'](_0x3165e7['shift']());}}}(_0x1dc0,0x58929));function-myFun(){var-_0x7d73e6=_0x2b7f;console[_0x7d73e6(0x68)]('Hello\x20World!');}myFun();function _0x1dc0(){var _0x35de3a=['127722huaALJ','119OpLtUQ','906fXgONm','3312880EZLkNB','log','11402298dsXQQu','129125FyqrTT','11454lIlZsK','1922GQtaJF','2607068kFkiIM'];_0x1dc0=function(){return _0x35de3a;};return _0x1dc0();}

要混淆 JavaScript 程式碼,請將其複製並貼上到上圖所示的輸入框中,然後按 Obfuscate 按鈕。

Jscrambler.com

Jscrambler.com 是另一個可以幫助你混淆 JavaScript 程式碼的網站。該網站還將生成大量難以複製和逆向工程的字串輸出。

你需要在此網站上建立一個帳戶才能開始使用,然後只有你可以使用此工具。唯一需要擔心的是,它是一項付費服務​​,而且該網站還要求你擁有一個企業電子郵件帳戶。

登入 Jscrambler 網站後,單擊下面的框以建立應用程式。

obfuscate_js_1

然後給一個應用程式任何名稱,然後單擊建立按鈕。

bobfuscate_js_2

單擊保護應用程式按鈕,這將帶你進入一個新頁面。

混淆_js_3

現在單擊新增按鈕以建立一個 JavaScript 檔案。然後給它一個名字並點選建立。

混淆_js_4

在這裡,你可以貼上要混淆的 JavaScript 程式碼,然後單擊保護應用程式按鈕。

bobfuscate_js_5

這會混淆你的 JavaScript 程式碼。

作者: Sahil Bhosale
Sahil Bhosale avatar Sahil Bhosale avatar

Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.

LinkedIn