对多个有相互调用关系的js文件压缩包混淆加密

最新推荐文章于 2024-07-23 12:35:43 发布

西红柿炒番茄盖浇饭

最新推荐文章于 2024-07-23 12:35:43 发布

阅读量179

点赞数 1

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/u011465309/article/details/131750765

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JavaScript代码多文件混淆加密

首先声明一点,前端的js想做到纯粹的加密目前是不可能的,所有的加密都只能说是混淆,通过一系列的处理使得源码无法阅读,进而达到加密的效果。所以在本文中如果提及了JavaScript代码加密就指代的是混淆。

因为JavaScript大都是运行在浏览器端,这就导致任何人都可以直接对网站的代码进行查看，如果代码没有进行任何处理就会导致直接暴露源码，他人便可轻而易举的复制你的劳动成果,但是由于没有纯粹的加密方案,所以能做的就是让代码变得更加的难以阅读,他人难以复制你的成果,实现“加密”的目的。强烈推荐你试一试safekodo代码加密工具。

对于webpack/vite等打包后的多js文件,其次并不建议对全部文件进行加密,主要原因是每个都进行加密会有一点性能损耗,当然你也可以忽略这个损耗。建议的做法是将一些核心的代码抽离出来,对这部分进行单独混淆加密。

ok,让我们来开始使用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,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依旧调用成功。
safekodo加密后

好了,相信大家通过上述的小demo已经学会了如何使用safekodo代码加密工具对多个js文件进行加密了,如还有疑问或者问题的话可以在官网右侧处提交工单即可。

西红柿炒番茄盖浇饭

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
对多个有相互调用关系的js文件压缩包混淆加密

因为JavaScript大都是运行在浏览器端,这就导致任何人都可以直接对网站的代码进行查看，如果代码没有进行任何处理就会导致直接暴露源码，他人便可轻而易举的复制你的劳动成果,但是由于没有纯粹的加密方案,所以能做的就是让代码变得更加的难以阅读,他人难以复制你的成果,实现“加密”的目的。强烈推荐你试一试[safekodo代码加密工具](https://www.safekodo.com)。对于webpack/vite等打包后的多js文件,其次并不建议对全部文件进行加密,主要原因是每个都进行加密会有一点性能损
复制链接

扫一扫