??一文帶你了解JavaScript多文件混淆加密

更新時間：2023年11月27日 09:04:58 作者：不寫?代碼沒飯吃

JavaScript?代碼多文件混淆加密可以有效保護源代碼不被他人輕易盜取,這篇文章主要為大家介紹了JavaScript中混淆加密的實現(xiàn),需要的小伙伴可以參考下

一文帶你了解 JavaScript 多文件混淆加密

JavaScript 代碼多文件混淆加密可以有效保護源代碼不被他人輕易盜取。雖然前端的 JS 無法做到純粹的加密，但通過一系列的混淆操作，可以讓源碼變得難以閱讀，增加他人復制的難度。強烈推薦您試一試 ipaguard代碼加密工具，它能夠為您的代碼提供更強的保護。

對于 webpack、vite 等打包后的多 JS 文件，建議只對核心代碼進行單獨混淆加密，以避免性能損耗。如果您想了解更多關于如何使用 safekodo 進行混淆加密的操作，請繼續(xù)閱讀本文。

我們先來看目錄結構及文件信息

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 lang="en">
 
<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  onclick="functionA()">測試</button>
 
    <div id="demo">
        <div>頁面未點擊</div>
    </div>
</body>
 
</html>

然后是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('點擊按鈕調(diào)用了functionA','red')
    functionB();
}

然后是b.js

window.functionB = () => {
    appendHtml('functionA中調(diào)用了functionB', 'blueviolet')
}

首先，通過按鈕觸發(fā)執(zhí)行了 a.js 的 functionA 方法，然后在 functionA 中調(diào)用了 b.js 的 functionB 方法。

頁面視圖可以看到以下變化:

未點擊按鈕時 - 頁面顯示按鈕和頁面未點擊字樣

點擊按鈕后 - 頁面上頁面未點擊字樣被移除，出現(xiàn)了紅色的點擊按鈕調(diào)用了 functionA 字樣，隨后又出現(xiàn)了 functionA 中調(diào)用了 functionB 字樣( 注意: 因為 JS 運行非?？欤詫嶋H看上去是一瞬間變化就完成了)

?

ipaguard加密前

要對以上多個 JS 文件進行加密，需要先將它們壓縮為 ZIP 格式。最好直接在 JS 文件目錄內(nèi)壓縮 a、b 兩個文件，確保解壓 ZIP 后直接得到的是 2 個 JS 文件而不是一個文件夾。

打開 ipaguard 官網(wǎng)，選擇頂部導航欄的 JS 多文件加密。將 ZIP 文件拖入或點擊選中 ZIP 文件，根據(jù)需求修改加密參數(shù)配置，然后點擊提交加密。等待文件加密完成后，即可點擊下載文件。

將 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依舊調(diào)用成功。