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

 

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

 

0x00故事是这样的

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

2、下载Nodejs

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

4、然后使用npm install安装依赖

5、运行npm run build构建版本

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

7、安装 Webpack 和 Webpack CLI

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

9、直接安装即可

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

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

12、webpack构建项目成功

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

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

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

16、混淆效果如下

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

18、总结:

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

19、

原文始发于微信公众号（弥天安全实验室）：【安全加固】Vue框架前端源码加密混淆实践