【安全加固】Vue框架前端源码加密混淆实践

游客2024-07-11 12:09:39

网安引领时代,弥天点亮未来

0x00故事是这样的

1、近期我考虑为我的工具打造一个精美的前端界面,鉴于Vue框架在业内广受欢迎,我打算采用它来实现这一目标。然而,为确保我的前端代码不被他人轻易获取和滥用,我深入研究了前端源码的混淆与加密技术。通过学习这些技术,我能够进一步提高我的代码安全性,防止他人轻易地查看或复制我的源代码。

2、下载

3、使用npm vue@命令创建一个项目

4、然后使用npm 安装依赖

5、运行npm run build构建版本

6、但是关键的代码,还是能看见

7、安装 和 CLI

8、直接运行npx 会报错,因为缺少css、vue、svg 的处理器

9、直接安装即可

10、更改.json配置文件,增加"type": ""

11、..cjs配置一下处理css、vue、svg等文件

12、构建项目成功

13、刚才css、svg、vue文件都打包成一个了

14、如果需要对源码混淆加密,可以使用-,也是安装即可

15、启用全局变量和函数名称混淆

16、混淆效果如下

 1

17、更多加密混淆参数,可以参考官网文档

18、总结:

网站前端加密并且做混淆,并不是为了完全杜绝安全隐患,只是为了防止脚本小子小白调试代码,但是对于高手无法完全防护,只是增加人家调试的成本而已。

19、欢迎大家关注弥天安全实验室公众号。

 2