欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue项目配置 webpack-obfuscator 进行代码加密混淆的实现

程序员文章站 2022-07-06 09:38:34
背景公司代码提供给第三方使用,为了不完全泄露源码,需要对给出的代码进行加密混淆,前端代码虽然无法做到完全加密混淆,但是通过使用 webpack-obfuscator 通过增加随机废代码段、字符编码转义...

背景

公司代码提供给第三方使用,为了不完全泄露源码,需要对给出的代码进行加密混淆,前端代码虽然无法做到完全加密混淆,但是通过使用 webpack-obfuscator 通过增加随机废代码段、字符编码转义等方法可以使构建代码完全混淆,达到无法恢复源码甚至无法阅读的目的。

安装

vue项目配置 webpack-obfuscator 进行代码加密混淆的实现

webpack-obfuscator

配置

vue cli 项目配置:

若只想在打包时加密混淆,本地运行时不混淆,可以进行以下的配置:

vue cli 2.x 配置在 webpack.prod.conf.js

构建

构建文件对比

1. 原始文件

2. webpack 默认工具uglifyjs-webpack-plugin

3. webpack-obfuscator 无参数时

4. webpack-obfuscator 高度混淆

低性能:性能比没有模糊处理慢 50-100%

构建后文件大小: 29,999 字节(29.2 kb)

3. webpack-obfuscator 中等混淆

最佳性能:性能比没有模糊处理慢 30-35%

构建后文件大小:7066字节(6.90kb)

4. webpack-obfuscator 低混淆

高性能: 性能稍微慢于没有混淆

构建后文件大小: 2,424 字节(2.36 kb)

对比表格

文件名称 文件大小 正常构建 无参数 高度混淆 中度混淆 低度混淆
test.js 117字节 177字节 363字节 29.2 kb(29,999 字节) 6.90kb(7066字节) 2.36 kb(2,424 字节)
jquery.js 111 kb (113,852 字节) 85.0 kb (87,064 字节) 115 kb (117,770 字节) 1.24 mb (1,304,998 字节) 401 kb (411,543 字节) 117 kb (120,243 字节)

主要属性

注意

  • 安装 webpack-obfuscator 时要注意webpack-obfuscator的版本要与本地项目 webpack 版本相匹配,我用的是webpack-obfuscator@0.18.0 项目 webpack4.x 版本。(4.x版webpack 使用最新版 webpack-obfuscator@3.3.0 会报错无法使用,webpack 杳升级到 5.x 版本)。
  • excludes数组 的兼容 multimatch包语法,例如支持 ['js/chunk-vendors.**.js']['excluded_bundle_name.js', '**_bundle_name.js']'excluded_bundle_name.js'等。

文章地址: 作者:dragonir

相关文章参考:

js代码混淆

webpack-obfuscator

到此这篇关于vue项目配置 webpack-obfuscator 进行代码加密混淆的文章就介绍到这了,更多相关vue webpack-obfuscator 代码混淆内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!