有一个 Vue2 的组件项目,在webpack中使用 javascript-obfuscator 对打包文件进行加密输出;另一个项目,需要依赖该组件,引入加密后的打包输出文件,直接报错 Uncaught Error: Cannot find module "."
。而引入没有经过加密的打包输出文件,则可以正常使用。
版本信息:
webpack:4.14.0,
webpack-obfuscator: 2.6.0,
javascript-obfuscator: 3.2.7,
javascript-obfuscator 的配置不正确,在3.0.0的版本更新中配置项 ignoreRequireImports
更名为了 ignoreImports
;但是在 javascript-obfuscator 的 README 说明文档里面,写的仍然是 ignoreRequireImports
github上的问题链接:https://github.com/javascript-obfuscator/javascript-obfuscator/issues/1085
方案1(推荐):
开启ignoreImports
配置项
// webpack的配置文件内
const JavaScriptObfuscator = require('webpack-obfuscator');
module.exports = {
...
plugins: [
new JavaScriptObfuscator(
{
controlFlowFlattening: false,
deadCodeInjection: false,
ignoreImports: true, // 这里设置为true
stringArrayThreshold: 0.3,
},
[]
),
],
}
方案2:
另外单独使用 javascript-obfuscator 对webpack打包输出的文件进行加密,而不是使用webpack插件的方式进行。通过在打包输出文件的导出语句前插入 /* javascript-obfuscator:disable */
来禁用导出语句的加密混淆,代替使用ignoreImports
配置项。
ps:这是在不清楚配置项改名了的时候,使用的解决方案,放在这里记录一下
const fs = require('fs');
const exec = require('child-process-promise').exec;
// 主要加密函数,传入打包后需要加密的文件路径
function codeObfuscate(filePath) {
// 读文件
fs.readFile(filePath, 'utf8', function (err, data) {
if (err) throw err;
const reg = /[a-z](?=.exports=require)/g;
// 解决直接混淆后报错:Uncaught Error: Cannot find module "."
let content = data.replace(reg, '/* javascript-obfuscator:disable */ $&');
const reg2 = /(?<="use strict";)/g;
// 解决部分引用不混淆
content = content.replace(reg2, '$& /* javascript-obfuscator:enable */ ');
// 写文件
fs.writeFile(filePath, content, 'utf8', (err) => {
if (err) throw err;
// 进行混淆
const obfuscatePromise = exec(`javascript-obfuscator ${filePath} --output ${filePath}`)
.then(() => {
console.log("obfuscate success");
})
.catch((error) => {
console.error('obfuscate failure', error);
});
});
});
}