首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript Vue.js

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

Posted in Vue.js onFebruary 26, 2021

背景

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

安装

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

webpack-obfuscator https://www.npmjs.com/package/webpack-obfuscator

npm install --save-dev webpack-obfuscator

配置

// webpack.config.js
const JavaScriptObfuscator = require('webpack-obfuscator');
module.exports = {
 entry: {
 'abc': './test/input/index.js',
 'cde': './test/input/index1.js'
 },
 output: {
 path: 'dist',
 filename: '[name].js'
 },
 plugins: [
 new JavaScriptObfuscator({
 rotateUnicodeArray: true
 // 数组内是需要排除的文件
 }, ['abc.js'])
 ]
};

vue cli 项目配置：

// vue.config.js
const path = require('path');
var JavaScriptObfuscator = require('webpack-obfuscator');
module.exports = {
 publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
 productionSourceMap: false,
 configureWebpack: {
 plugins: [
 new JavaScriptObfuscator({
 rotateStringArray: true,
 }, [])
 ]
 },
 pwa: {},
 pages: {}
}

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

configureWebpack: (process.env.NODE_ENV === 'production') ? {
 plugins: [
 new JavaScriptObfuscator({
 // ...
 }, [])
 ]
 } : {},

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

构建

npm run build

构建文件对比

1. 原始文件

// test.js
function abc() {
 for (let i = 0; i < 10; i++) {
 console.log(`第${i}个,你好,hello`)
 }
}
abc()

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

webpackJsonp([2],{lVK7:function(o,l){!function(){for(var o=0;o<10;o++)console.log("第"+o+"个,你好,hello")}()}},["lVK7"]);

3. webpack-obfuscator 无参数时

new JavaScriptObfuscator({
}, [])
var _0x1f6e=["个,你好,hello","lVK7","log"];!function(n,o){!function(o){for(;--o;)n.push(n.shift())}(++o)}(_0x1f6e,323);var _0x3655=function(n,o){return _0x1f6e[n-=0]};webpackJsonp([2],{lVK7:function(n,o){!function(){for(var n=0;n<10;n++)console[_0x3655("0x0")]("第"+n+_0x3655("0x1"))}()}},[_0x3655("0x2")]);

4. webpack-obfuscator 高度混淆

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

new JavaScriptObfuscator({
 // 压缩代码
 compact: true,
 // 是否启用控制流扁平化(降低1.5倍的运行速度)
 controlFlowFlattening: true,
 // 应用概率;在较大的代码库中，建议降低此值，因为大量的控制流转换可能会增加代码的大小并降低代码的速度。
 controlFlowFlatteningThreshold: 1,
 // 随机的死代码块(增加了混淆代码的大小)
 deadCodeInjection: true,
 // 死代码块的影响概率
 deadCodeInjectionThreshold: 1,
 // 此选项几乎不可能使用开发者工具的控制台选项卡
 debugProtection: true,
 // 如果选中，则会在“控制台”选项卡上使用间隔强制调试模式，从而更难使用“开发人员工具”的其他功能。
 debugProtectionInterval: true,
 // 通过用空函数替换它们来禁用console.log，console.info，console.error和console.warn。这使得调试器的使用更加困难。
 disableConsoleOutput: true,
 // 标识符的混淆方式 hexadecimal(十六进制) mangled(短标识符)
 identifierNamesGenerator: 'hexadecimal',
 log: false,
 // 是否启用全局变量和函数名称的混淆
 renameGlobals: false,
 // 通过固定和随机（在代码混淆时生成）的位置移动数组。这使得将删除的字符串的顺序与其原始位置相匹配变得更加困难。如果原始源代码不小，建议使用此选项，因为辅助函数可以引起注意。
 rotateStringArray: true,
 // 混淆后的代码,不能使用代码美化,同时需要配置 cpmpat:true;
 selfDefending: true,
 // 删除字符串文字并将它们放在一个特殊的数组中
 stringArray: true,
 stringArrayEncoding: 'rc4',
 stringArrayThreshold: 1,
 // 允许启用/禁用字符串转换为unicode转义序列。Unicode转义序列大大增加了代码大小，并且可以轻松地将字符串恢复为原始视图。建议仅对小型源代码启用此选项。
 transformObjectKeys: true,
 unicodeEscapeSequence: false
}, []),

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

