如何保护前端JS代码？前端js代码混淆加密

可以使用加密工具VirboxProtector对js代码做加密保护。

最近尝试了VirboxProtector的js代码保护，加密前后效果很明显。

加密前js代码：

/* 标签切换 */
	/*
		tabclass  ： 标签切换的总容器的class
		tab_title ： 标签容器的class
		tab_body  ： 标签内容容器的class
		tab_list  ： 标签实体的class
	*/

function myTab(tabclass){
	var tab_title = $(tabclass).find(".tab-title");
	var tab_body = $(tabclass).find(".tab-body");
	var tab_listIndex = 0;
	var _this = this;
	_this.tabclass = tabclass;
	tab_title.find(".tab-btn").hover(function(){
		tab_listIndex =$(this).index();
		$(this).addClass("active").siblings().removeClass("active");
		tab_body.find(".tab-list").eq(tab_listIndex).show().siblings().hide();
	});
}
$(function(){
	//tab切换
	myTab(".tab-index-product");
	myTab(".tab-index-intro");
	myTab(".tab-advantage");

	// 页面动画
    new WOW().init();
})

加密后效果：

function _EndeYA1l() {
	const _ss_14d4679 = [
		[207, 232, 227, 107, 35, 140],
		[253, 74, 147, 85, 152, 100, 79, 36, 112, 185, 106],
		[88, 67, 87, 179, 67, 246, 39, 234, 133, 247, 20, 32, 37, 1, 215, 196, 134, 82, 42, 146, 180, 181, 196],
		[42, 139, 104, 58, 49],
		[237, 110, 32, 80, 88, 104, 169],
		[140, 55, 2, 212, 109, 137],
		[196, 67, 65, 16],
		[99, 252, 93, 185],
		[205, 7, 199, 241],
		[35, 146, 22, 107, 30, 177],
		[137, 1, 146, 175, 56, 171, 142, 6, 143, 19, 93],
		[96, 248, 117, 231],
		[30, 229, 69, 62, 34, 182, 204, 122, 253, 74],
		[87, 213, 149, 29, 170, 129, 232, 56, 245],
		[162, 255, 209, 104, 107, 54, 4, 201],
		[245, 111, 124, 210, 202, 235, 91, 49],
		[41, 120, 137, 243, 221],
		[66, 105, 240, 254, 177],
		[171, 210, 6, 149, 187, 195, 220, 9],
		[116, 203, 1, 41, 103, 34],
		[227, 103, 131, 132, 106, 205, 191, 91],
		[91, 158, 163, 173, 28, 215, 58, 132, 50, 36, 112],
		[139, 233, 115, 58, 15, 173, 67, 8, 200],
		[104, 196],
		[48, 174, 76, 93],
		[118, 127, 155, 28],
		[99, 180, 98, 206, 107, 22, 222, 204, 181, 196, 13, 238, 101, 175, 151, 52, 113, 215],
		[99, 22, 69, 79, 50, 129, 5, 199, 199, 86, 219, 208, 191, 106, 122, 104],
		[75, 51, 140, 195, 56, 29, 234, 218, 12, 175, 18, 15, 59, 64],
		[103, 101, 176, 192]
	];
	_EndeYA1l = function() {
		return _ss_14d4679;
	};
	return _EndeYA1l();
};

function _zfa2iDSm(_ss_4a7b2ab, _ss_1e50ca75) {
	let _ss_73 = [],
		j = 0,
		x, output = '';
	let _ss_69;
	for (_ss_69 = 0; _ss_69 < 256; _ss_69++) {
		_ss_73[_ss_69] = _ss_69;
	}
	for (_ss_69 = 0; _ss_69 < 256; _ss_69++) {
		j = (j + _ss_73[_ss_69] + _ss_1e50ca75['charCodeAt'](_ss_69 % _ss_1e50ca75['length'])) % 256;
		x = _ss_73[_ss_69];
		_ss_73[_ss_69] = _ss_73[j];
		_ss_73[j] = x;
	}
	_ss_69 = 0;
	j = 0;
	for (let _ss_79 = 0; _ss_79 < _ss_4a7b2ab['length']; _ss_79++) {
		_ss_69 = (_ss_69 + 1) % 256;
		j = (j + _ss_73[_ss_69]) % 256;
		x = _ss_73[_ss_69];
		_ss_73[_ss_69] = _ss_73[j];
		_ss_73[j] = x;
		output += String['fromCharCode'](_ss_4a7b2ab[_ss_79] ^ _ss_73[(_ss_73[_ss_69] + _ss_73[j]) % 256]);
	}
	return output;
};

