js源码保护方案之相互调用的多js文件加密方案

avaScript代码多文件混淆加密

首先声明，前端的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混淆加密的保护强度，多态的结果表明混淆过程中使用了不同的加密算法，所以才生成了不同的加密代码。

么是Html源代码加密？

使用JavaScript加密转化技术将Html变为密文，以此保护html源代码，这便是Html源码加密。

同时，这种加密技术还可实现网页反调试、防复制、链接加密等功能。

应用场景

什么情况下需要Html源代码加密？
Html源代码加密可用于哪些场景？

Html源代码加密可用于以下需求场合：

Html源代码保护；防内容爬虫、防分析、防嵌套、防内容复制。使Html代码不会轻易被他人获取。

能功效果

Html源代码加密，可以实现哪些功能效果？

Html源代码加密，可以实现以下效果：

加密的Html源码、加密的页面链接；禁用JavaScript时页面不渲染、禁止右键、禁止ctrl+c、ctrl+v、禁止iframe嵌套，等。

Html加密实例

以下进行一次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源代码加密，有效、有用！不错。

在线咨询

上一篇：Python怎么用Selenium爬取Q音乐歌曲+评
下一篇：2020Web开发学习路线图：从前端，到全站

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。