var _0xa0d1=["w7Bzw6oKw6E=","wrwIUcOVw4M=","w4bChi3DtcOQ","wpLDtsK5w4LDpA==","OUlQwp1z","woEqw4XCtsOe","YR3DrkDCiA==","woAjwq/Ci8KQ","dDNzw5bDgA==",
// ...
("0x201","xatR")]=function(x){return x()},x[_0x34e6("0x202","vdcx")](_0x2c01f8)},4e3);

3. webpack-obfuscator 中等混淆

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

new JavaScriptObfuscator({
 // 压缩代码
 compact: true,
 // 是否启用控制流扁平化(降低1.5倍的运行速度)
 controlFlowFlattening: true,
 // 应用概率;在较大的代码库中，建议降低此值，因为大量的控制流转换可能会增加代码的大小并降低代码的速度。
 controlFlowFlatteningThreshold: 0.75,
 // 随机的死代码块(增加了混淆代码的大小)
 deadCodeInjection: true,
 // 死代码块的影响概率
 deadCodeInjectionThreshold: 0.4,
 // 此选项几乎不可能使用开发者工具的控制台选项卡
 debugProtection: false,
 // 如果选中，则会在“控制台”选项卡上使用间隔强制调试模式，从而更难使用“开发人员工具”的其他功能。
 debugProtectionInterval: false,
 // 通过用空函数替换它们来禁用console.log，console.info，console.error和console.warn。这使得调试器的使用更加困难。
 disableConsoleOutput: true,
 // 标识符的混淆方式 hexadecimal(十六进制) mangled(短标识符)
 identifierNamesGenerator: 'hexadecimal',
 log: false,
 // 是否启用全局变量和函数名称的混淆
 renameGlobals: false,
 // 通过固定和随机（在代码混淆时生成）的位置移动数组。这使得将删除的字符串的顺序与其原始位置相匹配变得更加困难。如果原始源代码不小，建议使用此选项，因为辅助函数可以引起注意。
 rotateStringArray: true,
 // 混淆后的代码,不能使用代码美化,同时需要配置 cpmpat:true;
 selfDefending: true,
 // 删除字符串文字并将它们放在一个特殊的数组中
 stringArray: true,
 stringArrayEncoding: 'base64',
 stringArrayThreshold: 0.75,
 transformObjectKeys: true,
 // 允许启用/禁用字符串转换为unicode转义序列。Unicode转义序列大大增加了代码大小，并且可以轻松地将字符串恢复为原始视图。建议仅对小型源代码启用此选项。
 unicodeEscapeSequence: false
}, []),

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

var _0x1a25=["UmFzT1U=","RkVIc0o=","VUt2eW4=","Q29IS0g=","V1NSZ0k=","d3RNT2w=","dlV6cUw=","RlpzZWg=","QnpzSlE=","cXBqQ1k=","YXBwbHk=","bFZLNw==","Y3p1Ymo=","TFZlQXE=","Y2NKWlY=","cmV0dXJuIChmdW5jdGlvbigpIA==",
// ...
(b[_0x4bcb("0x2a")]("第"+c,b[_0x4bcb("0x2b")]))}})}},[_0x4bcb("0x2f")]);

4. webpack-obfuscator 低混淆

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

new JavaScriptObfuscator({
 // 压缩代码
 compact: true,
 // 是否启用控制流扁平化(降低1.5倍的运行速度)
 controlFlowFlattening: false,
 // 随机的死代码块(增加了混淆代码的大小)
 deadCodeInjection: false,
 // 此选项几乎不可能使用开发者工具的控制台选项卡
 debugProtection: false,
 // 如果选中，则会在“控制台”选项卡上使用间隔强制调试模式，从而更难使用“开发人员工具”的其他功能。
 debugProtectionInterval: false,
 // 通过用空函数替换它们来禁用console.log，console.info，console.error和console.warn。这使得调试器的使用更加困难。
 disableConsoleOutput: true,
 // 标识符的混淆方式 hexadecimal(十六进制) mangled(短标识符)
 identifierNamesGenerator: 'hexadecimal',
 log: false,
 // 是否启用全局变量和函数名称的混淆
 renameGlobals: false,
 // 通过固定和随机（在代码混淆时生成）的位置移动数组。这使得将删除的字符串的顺序与其原始位置相匹配变得更加困难。如果原始源代码不小，建议使用此选项，因为辅助函数可以引起注意。
 rotateStringArray: true,
 // 混淆后的代码,不能使用代码美化,同时需要配置 cpmpat:true;
 selfDefending: true,
 // 删除字符串文字并将它们放在一个特殊的数组中
 stringArray: true,
 stringArrayEncoding: false,
 stringArrayThreshold: 0.75,
 // 允许启用/禁用字符串转换为unicode转义序列。Unicode转义序列大大增加了代码大小，并且可以轻松地将字符串恢复为原始视图。建议仅对小型源代码启用此选项。
 unicodeEscapeSequence: false
}, []),

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

