vite-plugin-obfuscator与webpack-obfuscator代码混淆

最新推荐文章于 2024-05-23 15:25:11 发布

小纯洁w

最新推荐文章于 2024-05-23 15:25:11 发布

阅读量1.3k

点赞数 26

文章标签：前端 vue.js webpack

本文链接：https://blog.csdn.net/weixin_43891869/article/details/138181809

版权

本文介绍了前端代码混淆工具vite-plugin-obfuscator和webpack-obfuscator，用于保护源代码免受逆向工程，详细讲解了如何在Vite和Webpack构建过程中配置这些插件，以及不同混淆程度对性能和代码大小的影响。

摘要由CSDN通过智能技术生成

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

vite-plugin-obfuscator 和 webpack-obfuscator 都是用于在构建过程中混淆 JavaScript 代码的工具，他们能帮助保护源代码中的敏感内容不被轻易理解和解析，提高源代码的安全性。

vite-plugin-obfuscator 是一款为 Vite 设计的插件，它使用 javascript-obfuscator 库实现 JavaScript 代码的混淆。为 Vite 提供了在构建过程中自动混淆代码的能力。
webpack-obfuscator 是一款为 Webpack 设计的插件和加载器，提供了对 Webpack 构建过程中产生的 JavaScript 文件进行混淆的功能。类似于 vite-plugin-obfuscator，它也是基于 javascript-obfuscator 库实现的。

两者的选择主要取决于你项目中所使用的构建工具，如果项目基于 Vite，你就需要使用 vite-plugin-obfuscator，如果基于 Webpack，则应该使用 webpack-obfuscator。

安装

//应用于webpack  
npm install --save-dev webpack-obfuscator 
yarn add --save-dev webpack-obfuscator 
pnpm i --save-dev webpack-obfuscator  -D       
 //应用于 vite
npm install --save-dev vite-plugin-javascript-obfuscator
yarn add --dev vite-plugin-javascript-obfuscator
pnpm i vite-plugin-javascript-obfuscator -D

配置
在Vite配置文件中引入并配置插件：

// vite.config.js
import { defineConfig } from 'vite';
import obfuscatorPlugin from "vite-plugin-javascript-obfuscator";

export default defineConfig({
  plugins: [
    obfuscatorPlugin({
      options: {
        // your javascript-obfuscator options
        debugProtection: true,
        // ...  [See more options](https://github.com/javascript-obfuscator/javascript-obfuscator)
      },
    }),
  ],
});

参数

Name	Type	Default	Description
include	Array\|String\|RegExp\|Function	[/.(jsx?\|tsx?\|cjs\|mjs)$/]	Configure this option to include files
exclude	Array\|String\|RegExp\|Function	[/node_modules/, /.nuxt/]	Configure this option to include files
options	Object	javascript-obfuscator default options	***
apply	‘serve’ \| ‘build’	both serve and build.	By default plugins are invoked for both serve and build. In cases where a plugin needs to be conditionally applied only during serve or build, use the apply property to only invoke them during vite build or vite serve
debugger	Boolean	false	false Used for debugging, Print out the path of matching or excluding files.

在webpack配置文件中引入并配置插件：

// 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: (process.env.NODE_ENV === 'production') ? {
    plugins: [
      new JavaScriptObfuscator({
        rotateStringArray: true,
      }, [])
    ]
  },
  pwa: {},
  pages: {}
} : {},

构建
npm run build

原始文件

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

webpack 默认工具uglifyjs-webpack-plugin

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

new JavaScriptObfuscator({
}, [])

webpack-obfuscator 无参数时

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")]);

webpack-obfuscator 高度混淆
低性能：性能比没有模糊处理慢 50-100%
构建后文件大小: 29,999 字节(29.2 KB)

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,
  stringArrayThreshold: 1,
  // 允许启用/禁用字符串转换为unicode转义序列。Unicode转义序列大大增加了代码大小，并且可以轻松地将字符串恢复为原始视图。建议仅对小型源代码启用此选项。
  transformObjectKeys: true,
  unicodeEscapeSequence: false
}, []),

5.webpack-obfuscator 中等混淆
最佳性能：性能比没有模糊处理慢 30-35%
构建后文件大小：7066字节(6.90kb)

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
}, []),

webpack-obfuscator 低混淆
高性能: 性能稍微慢于没有混淆
构建后文件大小: 2,424 字节(2.36 KB)

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
}, []),

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字节	117字节	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
}

个人调优后的配置，我们的目的主要是不让用户调试，代码达到不可读即可。

const path = require("path");
let JavaScriptObfuscator = require('webpack-obfuscator');
module.exports = {
  publicPath: process.env.VUE_APP_PATHNAME,
  outputDir: "dist",
  pages: {
    index: {
      entry: "./src/main.js",
      template: "./index.html",
      filename: "./index.html",
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    }
  },
 
 
  lintOnSave: false,
  productionSourceMap: false,
  configureWebpack: (process.env.NODE_ENV === 'production') ? {
    plugins: [
      new JavaScriptObfuscator({
      // 压缩代码
  compact: true,
  // 是否启用控制流扁平化(降低1.5倍的运行速度)
  controlFlowFlattening: false,
  // 随机的死代码块(增加了混淆代码的大小)
  deadCodeInjection: false,
  // 此选项几乎不可能使用开发者工具的控制台选项卡
  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,
  stringArrayThreshold: 0.75,
  // 允许启用/禁用字符串转换为unicode转义序列。Unicode转义序列大大增加了代码大小，并且可以轻松地将字符串恢复为原始视图。建议仅对小型源代码启用此选项。
  unicodeEscapeSequence: false
      }, [])
    ]
  } : {},
    
  // 解决打包的时报错  
  parallel: false
  
};

注意
安装 webpack-obfuscator 时要注意webpack-obfuscator的版本要与本地项目 webpack 版本相匹配。

小纯洁w

关注

26
点赞
踩
20

收藏

觉得还不错? 一键收藏
打赏
0
评论
vite-plugin-obfuscator与webpack-obfuscator代码混淆

vite-plugin-obfuscator 和 webpack-obfuscator 都是用于在构建过程中混淆 JavaScript 代码的工具，他们能帮助保护源代码中的敏感内容不被轻易理解和解析，提高源代码的安全性。两者的选择主要取决于你项目中所使用的构建工具，如果项目基于 Vite，你就需要使用 vite-plugin-obfuscator，如果基于 Webpack，则应该使用 webpack-obfuscator。个人调优后的配置，我们的目的主要是不让用户调试，代码达到不可读即可。
复制链接

扫一扫