gulp + javascript-obfuscator 混淆代码

javascript-obfuscator 相关参考 

前端js代码多文件混淆_背负你的星辰的博客-CSDN博客_前端代码混淆前端js代码混淆对于前端开发中的代码安全性一直是一个不可忽视的问题，前段时间公司就要求我们把我们小程序端的代码再进行混淆。看了很多网址，说的不是很明白，因此也就出了这篇文章和大家分享。1：首先分享一下一个插件链接：https://github.com/javascript-obfuscator/javascript-obfuscator。我用的就是这个javascript-obfuscator插件，这个插件使用教程是对单个文件进行混淆加密。2：相对的插件工具链接：https://www.obfuschttps://blog.csdn.net/qq_40358970/article/details/112952264下面直接代码

// gulpfile.js 代码压缩 生成新的文件
var gulp = require('gulp');
minifyCss = require('gulp-minify-css');
minifyHtml = require('gulp-minify-html');
uglify = require('gulp-uglify');

var paths = {
  src: {
    dir: './gen',
    html: './gen/src/html/*.html',
    images: './gen/assets/*.{JPG,jpg,png,gif}',
    script: './gen/src/js/*.js',
    styles: './gen/src/css/*.css',
  },
  dev: {
    dir: './dev'
  }
}

function pressCss () {
  return gulp.src([paths.src.styles], { base: paths.src.dir })
    .pipe(minifyCss())
    .pipe(gulp.dest(paths.dev.dir))
    .on('end', function () {
    });
}

function pressHtml () {
  return gulp.src([paths.src.html], { base: paths.src.dir })
    .pipe(minifyHtml())
    .pipe(gulp.dest(paths.dev.dir))
    .on('end', function () {
    });
}

function pressImg () {
  return gulp.src(paths.src.images, { base: paths.src.dir })
    .pipe(gulp.dest(paths.dev.dir))
    .on('end', function () {
    });
}

function pressJs () {
  return gulp.src([paths.src.script,'./extension/background.js'], { base: paths.src.dir })
    .pipe(uglify())
    .pipe(gulp.dest(paths.dev.dir))
}

function pressJson () {
  return gulp.src(['./extension/manifest.json'], { base: paths.src.dir })
    .pipe(gulp.dest(paths.dev.dir))
}

gulp.task('build', gulp.series(
  gulp.parallel(
    pressHtml,
    pressCss,
    pressImg,
    pressJs,
    pressJson
  )
));

// package.json
{
  "scripts": {
    "build": "gulp build && node ./index.js"
  },
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-minify-css": "^1.2.4",
    "gulp-minify-html": "^1.0.6",
    "gulp-rev": "^9.0.0",
    "gulp-uglify": "^3.0.2"
  }
}

// index.json
{
	"compact": false,
	"controlFlowFlattening": true,
	"controlFlowFlatteningThreshold": 1,
	"numbersToExpressions": true,
	"simplify": true,
	"shuffleStringArray": true,
	"splitStrings": true,
	"stringArrayThreshold": 1
}

// index.js
// 检索的相对文件夹
const relativePath = './dev'
// 不需要混淆的js或文件夹
const exitFile = ['jquery-3.6.1.min.js']


var fs = require('fs')
var process = require('child_process');
var readDir = fs.readdirSync(relativePath);


// 需要存在的js
const czFile = []

var filePath = relativePath
var arr = new Array()
readFile(readDir, filePath)
// 读取相对路径下的所有文件
function readFile(readDir, filePath) {
	if (readDir.length > 0) {
		for (var i = 0; i < readDir.length; i++) {
			scannerFile(readDir[i], filePath)
		}
	}
}
// 扫描文件进行检索出js文件进行混淆
function scannerFile(file, filePath) {
	console.log("file-----" + file);
	var readdirpath = ""
	if (filePath == './') {
		readdirpath = filePath + file
	} else {
		readdirpath = filePath + "/" + file
	}
	if (exitFile.indexOf(file) < 0) {
		console.log('-->Start entering FS');
		fs.stat(readdirpath, (err, data) => {
			if (err) {
				console.log(err);
			} else {
				if (data.isDirectory()) {
					console.log('-->isDirectory:' + file);
					var readChildDir = fs.readdirSync(readdirpath);
					console.log(readChildDir);
					readFile(readChildDir, readdirpath)
				} else {
					console.log('-->isNotDirectory:' + file);
					if (file.indexOf('.js') >= 0 && file.indexOf('.json') < 0) {
						// 开始混淆代码
						console.log('-->Start confusing code:' + file);
						var cmd = ' javascript-obfuscator ' + readdirpath + ' --config index.json --output ' + readdirpath;
						process.exec(cmd, function(error, stdout, stderr) {
							console.log("error:" + error);
							console.log("stdout:" + stdout);
							console.log("stderr:" + stderr);
						});
						arr.push(readdirpath)
					} else {
						console.log('Non-folder - Non-js code :' + file);
					}
				}
			}
		})

	} else {
		console.log('-->skip------------');
	}
}

使用

1. 确保全局安装  npm install javascript-obfuscator -g

2. npm run build 生成 dev 文件就是混淆后的文件