在Web開(kāi)發(fā)中致燥，JavaScript代碼的保護(hù)是一個(gè)重要的問(wèn)題登疗。雖然我們不能實(shí)現(xiàn)完全的加密，但我們可以通過(guò)混淆來(lái)提高代碼的安全性嫌蚤》妫混淆是一種將代碼轉(zhuǎn)換為難以閱讀和理解的形式的技術(shù)，從而使得他人難以復(fù)制我們的工作成果搬葬。
JavaScript主要運(yùn)行在瀏覽器端荷腊，這意味著任何人都可以直接查看網(wǎng)站的代碼艳悔。如果代碼沒(méi)有進(jìn)行任何處理急凰，那么源代碼就會(huì)被直接暴露，他人可以輕易地復(fù)制我們的勞動(dòng)成果猜年。因此抡锈，我們需要讓代碼變得更難以閱讀，以實(shí)現(xiàn)“加密”的目的乔外。
對(duì)于使用webpack/vite等工具打包后的多個(gè)JavaScript文件床三，我們并不建議對(duì)所有文件進(jìn)行混淆。因?yàn)槊總€(gè)文件的混淆都會(huì)帶來(lái)一定的性能損耗杨幼。我們建議的做法是將一些核心的代碼抽離出來(lái)撇簿，對(duì)這部分進(jìn)行單獨(dú)的混淆聂渊。
在這里，我們將使用safekodo工具來(lái)實(shí)現(xiàn)JavaScript多文件代碼的混淆四瘫。首先汉嗽，我們來(lái)看一下項(xiàng)目的目錄結(jié)構(gòu)和文件信息：
sk-demo
├─ index.html
├─ js
│ ├─ a.js
│ └─ b.js
├─ readme.md
└─ safekodo-js
在sk-demo項(xiàng)目下，我們有一個(gè)index.html文件和兩個(gè)文件夾找蜜。js文件夾包含了未加密的JavaScript代碼饼暑，而safekodo-js文件夾則包含了混淆后的JavaScript文件。
首先是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混淆加密測(cè)試</title>
<script src="./js/a.js"></script>
<script src="./js/b.js"></script>
</head>
<body>
<button onclick="functionA()">測(cè)試</button>
<div id="demo">
<div>頁(yè)面未點(diǎn)擊</div>
</div>
</body>
</html>
然后是a.js, 里面包含了兩個(gè)掛載在了全局的方法,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ǎn)擊按鈕調(diào)用了functionA','red')
functionB();
}
然后是b.js
window.functionB = () => {
appendHtml('functionA中調(diào)用了functionB', 'blueviolet')
}
首先,通過(guò)button觸發(fā)執(zhí)行了a.js的functionA, 然后再functionA中調(diào)用了b.js的functionB方法;
頁(yè)面視圖可以看到以下變化:
未點(diǎn)擊按鈕時(shí) ----- 頁(yè)面顯示按鈕和頁(yè)面未點(diǎn)擊字樣
點(diǎn)擊按鈕后 ----- 頁(yè)面上頁(yè)面未點(diǎn)擊字樣被移除,出現(xiàn)了紅色的點(diǎn)擊按鈕調(diào)用了functionA字樣,隨后又出現(xiàn)了functionA中調(diào)用了functionB字樣(注意:因?yàn)閖s運(yùn)行非诚醋觯快,所以實(shí)際看上去是一瞬間變化就完成了)
要對(duì)以上多個(gè)js文件進(jìn)行加密,首先是將他們壓縮為zip格式(最好直接在js文件目錄內(nèi)壓縮a,b兩個(gè)文件,確保解壓zip后直接得到的是2個(gè)js文件 而不是一個(gè)文件夾);
打開(kāi)safekodo官網(wǎng) 選擇頂部導(dǎo)航欄的 js多文件加密 將文件zip文件拖入或點(diǎn)擊選中zip文件,根據(jù)需求修改加密參數(shù)配置,點(diǎn)擊提交加密后,文件加密完成后可點(diǎn)擊下載文件
將zip解壓到項(xiàng)目的safekodo-js文件夾下
文件目錄結(jié)構(gòu)如下可視, safekodo-js就有兩個(gè)加密后的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>
隨后點(diǎn)擊測(cè)試按鈕 js依舊調(diào)用成功弓叛。
好了,相信大家通過(guò)上述的小demo已經(jīng)學(xué)會(huì)了如何使用safekodo代碼加密工具對(duì)多個(gè)js文件進(jìn)行加密了,如還有疑問(wèn)或者問(wèn)題的話可以在官網(wǎng)右側(cè)處提交工單即可。