var _0x37a6=["exception","trace","console","个,你好,hello","lVK7","apply","return (function() ",'{}.constructor("return this")( )',"log","warn","debug","info","error"];!function(n,e){var o=function(e){for(;--e;)n.push(n.shift())};
// ...
[_0xe1fd("0x3")]("第"+n+_0xe1fd("0xb"))}()}},[_0xe1fd("0xc")]);

对比表格

文件名称 文件大小 正常构建 无参数 高度混淆 中度混淆 低度混淆
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 字节)

主要属性

{
 // 压缩,无换行
 compact: true,
 // 是否启用控制流扁平化(降低1.5倍的运行速度)
 controlFlowFlattening: false,
 // 应用概率;在较大的代码库中，建议降低此值，因为大量的控制流转换可能会增加代码的大小并降低代码的速度。
 controlFlowFlatteningThreshold: 0.75,
 // 随机的死代码块(增加了混淆代码的大小)
 deadCodeInjection: false,
 // 死代码块的影响概率
 deadCodeInjectionThreshold: 0.4,
 // 此选项几乎不可能使用开发者工具的控制台选项卡
 debugProtection: false,
 // 如果选中，则会在“控制台”选项卡上使用间隔强制调试模式，从而更难使用“开发人员工具”的其他功能。
 debugProtectionInterval: false,
 // 通过用空函数替换它们来禁用console.log，console.info，console.error和console.warn。这使得调试器的使用更加困难。
 disableConsoleOutput: false,
 //锁定混淆的源代码，使其仅在特定域和/或子域上运行。这使得某人只需复制并粘贴您的源代码并在其他地方运行就变得非常困难。
 domainLock: [],
 //标识符的混淆方式 hexadecimal(十六进制) mangled(短标识符)
 identifierNamesGenerator: 'hexadecimal',
 //全局标识符添加特定前缀,在混淆同一页面上加载的多个文件时使用此选项。此选项有助于避免这些文件的全局标识符之间发生冲突。为每个文件使用不同的前缀
 identifiersPrefix: '',
 inputFileName: '',
 // 允许将信息记录到控制台。
 log: false,
 // 是否启用全局变量和函数名称的混淆
 renameGlobals: false,
 // 禁用模糊处理和生成标识符
 reservedNames: [],
 // 禁用字符串文字的转换
 reservedStrings: [],
 // 通过固定和随机（在代码混淆时生成）的位置移动数组。这使得将删除的字符串的顺序与其原始位置相匹配变得更加困难。如果原始源代码不小，建议使用此选项，因为辅助函数可以引起注意。
 rotateStringArray: true,
 // 混淆后的代码,不能使用代码美化,同时需要配置 cpmpat:true;
 seed: 0,
 selfDefending: false,
 sourceMap: false,
 sourceMapBaseUrl: '',
 sourceMapFileName: '',
 sourceMapMode: 'separate',
 // 删除字符串文字并将它们放在一个特殊的数组中
 stringArray: true,
 // 编码的所有字符串文字stringArray使用base64或rc4并插入即用其解码回在运行时的特殊代码。true（boolean）：stringArray使用编码值base64;false（boolean）：不编码stringArray值;'base64'（string）：stringArray使用编码值base64;'rc4'（string）：stringArray使用编码值rc4。大约慢30-50％base64，但更难获得初始值。建议禁用unicodeEscapeSequence带rc4编码的选项以防止非常大的混淆代码。
 stringArrayEncoding: false,
 // 调整字符串文字将插入stringArray的概率
 stringArrayThreshold: 0.75,
 // 您可以将混淆代码的目标环境设置为以下之一：Browser;Browser No Eval;Node
 target: 'browser',
 // 是否启用混淆对象键
 transformObjectKeys: false,
 // 允许启用/禁用字符串转换为unicode转义序列。Unicode转义序列大大增加了代码大小，并且可以轻松地将字符串恢复为原始视图。建议仅对小型源代码启用此选项。
 unicodeEscapeSequence: false
}

