前端加解密 – 初探VIP解析网站-逐梦个人博客

还记得前些年，刚开始进入前端这个互联网这个行业的时候，随便点开一个网站，基本标配jQuery，而且代码也没有任何加密，随便看，有什么漏洞也是一目了然，但是近几年，越来越多的互联网人开始关注网络安全，不仅仅是针对服务端，客户端也开始研究各种压缩，混淆压缩，各种加密，总之是尽一切可能让那些扒代码的人看不懂网站的代码，以尽可能的避免安全问题或者避免别人拔取自己网站的资源，当然话说到底在前端谈不上安全，所做的所有一切只不过是增加门槛而已，从本文开始我们将分析一系列网站案例，来看一下那些提高门槛的方法在前端的应用。

这里我们将分析一系列的VIP解析网站，来看一下在他们的站点中前端加解密的应用，为什么选择这类网站呢？仔细分析就会发现在他们网站中充斥着各式各样提高扒代码或资源门槛的方法，很是值得分析，下面我们将从简单的开始一个个看他们的分析技巧。

作为本系列开篇文章，我们将分析一个稍微简单点的，目标站点：https://www.administratorw.com/index.php?url=，我们只需要在url参数中加入vip视频播放的链接即可解析完整版的播放链接，这种网站一般支持市面上基本所有的主流视频网站，比如iqiyi,优酷等等。实际的解析网站并不是这样子的，可能嵌套了n层iframe。

后面的讲解都将在Chrome浏览器中进行，没有的可以下载一个，Chrome真的很好用，就是很吃内存。

首先我们打开站点，并传入vip视频播放链接，https://www.administratorw.com/index.php?url=https://www.iqiyi.com/v_2ffkwswd6oo.html?vfrm=pcw_home&vfrmblk=L&vfrmrst=712211_dianyingbangbang_title1

打开后等一会儿我们就得得到一个网站的视频，而且清晰度也还不错，当然这不是重点，我们的重点是写一个爬虫可以解析任意vip视频的真实播放链接。

接下来我们先打开开发者工具，打开开发者工具的方法有两种一种是直接按快捷键F12或者Ctrl+Shift+I，但是这种方式有可能会被屏蔽，我们也可以按照下面的截图所示打开开发者工具

当开发者工具打开的一瞬间，你会发现有一个断点命中了，页面现在没办法操作，这是解析网站的防调试，而且是这类网站的标配，过掉这个很简单，我们只需要禁止断点执行，然后继续执行就不会再断点了，

记得按照图示顺序操作哦，然后我们切换到network选项卡，然后刷新页面，我么会看到看到很多的请求，

为了缩小范围，我们进一步选择network下的xhr tab，发现请求只剩几个了，

而其中有一个m3u8的请求就是我们需要获取的视频播放源地址，再继续往上就可以找到api.php这个接口，而视频播放源正是通过这个接口获取的，

我们看到该接口以post方式发送了7个参数：

url: https://www.iqiyi.com/v_2ffkwswd6oo.html?vfrm=pcw_home
referer: aHR0cHM6Ly93d3cuYWRtaW5pc3RyYXRvcnYuY29tL2lxaXlpL2luZGV4LnBocD91cmw9aHR0cHM6Ly93d3cuaXFpeWkuY29tL3ZfMmZma3dzd2Q2b28uaHRtbD92ZnJtPXBjd19ob21lJnZmcm1ibGs9TCZ2ZnJtcnN0PTcxMjIxMV9kaWFueWluZ2JhbmdiYW5nX3RpdGxlMQ==
ref: 0
time: 1595251830
type: 
other: aHR0cHM6Ly93d3cuaXFpeWkuY29tL3ZfMmZma3dzd2Q2b28uaHRtbD92ZnJtPXBjd19ob21lJnZmcm1ibGs9TCZ2ZnJtcnN0PTcxMjIxMV9kaWFueWluZ2JhbmdiYW5nX3RpdGxlMQ==
ios:

除了refer和other字段其他的都很好理解，明文的嘛，其实对于refer和other字段我们一看就应该知道这个是base64编码，而refer解密后是https://www.administratorv.com/iqiyi/index.php?url=https://www.iqiyi.com/v_2ffkwswd6oo.html?vfrm=pcw_home&vfrmblk=L&vfrmrst=712211_dianyingbangbang_title1也就是当前我们访问的地址，other解密后是https://www.iqiyi.com/v_2ffkwswd6oo.html?vfrm=pcw_home&vfrmblk=L&vfrmrst=712211_dianyingbangbang_title1，正是待解析的vip视频播放地址，但是还有一个问题需要验证的就是time字段是发起请求的时间还是服务端发放的用于校验请求合法性的，通过追踪请求发起的代码我们确认该字段是由服务端发起用于校验的，追踪代码的方法如下：

我们只需要将鼠标移到当前请求的initiator选项上即可看到发起该请求的js堆栈，我们排除掉jquery等库的调用找到真实发起的地方这里是那个比较长的，然后点进去，发现代码是压缩的，我们可以通过浏览器的展开功能来美化代码：

通过这段代码，我们可以发现time字段是不能通过客户端伪造的，需要先拿到这个值才能正常的调用接口，这里有两种选择：

一、所有的请求参数都从页面提取

二、只提取time字段，剩下的字段由客户端生成

这里选择第二种方式，我们用node来演示，先获取服务端发送的time字段。

function getTime(u) {
	return new Promise((resolve, reject) => {
		request({
			url: `https://www.administratorm.com/index.php?url=${u}`,
			headers: {
				Referer: `https://www.administratorm.com/index.php?url=${u}`
			}
		}, (err, response, body) => {
			if (err) {
				return reject(err);
			}

			const reg = /\'time\'\s*\:\s*\'(\d+)\'/;
			if (reg.test(body)) {
				return resolve(RegExp.$1);
			}
			reject();
		});
	});
}

在获取了time字段后我们就可以正常的发起请求了，我们先实现获取视频源的方法

function getVideoSource(u, time) {
	return new Promise((resolve, reject) => {
		const formData = {
			url: u,
			referer: Buffer.from(`https://www.administratorw.com/index.php?url=${u}`).toString('base64'),
			ref: 0,
			time,
			type: '',
			other: Buffer.from(u).toString('base64'),
			ios: ''
		};
		request({
			url: PARSE_API,
			method: 'POST',
			headers: {
				Referer: `https://www.administratorm.com/index.php?url=${u}`

			},
			formData
		}, (err, response, body) => {
			if (err) {
				return reject(err);
			}
			try {
				const ret = JSON.parse(body);
				if (ret.url) {
					return resolve(ret.url);
				}
				reject();
			} catch(e) {
				reject(e);
			}
		});
	});
}

然后发起请求，

getTime(url)
	.then(time => {
		getVideoSource(url, time)
			.then(url => {
				console.log('视频解析成功，播放源地址：%s', url)
			});
	})
	.catch(err => {
		console.log('视频解析失败！');
	});

文末小知识：

1、在浏览器中我们可以通过atob方法解密base64字符串，btoa方法来得到解密的base64字符串。

2、伪造请求时如果参数正确但是请求不通，可以尝试看改变headers中字段，比如增加Referer，userAgent，X-Requested-With。

3、如果接口服务端对IP有限制，通过伪造X-Forwarded-For有一定几率可以绕过该限制。

文末提供本文示例代码，请自行下载。

猛戳这里下载本文案例源码包