? 一文帶你瞭解 JavaScript 多檔案混淆加密

JavaScript 程式碼多檔案混淆加密可以有效保護原始碼不被他人輕易盜取。雖然前端的 JS 無法做到純粹的加密，但透過一系列的混淆操作，可以讓原始碼變得難以閱讀，增加他人複製的難度。強烈推薦您試一試程式碼加密工具，它能夠為您的程式碼提供更強的保護。

對於 webpack、vite 等打包後的多 JS 檔案，建議只對核心程式碼進行單獨混淆加密，以避免效能損耗。如果您想了解更多關於如何使用 safekodo 進行混淆加密的操作，請繼續閱讀本文。

我們先來看目錄結構及檔案資訊

sk-demo├─ index.html├─ js│  ├─ a.js│  └─ b.js├─ readme.md└─ safekodo-js

? 可以看到在 sk-demo 專案下有一個 index.html 及兩個資料夾：? js 資料夾放的是未加密的 JS 程式碼，safekodo-js 則是多檔案加密後的 JS 檔案。

首先是 index.html 程式碼如下：

<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>safekodo 多檔案js混淆加密測試</title>     <script src="./js/a.js"></script>     <script src="./js/b.js"></script> </head> <body>     <button  >


然後是
a.js, 裡面包含了兩個掛載在了全域性的方法,
appendHtml 
functionA
window.appendHtml = (textContent,color) => {     let div = document.createElement('div');     div.style.color = color;     div.textContent = textContent;     document.getElementById('demo').appendChild(div); } window.functionA = () => {     document.querySelector('#demo div').remove();     appendHtml('點選按鈕呼叫了functionA','red')     functionB(); }


然後是
b.js
window.functionB = () => {     appendHtml('functionA中呼叫了functionB', 'blueviolet') }


? 首先，透過按鈕觸發執行了 a.js 的 functionA 方法，然後在 functionA 中呼叫了 b.js 的 functionB 方法。
頁面檢視可以看到以下變化:? 未點選按鈕時 - 頁面顯示按鈕和頁面未點選字樣? 點選按鈕後 - 頁面上頁面未點選字樣被移除，出現了紅色的點選按鈕呼叫了 functionA 字樣，隨後又出現了 functionA 中呼叫了 functionB 字樣(⚠️ 注意: 因為 JS 執行非常快，所以實際看上去是一瞬間變化就完成了)







加密前
? 要對以上多個 JS 檔案進行加密，需要先將它們壓縮為 ZIP 格式。最好直接在 JS 檔案目錄內壓縮 a、b 兩個檔案，確保解壓 ZIP 後直接得到的是 2 個 JS 檔案而不是一個資料夾。
開啟 ipaguard 官網，選擇頂部導航欄的 ? JS 多檔案加密。將 ZIP 檔案拖入或點選選中 ZIP 檔案，根據需求修改加密引數配置，然後點選提交加密。等待檔案加密完成後，即可點選下載檔案。
將 ZIP 解壓到專案的 ipaguard-js 資料夾下。檔案目錄結構如下所示：? ipaguard-js 包含兩個加密後的 JS 檔案。
sk-demo├─ index.html├─ js│  ├─ a.js│  └─ b.js└─ safekodo-js│  ├─ a.js│  └─ b.js├─ readme.md
隨後修改index.html的引用路徑
    <!-- <script src="./js/a.js"></script>     <script src="./js/b.js"></script> -->     <script src="./safekodo-js/a.js"></script>     <script src="./safekodo-js/b.js"></script>


隨後點選
測試按鈕 js依舊呼叫成功。














加密後








? 好了，相信大家透過上述的小 demo 已經學會了如何使用 ipaguard 程式碼加密工具對多個 JS 檔案進行加密了。??

? 一文帶你瞭解多檔案混淆加密

? 一文帶你瞭解 JavaScript 多檔案混淆加密

加密前

加密後

相關文章