快捷導(dǎo)航

前端代碼js部分進行混淆操作方法

更新時間：2025年07月21日 11:06:52 作者：翻滾吧鍵盤

對于前端開發(fā)中的代碼安全性一直是一個不可忽視的問題,前段時間公司就要求我們把我們小程序端的代碼再進行混淆,這篇文章主要介紹了前端代碼js部分進行混淆操作方法的相關(guān)資料,需要的朋友可以參考下

過程

將script的內(nèi)容截取出來復(fù)制到 obfuscator.io 進行加密后，復(fù)制回前端代碼的script里如果是js代碼分離的就相應(yīng)修改其引用

您好！非常理解您希望保護自己勞動成果的想法。當(dāng)我們將一個單文件的HTML應(yīng)用部署到像Cloudflare這樣的平臺時，保護前端代碼（特別是JavaScript邏輯和題庫數(shù)據(jù)）不被輕易復(fù)制是一個非常常見的需求。

需要明確一個核心概念：任何在瀏覽器中運行的前端代碼，從根本上來說都無法做到“完全加密”到無法被查看的程度。 因為瀏覽器必須能夠讀取和理解您的HTML、CSS和JavaScript才能將網(wǎng)頁正確地顯示和運行起來。一個有經(jīng)驗的用戶總能通過瀏覽器的“開發(fā)者工具”看到最終執(zhí)行的代碼。

不過，我們雖然無法做到軍隊級別的“加密”，但可以采取行業(yè)內(nèi)最標(biāo)準(zhǔn)的做法，讓您的代碼變得極難閱讀和復(fù)用，從而有效地保護您的核心邏輯和數(shù)據(jù)。這個過程主要分為兩步：壓縮 (Minification) 和 混淆 (Obfuscation)。

對于您這個單文件HTML應(yīng)用，最好的方法是在部署之前，手動對代碼中的JavaScript部分進行“混淆”，然后用混淆后的代碼替換原來的代碼。

如何操作？

我將用一個簡化的例子向您展示這個過程：

第一步：分離出你的JavaScript代碼

首先，將您HTML文件中 <script> 和 </script> 標(biāo)簽之間的所有JavaScript代碼復(fù)制出來，保存到一個單獨的文件中（例如 original.js）。

// 假設(shè)這是您原始的部分JavaScript代碼
const quizData = [
    {
        id: 1,
        title: "導(dǎo)論 & 第一章",
        questions: [
            // ... 大量的題目數(shù)據(jù) ...
        ]
    }
];

const appState = {
    currentView: 'chapters',
    currentQuizData: null,
    // ... 其他狀態(tài)
};

function startQuiz(chapterId) {
    const chapter = quizData.find(c => c.id === chapterId);
    if (chapter) {
        initializeQuiz(chapter);
    }
}

// ... 其他所有函數(shù) ...

document.addEventListener('DOMContentLoaded', init);

第二步：使用在線工具進行混淆

有很多免費的在線工具可以做到這一點。我推薦使用 JavaScript Obfuscator (在Google搜索 “JavaScript Obfuscator” 就能找到，比如 obfuscator.io 這個網(wǎng)站)。

訪問該網(wǎng)站。
將您剛剛復(fù)制的所有JavaScript代碼粘貼到輸入框中。
點擊“Obfuscate”（混淆）按鈕。
工具會生成一長串看起來像亂碼，但功能完全相同的代碼。

混淆后的代碼會是這個樣子（這只是一個簡短示例）：

var _0x5a3e=['DOMContentLoaded','addEventListener'];(function(_0x1a2b,_0x5a3e){var _0x3f2d=function(_0x5c4a){while(--_0x5c4a){_0x1a2b['push'](_0x1a2b['shift']());}};_0x3f2d(++_0x5a3e);}(_0x5a3e,0x1a7));var _0x3f2d=function(_0x1a2b,_0x5a3e){_0x1a2b=_0x1a2b-0x0;var _0x3f2d=_0x5a3e[_0x1a2b];return _0x3f2d;};const quizData=[{'id':0x1,'title':'導(dǎo)論 & 第一章','questions':[]}];const appState={'currentView':'chapters','currentQuizData':null};function startQuiz(_0x1b2c){const _0x1d3e=quizData['find'](_0x2e3f=>_0x2e3f['id']===_0x1b2c);if(_0x1d3e){initializeQuiz(_0x1d3e);}}document[_0x3f2d('0x0')](_0x3f2d('0x1'),init);

您可以看到，變量名、函數(shù)名都被替換成了無意義的字符（如 _0x5a3e），常量也被轉(zhuǎn)換成了十六進制，使得代碼邏輯極難被理解和分析。

第三步：將混淆后的代碼放回HTML文件

將在線工具生成的全部混淆代碼復(fù)制下來，回到您的HTML文件中，用它完全替換掉原來在 <script> 和 </script> 標(biāo)簽之間的所有內(nèi)容。

您的HTML文件結(jié)構(gòu)會變成這樣：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- ... 您的 head 內(nèi)容保持不變 ... -->
</head>
<body class="bg-gray-50 text-gray-800">
    <!-- ... 您的 body HTML內(nèi)容保持不變 ... -->

<script>
    // 在這里粘貼剛剛從混淆工具復(fù)制的、像亂碼一樣的全部代碼
    var _0x5a3e=['DOMContentLoaded','addEventListener'];(function(_0x1a2b,_0x5a3e){var _0x3f2d=function(_0x5c4a){while(--_0x5c4a){_0x1a2b['push'](_0x1a2b['shift']());}};_0x3f2d(++_0x5a3e);}(_0x5a3e,0x1a7));var _0x3f2d=function(_0x1a2b,_0x5a3e){_0x1a2b=_0x1a2b-0x0;var _0x3f2d=_0x5a3e[_0x1a2b];return _0x3f2d;};const quizData=[{'id':0x1,'title':'導(dǎo)論 & 第一章','questions':[]}];const appState={'currentView':'chapters','currentQuizData':null};function startQuiz(_0x1b2c){const _0x1d3e=quizData['find'](_0x2e3f=>_0x2e3f['id']===_0x1b2c);if(_0x1d3e){initializeQuiz(_0x1d3e);}}document[_0x3f2d('0x0')](_0x3f2d('0x1'),init);
    // ... 后面還有很長很長的混淆代碼 ...
</script>
</body>
</html>

第四步：部署到Cloudflare

現(xiàn)在，將這個修改后的、包含混淆代碼的HTML文件部署到Cloudflare Pages。當(dāng)別人訪問您的網(wǎng)站并查看源代碼時，他們看到的將是那段難以閱讀的混淆代碼，這能非常有效地保護您的題庫數(shù)據(jù)和程序邏輯。

關(guān)于Cloudflare的額外保護

Cloudflare本身也提供了一些安全功能，您可以開啟它們來增加一層保護：

Email Address Obfuscation：在 “Scrape Shield” 設(shè)置中，開啟這個功能可以防止爬蟲輕易地抓取您頁面上可能存在的郵箱地址。
Auto Minify：在 “Speed” -> “Optimization” 設(shè)置中，您可以開啟對JavaScript, CSS, 和 HTML 的自動壓縮 (Minify)。這雖然不如混淆的保護性強，但也能移除代碼中的空格和注釋，減小文件大小并稍微增加閱讀難度。