注意

  • 安装 webpack-obfuscator 时要注意webpack-obfuscator的版本要与本地项目 webpack 版本相匹配，我用的是webpack-obfuscator@0.18.0 项目 webpack 是 4.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'等。

文章地址：https://www.cnblogs.com/dragonir/p/14445767.html 作者：dragonir

相关文章参考：

js代码混淆

webpack-obfuscator https://blog.csdn.net/qq_31126175/article/details/86526237

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

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

- Author -

Dragonir

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Vue.js 相关文章推荐
vue自定义插件封装，实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
Vue开发中常见的套路和技巧总结
Nov 24 Vue.js
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
vue组件是如何解析及渲染的？
Jan 13 Vue.js
Vue SPA 首屏优化方案
Feb 26 Vue.js
Vue的过滤器你真了解吗
Feb 24 Vue.js
VUE中的v-if与v-show区别介绍
Mar 13 Vue.js
vue+iview实现手机号分段输入框
Mar 25 Vue.js
vue选项卡切换的实现案例
Apr 11 Vue.js
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 Vue.js
Vue Element plus使用方法梳理
Dec 24 Vue.js
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 #Vue.js
Vue基本指令实例图文讲解
Feb 25 #Vue.js
vue常用高阶函数及综合实例
Feb 25 #Vue.js
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 #Vue.js
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 #Vue.js
用vite搭建vue3应用的实现方法
Feb 22 #Vue.js
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 #Vue.js
mediapipe(1) re模块(2) for(1) 事件调度器(1) while(1) cvzone(1) 无限迭代(1) 分词器(1) okenizer(1) sched(1)
You might like
无数据库的详细域名查询程序PHP版(5)
2006/10/09 PHP
PHP 远程关机实现代码
2009/11/10 PHP
PHP封装的一个支持HTML、JS、PHP重定向的多功能跳转函数
2014/06/19 PHP
完美解决在ThinkPHP控制器中命名空间的问题
2017/05/05 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
PHP设计模式（一）工厂模式Factory实例详解【创建型】
2020/05/02 PHP
如何实现iframe(嵌入式帧)的自适应高度
2006/07/26 Javascript
node.js中的fs.fsyncSync方法使用说明
2014/12/15 Javascript
深入理解JavaScript系列（33）：设计模式之策略模式详解
2015/03/03 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
2015/11/18 Javascript
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
2015/12/03 Javascript
jQuery Easyui快速入门教程
2016/08/21 Javascript
js中DOM事件绑定分析
2018/03/18 Javascript
jQuery 点击获取验证码按钮及倒计时功能
2018/09/20 jQuery
详解Vue用cmd创建项目
2019/02/12 Javascript
React.js组件实现拖拽排序组件功能过程解析
2020/04/27 Javascript
[02:05]2014DOTA2西雅图国际邀请赛 BBC第二天小组赛总结
2014/07/11 DOTA
python创建列表和向列表添加元素的实现方法
2017/12/25 Python
Python获取系统所有进程PID及进程名称的方法示例
2018/05/24 Python
python 实时得到cpu和内存的使用情况方法
2018/06/11 Python
Python3 翻转二叉树的实现
2019/09/30 Python
pytorch梯度剪裁方式
2020/02/04 Python
详谈tensorflow gfile文件的用法
2020/02/05 Python
导致python中import错误的原因是什么
2020/07/01 Python
Python之qq自动发消息的示例代码
2021/02/18 Python
HTML5 video视频字幕的使用和制作方法
2018/05/03 HTML / CSS
OnePlus加拿大官网：中国国际化手机品牌
2020/10/13 全球购物
出口公司经理求职简历中的自我评价
2013/10/13 职场文书
人力资源管理专业毕业生推荐信
2013/11/07 职场文书
大学自我鉴定范文
2013/12/26 职场文书
承诺书格式范文
2014/06/03 职场文书
2014年志愿者工作总结
2014/11/20 职场文书
单位工资证明范本
2015/06/12 职场文书
单位领导婚礼致辞
2015/07/28 职场文书
听课评课活动心得体会
2016/01/15 职场文书
Python中time标准库的使用教程
2022/04/13 Python