快捷導(dǎo)航

前端代碼js部分進(jìn)行混淆操作方法

更新時(shí)間：2025年07月21日 11:06:52 作者：翻滾吧鍵盤(pán)

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

過(guò)程

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

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

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

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

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

如何操作？

我將用一個(gè)簡(jiǎn)化的例子向您展示這個(gè)過(guò)程：

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

首先，將您HTML文件中 <script> 和 </script> 標(biāo)簽之間的所有JavaScript代碼復(fù)制出來(lái)，保存到一個(gè)單獨(dú)的文件中（例如 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);

第二步：使用在線工具進(jìn)行混淆

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

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

混淆后的代碼會(huì)是這個(gè)樣子（這只是一個(gè)簡(jiǎn)短示例）：

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ù)名都被替換成了無(wú)意義的字符（如 _0x5a3e），常量也被轉(zhuǎn)換成了十六進(jìn)制，使得代碼邏輯極難被理解和分析。

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

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

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

<!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);
    // ... 后面還有很長(zhǎng)很長(zhǎng)的混淆代碼 ...
</script>
</body>
</html>

第四步：部署到Cloudflare

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

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

Cloudflare本身也提供了一些安全功能，您可以開(kāi)啟它們來(lái)增加一層保護(hù)：

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