function _Rv16V8I5(_ss_7a3677d6, _ss_1e50ca75) {
	const _ss_12acf3e0 = _EndeYA1l();
	_Rv16V8I5 = function(_ss_6897265a, _ss_7f716f40) {
		_ss_6897265a = _ss_6897265a - 0x6A;
		let _ss_23d6db7 = _ss_12acf3e0[_ss_6897265a];
		_ss_23d6db7 = _zfa2iDSm(_ss_23d6db7, _ss_7f716f40);
		return decodeURIComponent(_ss_23d6db7);
	};
	return _Rv16V8I5(_ss_7a3677d6, _ss_1e50ca75);
};

function _01Lz0QYw(_ss_1e3417e2) {
	function _Oz60UJoK(_ss_2a67be5f) {
		if (typeof _ss_2a67be5f === _Rv16V8I5(106, 'oyOS')) {
			return (function(_ss_1e789ef5) {} [_Rv16V8I5(107, 'BUQQ')](_Rv16V8I5(108, 'JzUl'))[_Rv16V8I5(109, '5LiW')](
				_Rv16V8I5(110, 'WMib')));
		} else {
			if (('' + _ss_2a67be5f / _ss_2a67be5f)[_Rv16V8I5(111, 'hRmA')] !== 1 || _ss_2a67be5f % 20 === 0) {
				(function() {
					return true;
				} [_Rv16V8I5(107, 'BUQQ')](_Rv16V8I5(112, 'o62L') + _Rv16V8I5(113, 'VfPa'))[_Rv16V8I5(114, 'Xd8U')](
					_Rv16V8I5(115, 'Z3wK')));
			} else {
				(function() {
					return false;
				} [_Rv16V8I5(107, 'BUQQ')](_Rv16V8I5(112, 'o62L') + _Rv16V8I5(113, 'VfPa'))[_Rv16V8I5(109, '5LiW')](
					_Rv16V8I5(116, 'rWYn')));
			}
		}
		_Oz60UJoK(++_ss_2a67be5f);
	}
	try {
		if (_ss_1e3417e2) {
			return _Oz60UJoK;
		} else {
			_Oz60UJoK(0);
		}
	} catch (y) {}
};
_01Lz0QYw(0);

function myTab(_ss_3283865) {
	var _ss_76145765 = $(_ss_3283865)[_Rv16V8I5(117, '18vP')](_Rv16V8I5(118, 'onzQ'));
	var _ss_5ff55a43 = $(_ss_3283865)[_Rv16V8I5(117, '18vP')](_Rv16V8I5(119, 'pOgg'));
	var _ss_3aa035a4 = 0;
	var _ss_2d952f5 = this;
	_ss_2d952f5[_Rv16V8I5(120, 'EIbO')] = _ss_3283865;
	_ss_76145765[_Rv16V8I5(117, '18vP')](_Rv16V8I5(121, 'xLYJ'))[_Rv16V8I5(122, '8qSd')](function() {
		_ss_3aa035a4 = $(this)[_Rv16V8I5(123, 'jX7L')]();
		$(this)[_Rv16V8I5(124, 'gNsl')](_Rv16V8I5(125, 'n0x8'))[_Rv16V8I5(126, 'IgIp')]()[_Rv16V8I5(127,
			'ONoP')](_Rv16V8I5(125, 'n0x8'));
		_ss_5ff55a43[_Rv16V8I5(117, '18vP')](_Rv16V8I5(128, 'EjR1'))[_Rv16V8I5(129, '3Loz')](_ss_3aa035a4)[
			_Rv16V8I5(130, 'Gl5B')]()[_Rv16V8I5(126, 'IgIp')]()[_Rv16V8I5(131, 'kpq9')]();
	});
}
$(function() {
	myTab(_Rv16V8I5(132, 'WBTY'));
	myTab(_Rv16V8I5(133, 'FoII'));
	myTab(_Rv16V8I5(134, 'oYjZ'));
	new WOW()[_Rv16V8I5(135, 'Ybz9')]();
})

使用体验

将js文件放在一个文件夹里，然后将文件夹拖入到加密工具里，然后点击保护按钮即可。

 这个工具目前支持的平台也比较多，可以适用于安卓、iOS、小程序、快应用、Web页面等多种H5代码运行环境。如果想试用可以搜索 VirboxProtector就可以去申请试用。

Virbox Protector 功能特点

代码混淆

通过控制流混淆、字符串转换加密、变量名混淆、隐藏函数调用等多种加密方法增加代码安全，防止被反编译

反调试

反调试功能可以防止代码被动态调试

高兼容性

支持安卓、iOS、小程序、快应用、Web页面等多种H5代码运行环境。

操作便捷

提供本地加固工具及命令行保护方式，一键加固，高效易用

申请试用：H5应用加固-VirboxProtectorVBP支持H5应用加固，通过控制流混淆、字符串转换加密、反调试功能等方式，对js文件进行保护，防止H5程序被反编译及动态调试。适用于安卓、iOS、小程序、快应用、Web页面等多种H5代码运行环境。https://shell.virbox.com/h5protect.html