使用webpack-obfuscator举行代码肴杂及报错解决过程

目录

• 背景
• webpack-obfuscator 介绍
• 安装
• 参数剖析
• 设置示例
• 总结

背景

随着前端技术的发展，特殊是单页应用（SPA）的遍及，越来越多的应用逻辑和业务代码袒露在客户端浏览器中运行。

这使得应用代码容易被查察、复制甚至修改，从而可能引发安全问题或商业秘密泄露。

可以通过浏览器控制台查察页面源码, 如下图:

webpack-obfuscator 介绍

[code]webpack-obfuscator[/code] 是一个用于肴杂 [code]Webpack[/code] 打包后的 [code]JavaScript[/code] 代码的插件。它通过对代码举行肴杂处理，使原始代码变得难以阅读和明白，从而保护代码的知识产权和业务逻辑。

这种肴杂通常包罗变量重命名、字符串加密、控制流扁平化等技术手段。[code]webpack-obfuscator[/code] 可以在构建过程中对 [code]JavaScript[/code] 代码举行肴杂，使其在摆设到生产情况时更加安全。

安装

留意: 上面安装的版本对应的 webpack 4.47.0版本, 假如是 webpack 是低版本,对应的插件版本也要低落

参数剖析

肴杂选项 (options)

• [code]compact (boolean)[/code]: 是否压缩输出的代码，默认为 [code]true[/code]。
• [code]controlFlowFlattening (boolean)[/code]: 是否启用控制流扁平化，默认为 [code]false[/code]。
• [code]controlFlowFlatteningThreshold (number)[/code]: 控制流扁平化的阈值，默认为 0.75。
• [code]deadCodeInjection (boolean)[/code]: 是否注入死代码，默认为 [code]false[/code]。
• [code]deadCodeInjectionThreshold (number)[/code]: 死代码注入的阈值，默认为 0.4。
• [code]debugProtection (boolean)[/code]: 是否启用调试保护，默认为 false。
• [code]debugProtectionInterval (boolean)[/code]: 是否启用调试保护隔断，默认为 false。
• [code]domainLock (Array<string>)[/code]: 锁定指定的域名，默认为空数组。
• [code]identifierNamesGenerator (string)[/code]: 天生标识符名称的方式，默认为 [code]'mangled'[/code]。
• [code]log (boolean)[/code]: 是否记载肴杂过程，默认为 [code]false[/code]。
• [code]numbersToExpressions (boolean)[/code]: 是否将数字转换为表达式，默认为 [code]false[/code]。
• [code]renameGlobals (boolean)[/code]: 是否重命名全局变量，默认为 [code]false[/code]。
• [code]rotateStringArray (boolean)[/code]: 是否启用字符串数组旋转，默认为 [code]false[/code]。
• [code]selfDefending (boolean)[/code]: 是否启用自我防御，默认为 [code]false[/code]。
• [code]simplify (boolean)[/code]: 是否简化输出代码，默认为 [code]true[/code]。
• [code]sourceMap (boolean | string)[/code]: 是否天生源映射，默认为 [code]false[/code]。
• [code]sourceMapMode (string)[/code]: 源映射模式，默认为 [code]'separate'[/code]。
• [code]splitStrings (boolean)[/code]: 是否将字符串分割成多个较小的字符串，默认为 [code]false[/code]。
• [code]stringArrayEncoding (Array<string>)[/code]: 字符串数组编码方式，默认为空数组。
• [code]stringArrayEncodingThreshold (number)[/code]: 字符串数组编码的阈值，默认为 0.75。
• [code]stringArrayThreshold (number)[/code]: 字符串数组阈值，默认为 0.75。
• [code]stringArrayWrappersCount (number)[/code]: 字符串数组包装器的数量，默认为 2。
• [code]stringArrayWrappersChainedCalls (number)[/code]: 字符串数组包装器链式调用的数量，默认为 2。
• [code]stringArrayWrappersParametersMaxCount (number)[/code]: 字符串数组包装器参数的最大数量，默认为 2。
• [code]stringArrayWrappersParametersMinCount (number)[/code]: 字符串数组包装器参数的最小数量，默认为 1。
• [code]stringArrayWrappersType (string)[/code]: 字符串数组包装器的范例，默认为 ‘variable’。
• [code]stringArrayWrappersVarNames (Array<string>)[/code]: 字符串数组包装器变量名称，默认为空数组。
• [code]stringArrayIndexShift (boolean)[/code]: 是否对字符串数组索引举行偏移，默认为 [code]false[/code]。
• [code]shuffleStringArray (boolean)[/code]: 是否打乱字符串数组，默认为 [code]false[/code]。
• [code]transformObjectKeys (boolean)[/code]: 是否转换对象键，默认为 [code]false[/code]。
• [code]transformObjectKeysBlackList (Array<string>)[/code]: 不转换的对象键黑名单，默认为空数组。
• [code]transformObjectKeysRecursive (boolean)[/code]: 是否递归转换对象键，默认为 [code]false[/code]。
• [code]transformObjectKeysWhitelist (Array<string>)[/code]: 转换的对象键白名单，默认为空数组。
• [code]unicodeEscapeSequence (boolean)[/code]: 是否使用 Unicode 逃逸序列，默认为 [code]false[/code]。
• [code]useStrictSemicolons (boolean)[/code]: 是否使用严格的分号，默认为 [code]false[/code]。
• [code]wrapCode (boolean)[/code]: 是否包裹代码，默认为 [code]false[/code]。
• [code]wrapComments (boolean)[/code]: 是否包裹解释，默认为 [code]false[/code]。

清除选项 (exclude)

• [code]exclude (Array<string> | RegExp)[/code]: 清除不需要肴杂的模块或文件。

请留意，上述设置示例包含了所有可用的参数，但在实际项目中，你可能只需要设置此中的一部门。

猛烈建议根据项目需求调解这些选项，以达到最佳的肴杂效果并保持代码的可维护性和性能。

设置示例

接下来，在你的 webpack.config.js 文件中设置 webpack-obfuscator 插件。

以下是一个简单的示例设置：

代码肴杂后

上述报错阐明项目的 [code]webpack[/code] 版本对应的 [code]webpack-obfuscator[/code] 和 [code]javascript-obfuscator[/code] 版本过低导致报错

上述报错阐明项目的 [code]webpack[/code] 版本对应的 [code]webpack-obfuscator[/code] 和 [code]javascript-obfuscator[/code] 版本过高导致报错

查察 [code]webpack[/code] 对应 [code]webpack-obfuscator[/code] 版本可以去 git 官网的 [code]tags[/code] 的 [code]package.json[/code] 上举行详细查察

git 官网: https://github.com/javascript-obfuscator/webpack-obfuscator/tags

解决方法:

修改 configureWebpack 设置, 将[code]configureWebpack[/code]的对象模式改成函数形式

设置如下:

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。