Vue 混淆最佳实践

Question

你好，开发社区。\nI\xc2\xb4m 尝试使用 ( https://github.com/javascript-obfuscator/webpack-obfuscator ) webpack-obfuscator来混淆 Vue 应用程序

\n

vue.config.js

\n

configureWebpack: {\n    plugins: [\n      new JavaScriptObfuscator({})\n    ],\n

\n

但 chrome 控制台输出显示很多\xc2\xb4s 错误，并且应用程序损坏（根本不\xc2\xb4t 甚至显示登陆页面）

\n

\n

我\xc2\xb4ve也尝试过（https://github.com/javascript-obfuscator/obfuscator-loader）使用以下构建配置->

\n

vue.config.js

\n

const obfuscatorOptions = {\n  compact: true,\n  controlFlowFlattening: false,\n  controlFlowFlatteningThreshold: 0.75,\n  deadCodeInjection: true,\n  deadCodeInjectionThreshold: 0.4,\n  debugProtection: true,\n  debugProtectionInterval: true,\n  disableConsoleOutput: true,\n  domainLock: [],\n  identifierNamesGenerator: \'hexadecimal\',\n  identifiersPrefix: \'\',\n  inputFileName: \'\',\n  log: false,\n  renameGlobals: true,\n  reservedNames: [],\n  reservedStrings: [],\n  rotateStringArray: true,\n  seed: 0,\n  selfDefending: true,\n  sourceMap: false,\n  sourceMapBaseUrl: \'\',\n  sourceMapFileName: \'\',\n  sourceMapMode: \'separate\',\n  stringArray: true,\n  stringArrayEncoding: true,\n  stringArrayThreshold: 0.75,\n  target: \'browser\',\n  transformObjectKeys: true,\n  unicodeEscapeSequence: false\n}\n\nmodule: {\n      rules: [\n        {\n          test: /\\.js$/,\n          include: [ path.resolve(__dirname, "./src") ],\n          enforce: \'post\',\n          use: { loader: \'obfuscator-loader\', options: obfuscatorOptions }\n        },\n      ]\n    }\n

\n

但控制台打印出以下错误

\n

Uncaught Error: Module build failed (from ./node_modules/obfuscator-loader/lib/index.js):\nError: Cannot apply @injectable decorator multiple times.\n    at E:\\downloads\\whats-app-sender-dashboard\\coreui-free-vue-admin-template-master\\node_modules\\inversify\\lib\\annotation\\injectable.js:8:19\n    at DecorateConstructor (E:\\downloads\\whats-app-sender-dashboard\\coreui-free-vue-admin-template-master\\node_modules\\reflect-metadata\\Reflect.ts:1202:35)\n    at Object.decorate (E:\\downloads\\whats-app-sender-dashboard\\coreui-free-vue-admin-template-master\\node_modules\\reflect-metadata\\Reflect.ts:742:24)\n    at _decorate (E:\\downloads\\whats-app-sender-dashboard\\coreui-free-vue-admin-template-master\\node_modules\\inversify\\lib\\annotation\\decorator_utils.js:42:13)\n    at Object.decorate (E:\\downloads\\whats-app-sender-dashboard\\coreui-free-vue-admin-template-master\\node_modules\\inversify\\lib\\annotation\\decorator_utils.js:55:9)\n    at Object.<anonymous> (E:\\downloads\\whats-app-sender-dashboard\\coreui-free-vue-admin-template-master\\node_modules\\javascript-obfuscator\\dist\\webpack:\\JavaScriptObfuscator\\src\\event-emitters\\ObfuscationEventEmitter.ts:7:9)\n    at r (E:\\downloads\\whats-app-sender-dashboard\\coreui-free-vue-admin-template-master\\node_modules\\javascript-obfuscator\\dist\\webpack:\\JavaScriptObfuscator\\webpack\\bootstrap:22:1)\n    at Object.<anonymous> (E:\\downloads\\whats-app-sender-dashboard\\coreui-free-vue-admin-template-master\\node_modules\\javascript-obfuscator\\dist\\webpack:\\JavaScriptObfuscator\\src\\container\\InversifyContainerFacade.ts:30:1)\n    at r (E:\\downloads\\whats-app-sender-dashboard\\coreui-free-vue-admin-template-master\\node_modules\\javascript-obfuscator\\dist\\webpack:\\JavaScriptObfuscator\\webpack\\bootstrap:22:1)\n    at Object.<anonymous> (E:\\downloads\\whats-app-sender-dashboard\\coreui-free-vue-admin-template-master\\node_modules\\javascript-obfuscator\\dist\\webpack:\\JavaScriptObfuscator\\src\\JavaScriptObfuscatorFacade.ts:11:1)\n    at r (E:\\downloads\\whats-app-sender-dashboard\\coreui-free-vue-admin-template-master\\node_modules\\javascript-obfuscator\\dist\\webpack:\\JavaScriptObfuscator\\webpack\\bootstrap:22:1)\n    at Object.<anonymous> (E:\\downloads\\whats-app-sender-dashboard\\coreui-free-vue-admin-template-master\\node_modules\\javascript-obfuscator\\dist\\webpack:\\JavaScriptObfuscator\\index.ts:3:1)\n    at r (E:\\downloads\\whats-app-sender-dashboard\\coreui-free-vue-admin-template-master\\node_modules\\javascript-obfuscator\\dist\\webpack:\\JavaScriptObfuscator\\webpack\\bootstrap:22:1)\n    at E:\\downloads\\whats-app-sender-dashboard\\coreui-free-vue-admin-template-master\\node_modules\\javascript-obfuscator\\dist\\webpack:\\JavaScriptObfuscator\\webpack\\bootstrap:74:1\n    at Object.<anonymous> (E:\\downloads\\whats-app-sender-dashboard\\coreui-free-vue-admin-template-master\\node_modules\\javascript-obfuscator\\dist\\webpack:\\JavaScriptObfuscator\\webpack\\bootstrap:74:1)\n    at Module._compile (internal/modules/cjs/loader.js:774:30)\n    at eval (webpack-internal:///./src/main.js:1:7)\n    at Object../src/main.js (http://127.0.0.1:8080/app.js:1197:1)\n    at __webpack_require__ (http://127.0.0.1:8080/app.js:724:30)\n    at fn (http://127.0.0.1:8080/app.js:101:20)\n    at Object.1 (http://127.0.0.1:8080/app.js:1211:18)\n    at __webpack_require__ (http://127.0.0.1:8080/app.js:724:30)\n    at http://127.0.0.1:8080/app.js:791:37\n    at http://127.0.0.1:8080/app.js:794:10\n

\n

\n那么，如何成功混淆 vue 应用程序呢？

\n

Answer 1

更新

\n

I\xc2\xb4m 当前使用以下设置，以达到使用 TerserPlugin 从 vue 应用程序的构建过程中丑化 js 代码的预期结果

\n

vue.config.js 文件

\n

const TerserPlugin = require(\'terser-webpack-plugin\')\n

\n

\n

结果是相当好的混淆代码：

\n

\n

然而，它\xc2\xb4s仍然可以看到Vue应用程序实例的选项

\n