整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
首先聲明，前端的JS目前無法實現真正的加密，所有的加密措施只能算是混淆，通過一系列處理使源碼難以閱讀，從而達到加密效果。因此，在本文中提到的JavaScript代碼加密指的是混淆。
由于JavaScript大部分運行在瀏覽器端，這使得任何人都可以直接查看網站的代碼。如果代碼未做任何處理，源碼就會暴露，他人可以輕易復制你的成果。雖然沒有純粹的加密方案，但可以通過使代碼難以閱讀來實現“加密”的目的。強烈推薦使用 safekodo代碼加密工具。
對于webpack/vite等打包后的多個JS文件，不建議對所有文件進行加密，主要原因是每個文件都加密會導致性能損耗，當然也可以忽略這點損耗。建議將一些核心代碼抽離出來，對這部分進行單獨混淆加密。
現在開始使用safekodo來實現JS多文件代碼混淆加密。
首先來看目錄結構及文件信息：
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('點擊按鈕調用了functionA','red')
functionB();
}
然后是b.js
window.functionB=()=> {
appendHtml('functionA中調用了functionB', 'blueviolet')
}
首先，通過button觸發執行a.js的functionA，然后在functionA中調用b.js的functionB方法。
頁面視圖變化如下： 未點擊按鈕時 —— 頁面顯示按鈕和“頁面未點擊”字樣； 點擊按鈕后 —— 頁面上“頁面未點擊”字樣被移除，出現紅色的“點擊按鈕調用了functionA”字樣，隨后出現“functionA中調用了functionB”字樣（注意：因為JS運行非常快，所以實際看上去變化是一瞬間完成的）。
safekodo加密前
要對以上多個JS文件進行加密，首先將它們壓縮為ZIP格式（最好直接在JS文件目錄內壓縮a.js和b.js兩個文件，確保解壓ZIP后直接得到的是兩個JS文件而不是一個文件夾）。
打開safekodo官網，選擇頂部導航欄的“JS多文件加密”，將ZIP文件拖入或點擊選中ZIP文件，根據需求修改加密參數配置，點擊“提交加密”后，文件加密完成后可點擊“下載文件”。
將ZIP解壓到項目的safekodo-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已經學會了如何使用safekodo代碼加密工具對多個JS文件進行加密。
份相同的JavaScript代碼，進行多次混淆加密，能得到不同的結果嗎？
答案是肯定的，能。
JShaman可以實現這個效果。即：加密結果具有多態性、變化性。
下面實測展示。
來到JShaman網站，用它默認的示例代碼做測試，如下圖所示。
配置也使用默認的，如下圖所示。
然后進行混淆加密。第一次得到的加密代碼如下圖。
打開瀏覽器的開發者工具，在控制臺中，將上面的代碼用alert的方式顯示其代碼長度。
代碼：alert(`加密后的JS代碼`.length + " bytes");
顯示如下圖，代碼長度顯示為2898字節。
再混淆一次，又一次得新結果，這次是2817字節，如下圖：
再試，又得到3000字節，如下圖：
由此可見，同一段JavaScript代碼用JShaman混淆加密，會得到不同的新JavaScript加密代碼。
這種不同結果的意義是什么呢？
它體現了JavaScript混淆加密的保護強度，多態的結果表明混淆過程中使用了不同的加密算法，所以才生成了不同的加密代碼。
使用JavaScript加密轉化技術將Html變為密文，以此保護html源代碼，這便是Html源碼加密。
同時，這種加密技術還可實現網頁反調試、防復制、鏈接加密等功能。
什么情況下需要Html源代碼加密？
Html源代碼加密可用于哪些場景？
Html源代碼加密可用于以下需求場合：
Html源代碼保護；防內容爬蟲、防分析、防嵌套、防內容復制。使Html代碼不會輕易被他人獲取。
Html源代碼加密，可以實現哪些功能效果？
Html源代碼加密，可以實現以下效果：
加密的Html源碼、加密的頁面鏈接；禁用JavaScript時頁面不渲染、禁止右鍵、禁止ctrl+c、ctrl+v、禁止iframe嵌套，等。
以下進行一次Html加密實操。
測試html代碼：
<html>
<head>
<title>Html源代碼加密</title>
<meta name="description" content="JShaman Html網頁源碼加密" />
<meta name="keywords" content="Html加密、網頁源碼加密" />
</head>
<body>
<h1>
Html加密、網頁源碼加密
</h1>
<a href="https://www.jshaman.com" target="_blank">JShaman.com</a>
<script>
alert("test");
</script>
</body>
</html>
使用JShaman的Html源代碼加密：https://www.jshaman.com/enhtml/
加密功能啟用：僵尸元素植入、鏈接加密、SEO優化、JS混淆加密。
這幾項功能的說明如下：
僵尸元素植入：
給頁面中隨機插入div、span、p等元素，形成新的節點，這些節點中包含內容，但不顯示、不影響頁面布局。
由于其真實存在，因此會對DevTool（瀏覽器開發者工具）造成干擾，使用無法從“DOM和樣式探查器”中直接復制頁面內容。
鏈接加密：
對網頁中所有鏈接（“a href”語句）進行加密，隱藏鏈接地址。
以此防止鏈接被獲取、防止爬蟲根據鏈接獲得其它頁面地址。
SEO優化：
使加密后的Html代碼中包換與原頁面相同的title、keywords、description，及全頁面渲染后展示的文字內容。
以此增加頁面對搜索引擎的友好性，使網頁更容易被收錄，并有排名優化效果。
JS混淆加密：
對Html編碼后的JavaScript代碼進行混淆加密，使代碼無法閱讀、理解。
并且是混淆加密是多態特性，一次一結果，永不重復。
加密結果、加密后的Html代碼：
加密后的Html與加密前一樣使用，無任何區別。
加密效果
將其保存為Html文件后，打開查看效果：
1、首先，源碼是密文狀態， 是混淆加密過的JS代碼，不會被人“查看源碼”即得到Html源碼。
2、加密的鏈接，鏈接雖然被加密（從源碼中只能看到錯誤的鏈接地址），但不會影響鏈接的正常點擊，這還是比較神奇的，如下圖：
注：有人疑惑：從”查看器”中還是能看到“源碼”，是不是沒有起到加密效果呢？
這里需要澄清：開發者工具“查看器”中看到的內容，是Html代碼經瀏覽器渲染的結果代碼，不是源碼，它是必須能被渲染出來的，如果加密代碼不能渲染，頁面也將不能顯示。
而加密，首先必須保證的是加密后的html代碼能正常使用。對吧？
其次，即使是渲染后的代碼，其中鏈接也加密了、也有了僵尸節點、還包含了加密代碼，等等。它跟原始的Html代碼還是有不小差異的，依然保護著原始Html代碼。
3、隨機插入的僵尸節點，節點內容也是隨機的。
4、用于SEO的節點內容，內容是原Html頁面中的核心文字，它會使加密后的Html代碼對搜索引擎收錄依然友好。如下圖：
而且title、description也是原樣保留：
綜上展示，簡單總結：
Html源代碼加密，有效、有用！不錯。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
