如何使用babel混淆js代碼修改變量名與自定義函數

這篇文章主要介紹“如何使用babel混淆js代碼修改變量名與自定義函數名”，在日常操作中，相信很多人在如何使用babel混淆js代碼修改變量名與自定義函數名問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對大家解答”如何使用babel混淆js代碼修改變量名與自定義函數名”的疑惑有所幫助！接下來(lái)，請跟著(zhù)小編一起來(lái)學(xué)習吧！

原來(lái)的 js代碼:

// 全局變量
let name = 'someone';
// 自定義函數， 局部變量
function greet(name) {
	// 系統函數調用， 局部變量使用
	console.log('hello ' + name);
}
// 自定義函數調用， 全局變量使用
greet(name);

效果:

let _$5K = 'someone';

function _$h9(_$dU) {
  console.log('hello ' + _$dU);
}

_$h9(_$5K);

混淆代碼 - 替換變量

@babel/parser 生成的ast(抽象語(yǔ)法樹(shù))有一個(gè)屬性: scope(作用域)
scope.bindings 保存當前作用域下所有定義的變量
scope.bindings[變量名].referencePaths 記錄變量被引用的路徑(表達式...)

思路: 生成隨機字符串 作為新變量名, 替換scope.bindings, scope.bindings[].referencePaths

const parser = require('@babel/parser')
const traverse = require('@babel/traverse').default
const generator = require('@babel/generator')
const codeStr = require('./code.js') // 導入上面的js代碼

// 生成隨機字符串
function randomString(len) {
	len = len || 2;
	const chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
	// 變量名不能用數字開(kāi)頭， 加個(gè)前綴
	let s = '_$';
	for (let i = 0; i < len; i++) {
		s += chars.charAt(Math.floor(Math.random() * chars.length))
	}
	return s;
}
// 記錄已改過(guò)的作用域
let scopeRecord = {};
// 替換作用域內變量
function replaceScopeVarsName(path) {
	// 防止重復修改
	if (scopeRecord[path.scope.uid]) return;
	for (let i in path.scope.bindings) {
		let item = path.scope.bindings[i]
		// 變量名應該唯一， 這里用隨機字符湊合一下
		let newName = randomString()
		// 替換變量名
		item.identifier.name = newName
		// 替換引用
		item.referencePaths.forEach(function(refItem) {
			refItem.node.name = newName;
		})
	}
	scopeRecord[path.scope.uid] = true
}

let ast = parser.parse(codeStr) // 將代碼轉換成ast(抽象語(yǔ)法樹(shù))
// 遍歷修改ast
traverse(ast, {
	VariableDeclaration(path) {
		replaceScopeVarsName(path)
	},
	FunctionDeclaration(path){
		replaceScopeVarsName(path)
	}
})
let { code } = generator.default(ast) // 將ast轉換成代碼, 混淆后的代碼

待完成

1. 系統函數的替換 （如： console.log, Math etc..）

2. 控制流平坦化