代码混淆：对比 vue3 vite 和 webpack 的表现

为什么用到vite 和webpack 代码混淆两种打包工具？

原因很尴尬 本来想用vue3+vite 但是需求是要求打包后，可以通过flie 文件访问不使用启动服务访问，*下采用了webpack打包

当然在vite中尝试了另一种方式直接访问file， 但是由于混淆后不可用放弃了vite。使用的插件@vitejs/plugin-legacy 可以访问file 但是不可以和混淆使用

然后上代码

vite.config.js 至于为什么用rollup-plugin-obfuscator 很艰辛 尝试过vite-plugin-javascript-obfuscator rollup-plugin-javascript-obfuscator rollup-obfuscator 都有点小问题

import obfuscatorBox from 'rollup-plugin-obfuscator';


 plugins: [
 ...
   obfuscatorBox({
      global:true,
      options: {
        compact: true,
        controlFlowFlattening: true,
        controlFlowFlatteningThreshold: 0.75,
        numbersToExpressions: true,
        simplify: true,
        stringArrayShuffle: true,
        splitStrings: true,
        splitStringsChunkLength: 10,
        rotateUnicodeArray: true,
        deadCodeInjection: true,
        deadCodeInjectionThreshold: 0.4,
        debugProtection: false,
        debugProtectionInterval: 2000,
        disableConsoleOutput: true,
        domainLock: [],
        identifierNamesGenerator: "hexadecimal",
        identifiersPrefix: "",
        inputFileName: "",
        log: true,
        renameGlobals: true,
        reservedNames: [],
        reservedStrings: [],
        seed: 0,
        selfDefending: true,
        sourceMap: false,
        sourceMapBaseUrl: "",
        sourceMapFileName: "",
        sourceMapMode: "separate",
        stringArray: true,
        stringArrayEncoding: ["base64"],
        stringArrayThreshold: 0.75,
        target: "browser",
        transformObjectKeys: true,
        unicodeEscapeSequence: true,

        
        domainLockRedirectUrl: "about:blank",
        forceTransformStrings: [],
        identifierNamesCache: null,
        identifiersDictionary: [],
        ignoreImports: true,
        optionsPreset: "default",
        renameProperties: false,
        renamePropertiesMode: "safe",
        sourceMapSourcesMode: "sources-content",
       
        stringArrayCallsTransform: true,
        stringArrayCallsTransformThreshold: 0.5,
       
        stringArrayIndexesType: ["hexadecimal-number"],
        stringArrayIndexShift: true,
        stringArrayRotate: true,
        stringArrayWrappersCount: 1,
        stringArrayWrappersChainedCalls: true,
        stringArrayWrappersParametersMaxCount: 2,
        stringArrayWrappersType: "variable",
      },
     
    }),
 ]

另外一种方式 webpack使用混淆

html-webpack-plugin 这个比较好用 一次就成

const HtmlWebpackPlugin = require('html-webpack-plugin')
new JavaScriptObfuscator({
        compact: true,
        controlFlowFlattening: true,
        controlFlowFlatteningThreshold: 0.75,
        numbersToExpressions: true,
        simplify: true,
        stringArrayShuffle: true,
        splitStrings: true,
        splitStringsChunkLength: 10,
        rotateUnicodeArray: true,
        deadCodeInjection: true,
        deadCodeInjectionThreshold: 0.4,
        debugProtection: false,
        debugProtectionInterval: 2000,
        disableConsoleOutput: true,
        domainLock: [],
        identifierNamesGenerator: "hexadecimal",
        identifiersPrefix: "",
        inputFileName: "",
        log: true,
        renameGlobals: true,
        reservedNames: [],
        reservedStrings: [],
        seed: 0,
        selfDefending: true,
        sourceMap: false,
        sourceMapBaseUrl: "",
        sourceMapFileName: "",
        sourceMapMode: "separate",
        stringArray: true,
        stringArrayEncoding: ["base64"],
        stringArrayThreshold: 0.75,
        target: "browser",
        transformObjectKeys: true,
        unicodeEscapeSequence: true,

        
        domainLockRedirectUrl: "about:blank",
        forceTransformStrings: [],
        identifierNamesCache: null,
        identifiersDictionary: [],
        ignoreImports: true,
        optionsPreset: "default",
        renameProperties: false,
        renamePropertiesMode: "safe",
        sourceMapSourcesMode: "sources-content",
       
        stringArrayCallsTransform: true,
        stringArrayCallsTransformThreshold: 0.5,
       
        stringArrayIndexesType: ["hexadecimal-number"],
        stringArrayIndexShift: true,
        stringArrayRotate: true,
        stringArrayWrappersCount: 1,
        stringArrayWrappersChainedCalls: true,
        stringArrayWrappersParametersMaxCount: 2,
        stringArrayWrappersType: "variable",
      }, [])

效果图

由于理解不够多 以下来源gpt解释：

代码混淆是一种通过对源代码进行转换和优化的技术，目的是增加代码的复杂性，使其难以被理解和逆向工程。混淆可以帮助保护代码的知识产权，防止源代码被窃取、篡改或复制，提高代码的安全性。以下是一个简要的代码混淆的步骤和方法：

1. 基本概念：

   • 标识符重命名：通过将变量、函数和类的名称替换为无意义的字符或短名称，增加代码的复杂性和难以理解性。
   • 控制流混淆：通过改变代码的控制流程，如插入无用的代码、重排序代码块、添加条件语句等，增加代码的复杂度和逻辑性。

2. 使用工具：

   • JavaScript混淆器：例如 UglifyJS、Terser、Obfuscator等，它们可以对 JavaScript 代码进行压缩和混淆处理。
   • CSS和HTML压缩器：用于压缩和混淆CSS和HTML代码，例如 CSSNano、HTMLMinifier等。
   • 专用混淆工具：例如 Jscrambler、CodeMorph等，它们提供更高级的混淆技术和功能。

3. 混淆技术：

   • 标识符重命名：通过替换变量和函数的名称为随机生成的字符或短名称，增加代码的复杂性和难以理解性。
   • 字符串加密：将字符串转换为加密形式，需要时再解密，使得代码中的字符串难以被直接获取。
   • 控制流转换：通过重排序代码块、添加条件语句和无用代码等，改变代码的控制流程，增加代码的逻辑性和难以分析性。
   • 代码扁平化：将多个代码块合并为一个，减少函数和代码的层次结构，使代码更难以理解。
   • 反调试和防篡改：通过在代码中添加检测和反调试的代码，防止代码被调试和篡改。

4. 混淆策略：

   • 混淆优化：根据具体的代码特点和需求，选择合适的混淆技术和配置选项，以最大程度地增加代码的复杂性和难以分析性。
   • 混淆评估：对混淆后的代码进行测试和评估，确保混淆不影响代码的功能和性能，并且达到预期的安全性效果。
   • 混淆后处理：对混淆后的代码进行压缩、优化和验证，以确保代码的质量和