在Web开发中，JavaScript代码的保护是一个重要的问题。虽然我们不能实现完全的加密，但我们可以通过混淆来提高代码的安全性。混淆是一种将代码转换为难以阅读和理解的形式的技术，从而使得他人难以复制我们的工作成果。
JavaScript主要运行在浏览器端，这意味着任何人都可以直接查看网站的代码。如果代码没有进行任何处理，那么源代码就会被直接暴露，他人可以轻易地复制我们的劳动成果。因此，我们需要让代码变得更难以阅读，以实现“加密”的目的。
对于使用webpack/vite等工具打包后的多个JavaScript文件，我们并不建议对所有文件进行混淆。因为每个文件的混淆都会带来一定的性能损耗。我们建议的做法是将一些核心的代码抽离出来，对这部分进行单独的混淆。
在这里，我们将使用safekodo工具来实现JavaScript多文件代码的混淆。首先，我们来看一下项目的目录结构和文件信息：
sk-demo
├─ index.html
├─ js
│ ├─ a.js
│ └─ b.js
├─ readme.md
└─ safekodo-js
在sk-demo项目下，我们有一个index.html文件和两个文件夹。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混淆加密测试</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运行非常快,所以实际看上去是一瞬间变化就完成了)
要对以上多个js文件进行加密,首先是将他们压缩为zip格式(最好直接在js文件目录内压缩a,b两个文件,确保解压zip后直接得到的是2个js文件 而不是一个文件夹);
打开safekodo官网 选择顶部导航栏的 js多文件加密 将文件zip文件拖入或点击选中zip文件,根据需求修改加密参数配置,点击提交加密后,文件加密完成后可点击下载文件
将zip解压到项目的safekodo-js文件夹下
文件目录结构如下可视, safekodo-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依旧调用成功。
好了,相信大家通过上述的小demo已经学会了如何使用safekodo代码加密工具对多个js文件进行加密了,如还有疑问或者问题的话可以在官网右侧处提交工单即可。
