写在前面
很早之前在吾爱破解论坛上看见了【猿人学】Web端爬虫攻防大赛,当时进入他们官网的时候,比赛已经结束了。看着那些题目还挺有意思的,但由于各种原因一直没有机会去做那些题目。最近比较闲,就去把猿人学官网打开看了一下,尝试着完成了第一道题目---JS混淆[源码乱码],当然我也去看了两位大佬的讲解,一位是吾爱论坛的漁滒,另一位是B站的暗螟蛉
由于这是一篇迟到的教程,所有我写比较详细,希望对大家有所帮助
文章原链接https://syjun.vip/archives/278.html
题目
抓取所有(5页)机票的价格,并计算所有机票价格的平均值,填入答案。
题目看着挺简单,就是抓取机票的价格,并算出平均值,但是当我们打开开发者调试工具的时候,就会遇到第一个坑
关闭断点
当我们打开调试工具的时候,会弹出这么一个页面
这是一个debug断点,会阻拦我们后面的操作,但是并没有什么关系,很简单就能把它关闭
查看数据来源
接着,我们点击【Network】,按ctrl+f5刷新网页,又会出现阻拦的操作,我们依然点击刚才箭头符号,就可以解决
接着,我们回到【Network】,点击【XHR】,就会发现多了一条信息
至于,为什么要去点击【XHR】而不是点击其他的地方;其实也很简单,你稍微去检测一下这个网页,就会发现,机票的价格是通过XHR请求获取到的
有些小伙伴可能就要问了,什么是XHR请求,你可以去这篇文章看看XHR 请求
回过头来,我们来看看多出来的那条信息
查看这条信息的Header,发现它的URL很有意思,特别是画蓝色下划线的地方,这里我们先不管,我们接着看一下Preview
这就更有意思了,如我们所预料的,机票的价格都包含在这里面
分析URL
链接和数据都找了,我们去访问一下刚刚的链接(间隔了一段时间),理所当然的报错了
{"error": "token failed"}
我们看一下这条链接
> http://match.yuanrenxue.com/api/match/1?m=f289e3140053a9320c137b67e8723ba3%E4%B8%A81608971657
经常写爬虫的同学就会发现,后面的数字串【1608971657】,一定是一个时间戳
也就是说,要想正常的访问这条链接拿到数据,一定要有正常的时间戳
那么,何为正常的时间戳,一定和前面的字符串有关(m=f289e3140053a9320c137b67e8723ba3%E4%B8%A8)
我们继续刷新页面,发现【m=...】里面的字符串随着时间的推移都在进行变化,唯独[%E4%B8%A8]没变
[%E4%B8%A8],这个我想大家只要用过百度搜索就应该很熟悉吧,它是经过UrlEncode处理得到的,我们只需要反解码就能知道[%E4%B8%A8]到达是个什么东东
我们来到,站长工具,将它进行解码
很容易的,我们得到了它的值------> 丨 (没错就是这么一个中文符号)
寻找丨符号
根据题目的提示[js混淆 源码乱码],我们可以想到一个很清晰的思路,就是去源码当中查找 丨
回到页面,点击鼠标右键,点击[查看网页源代码]
按crtl+F ,搜索丨 符号,会找到唯一的一处代码
仔细地查看代码,发现它是写在script标签里面的
我们将整个script标签复制下来,到notepad++里面打开
<script>window.url='/api/match/1';request=function(){var timestamp=Date.parse(new Date()) + 100000000;var m=oo0O0(timestamp.toString())+window.f;var list={"page":window.page,"m":m+'丨'+timestamp/1000};$.ajax({url:window.url,dataType:"json",async:false,data:list,type:"GET",beforeSend:function(request){},success:function(data){data=data.data;let html='';let us_sign=`<div class="b-airfly"><div class="e-airfly"data-reactid=".1.3.3.2.0.$KN5911.0"><div class="col-trip"data-reactid=".1.3.3.2.0.$KN5911.0.0"><div class="s-trip"data-reactid=".1.3.3.2.0.$KN5911.0.0.0"><div class="col-airline"data-reactid=".1.3.3.2.0.$KN5911.0.0.0.0"><div class="d-air"data-reactid=".1.3.3.2.0.$KN5911.0.0.0.0.0:$0"><div class="air"data-reactid=".1.3.3.2.0.$KN5911.0.0.0.0.0:$0.0"><span data-reactid=".1.3.3.2.0.$KN5911.0.0.0.0.0:$0.0.1">中国联合航空</span></div><div class="num"data-reactid=".1.3.3.2.0.$KN5911.0.0.0.0.0:$0.1"><span class="n"data-reactid=".1.3.3.2.0.$KN5911.0.0.0.0.0:$0.1.0">KN5911</span><span class="n"data-reactid=".1.3.3.2.0.$KN5911.0.0.0.0.0:$0.1.1">波音737(中)</span><noscript data-reactid=".1.3.3.2.0.$KN5911.0.0.0.0.0:$0.1.2"></noscript></div></div><noscript data-reactid=".1.3.3.2.0.$KN5911.0.0.0.0.1"></noscript></div><div class="col-time"data-reactid=".1.3.3.2.0.$KN5911.0.0.0.1"><div class="sep-lf"data-reactid=".1.3.3.2.0.$KN5911.0.0.0.1.0"><h2 data-reactid=".1.3.3.2.0.$KN5911.0.0.0.1.0.0">13:50</h2><p class="airport"data-reactid=".1.3.3.2.0.$KN5911.0.0.0.1.0.1"><span data-reactid=".1.3.3.2.0.$KN5911.0.0.0.1.0.1.0">大兴国际机场</span><span data-reactid=".1.3.3.2.0.$KN5911.0.0.0.1.0.1.1"></span></p></div><div class="sep-ct"data-reactid=".1.3.3.2.0.$KN5911.0.0.0.1.1"><div class="range"data-reactid=".1.3.3.2.0.$KN5911.0.0.0.1.1.0">3小时40分钟</div><div class="line"data-reactid=".1.3.3.2.0.$KN5911.0.0.0.1.1.1"></div></div><div class="sep-rt"data-reactid=".1.3.3.2.0.$KN5911.0.0.0.1.2"><noscript data-reactid=".1.3.3.2.0.$KN5911.0.0.0.1.2.0"></noscript><h2 data-reactid=".1.3.3.2.0.$KN5911.0.0.0.1.2.1">17:30</h2><p class="airport"data-reactid=".1.3.3.2.0.$KN5911.0.0.0.1.2.2"><span data-reactid=".1.3.3.2.0.$KN5911.0.0.0.1.2.2.0">宝安机场</span></p></div><noscript data-reactid=".1.3.3.2.0.$KN5911.0.0.0.1.3"></noscript></div></div></div><div class="col-price"data-reactid=".1.3.3.2.0.$KN5911.0.1"><p class="prc"data-reactid=".1.3.3.2.0.$KN5911.0.1.0"><span data-reactid=".1.3.3.2.0.$KN5911.0.1.0.0"><i class="rmb"data-reactid=".1.3.3.2.0.$KN5911.0.1.0.0.0">¥</i><span class="fix_price"data-reactid=".1.3.3.2.0.$KN5911.0.1.0.0.1"><span class="prc_wp"style="width:48px">price_sole</span></span></span></p><div class="vim"data-reactid=".1.3.3.2.0.$KN5911.0.1.1"><span class="v dis"data-reactid=".1.3.3.2.0.$KN5911.0.1.1.$0"></span></div></div><div class="col-fold"data-reactid=".1.3.3.2.0.$KN5911.0.2"><p class="fd"data-reactid=".1.3.3.2.0.$KN5911.0.2.0">收起</p></div></div><noscript data-reactid=".1.3.3.2.0.$KN5911.1"></noscript></div>`;let choice=['中国南方航空','吉祥航空','奥凯航空','九元航空','长龙航空','东方航空','中国国际航空','深圳航空','海南航空','春秋航空','上海航空','西部航空','重庆航空','西藏航空','中国联合航空','云南祥鹏航空','云南英安航空','厦门航空','天津航空','山东航空','四川航空','华夏航空','长城航空','成都航空有','北京首都航空','中华航空','意大利国家航空公司','印度百捷航空','越南航空','远东航空','印度航空公司','印度捷特航空有限公司','以色列航空公司','意大利航空','伊朗航空公司','印度尼西亚鹰航空公司','英国航空公司','西方天空航空','西捷航空','西班牙欧洲航空公司','西班牙航空公司','中国南方航空','吉祥航空','奥凯航空','九元航空','长龙航空','东方航空','中国国际航空','深圳航空','海南航空','春秋航空','上海航空','西部航空','重庆航空','西藏航空','中国联合航空','云南祥鹏航空','云南英安航空','厦门航空','天津航空','山东航空','四川航空','华夏航空','长城航空','成都航空有','北京首都航空','中华航空','意大利国家航空公司','印度百捷航空','越南航空','远东航空','印度航空公司','印度捷特航空有限公司','以色列航空公司','意大利航空','伊朗航空公司','印度尼西亚鹰航空公司','英国航空公司','西方天空航空','西捷航空','西班牙欧洲航空公司','西班牙航空公司'];let op=1; let jic=['北京首都国际机场','上海虹桥国际机场','上海浦东国际机场','天津滨海国际机场','太原武宿机场','呼和浩特白塔机场','沈阳桃仙国际机场','大连周水子国际机场','长春大房身机场','哈尔滨阎家岗国际机场','齐齐哈尔三家子机场','佳木斯东郊机场','厦门高崎国际机场','福州长乐国际机场','杭州萧山国际机场','合肥骆岗机场','宁波栎社机场','南京禄口国际机场','广州白云国际机场','深圳宝安国际机场','长沙黄花机场','海口美亚机场','武汉天河机场','济南遥墙机场','青岛流亭机场','南宁吴墟机场','三亚凤凰国际机场','重庆江北国际机场','成都双流国际机场','昆明巫家坝国际机场','昆明长水国际机场','桂林两江国际机场','西安咸阳国际机场','兰州中川机场','贵阳龙洞堡机场','拉萨贡嘎机场','乌鲁木齐地窝堡机场','南昌向塘机场','郑州新郑机场','北京首都国际机场','上海虹桥国际机场','上海浦东国际机场','天津滨海国际机场','太原武宿机场','呼和浩特白塔机场','沈阳桃仙国际机场','大连周水子国际机场','长春大房身机场','哈尔滨阎家岗国际机场','齐齐哈尔三家子机场','佳木斯东郊机场','厦门高崎国际机场','福州长乐国际机场','杭州萧山国际机场','合肥骆岗机场','宁波栎社机场','南京禄口国际机场','广州白云国际机场','深圳宝安国际机场','长沙黄花机场','海口美亚机场','武汉天河机场','济南遥墙机场','青岛流亭机场','南宁吴墟机场','三亚凤凰国际机场','重庆江北国际机场','成都双流国际机场','昆明巫家坝国际机场','昆明长水国际机场','桂林两江国际机场','西安咸阳国际机场','兰州中川机场','贵阳龙洞堡机场','拉萨贡嘎机场','乌鲁木齐地窝堡机场','南昌向塘机场','郑州新郑机场'];if(window.page){}else{window.page=1}$.each(data,function(index,val){html+=us_sign.replace('price_sole',val.value).replace('中国联合航空',choice[op*window.page]).replace('大兴国际',jic[parseInt(op*window.page/2)+1]).replace('宝安机场',jic[jic.length-parseInt(op*window.page/2)-1]);op+=1});$('.m-airfly-lst').text('').append(html)},complete:function(){},error:function(){alert('数据拉取失败。可能是触发了风控系统,若您是正常访问,请使用谷歌浏览器无痕模式,并且校准电脑的系统时间重新尝试');alert('生而为虫,我很抱歉,请刷新页面,查看问题是否存在');$('.page-message').eq(0).addClass('active');$('.page-message').removeClass('active')}})};request()</script>
粘贴到notepad++,你会发现全部的代码都浓缩成一行了
不要慌,我们可以使用notepad++自带的插件JSTool里面的JSFormat,即可将JS的代码格式化,得到如下结果
(如果没有JSTool插件,可以在notepad++里面安装一下)
ajax里面的内容可以不用管,我们删除多余的代码,可以得到简化后的代码
<script>
request = function () {
var timestamp = Date.parse(new Date()) + 100000000;
var m = oo0O0(timestamp.toString()) + window.f;
var list = {
"page": window.page,
"m": m + '丨' + timestamp / 1000
};
};
request()
</script>
var list 里面的内容,也可以不用管,这里面主要就是包含页码,和m值,于是我们可以再次精简
var timestamp = Date.parse(new Date()) + 100000000;
var m = oo0O0(timestamp.toString()) + window.f;
这里的变量m,是不是很熟悉,我们再来看一下之前的链接
> http://match.yuanrenxue.com/api/match/1?m=f289e3140053a9320c137b67e8723ba3%E4%B8%A81608971657
大胆的猜测一下,m后面的值肯定是通过这里的代码实现的
我们先来看一下var m 后面的内容
- oo0O0(),肯定是一个函数
- timestamp.toString(),有一点编程基础的同学应该能猜到,这是将时间戳的一串数字转化成字符串类型
- window.f,窗口这个对象调用了f,至于f是什么东东,我们先不管
很显然,我们又有了一个新的突破口,oo0O0()函数
分析oo0O0()函数
我们回到包含网页源码的页面,搜索[oo0O0]
会找到两处代码,一处肯定是定义此函数的代码,而另一处就是调用函数的代码
我们将定义此函数的代码复制下来
function oo0O0(mw) {
window.b = '';
for (var i = 0, len = window.a.length; i < len; i++) {
console.log(window.a[i]);
window.b += String[document.e + document.g](window.a[i][document.f + document.h]() - i - window.c)
}
var U = ['W5r5W6VdIHZcT8kU', 'WQ8CWRaxWQirAW=='];
var J = function (o, E) {
o = o - 0x0;
var N = U[o];
if (J['bSSGte'] === undefined) {
var Y = function (w) {
var m = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=',
T = String(w)['replace'](/=+$/, '');
var A = '';
for (var C = 0x0, b, W, l = 0x0; W = T['charAt'](l++); ~W && (b = C % 0x4 ? b * 0x40 + W : W, C++ % 0x4) ? A += String['fromCharCode'](0xff & b >> (-0x2 * C & 0x6)) : 0x0) {
W = m['indexOf'](W)
}
return A
};
var t = function (w, m) {
var T = [],
A = 0x0,
C,
b = '',
W = '';
w = Y(w);
for (var R = 0x0, v = w['length']; R < v; R++) {
W += '%' + ('00' + w['charCodeAt'](R)['toString'](0x10))['slice'](-0x2)
}
w = decodeURIComponent(W);
var l;
for (l = 0x0; l < 0x100; l++) {
T[l] = l
}
for (l = 0x0; l < 0x100; l++) {
A = (A + T[l] + m['charCodeAt'](l % m['length'])) % 0x100,
C = T[l],
T[l] = T[A],
T[A] = C
}
l = 0x0,
A = 0x0;
for (var L = 0x0; L < w['length']; L++) {
l = (l + 0x1) % 0x100,
A = (A + T[l]) % 0x100,
C = T[l],
T[l] = T[A],
T[A] = C,
b += String['fromCharCode'](w['charCodeAt'](L) ^ T[(T[l] + T[A]) % 0x100])
}
return b
};
J['luAabU'] = t,
J['qlVPZg'] = {},
J['bSSGte'] = !![]
}
var H = J['qlVPZg'][o];
return H === undefined ? (J['TUDBIJ'] === undefined && (J['TUDBIJ'] = !![]), N = J['luAabU'](N, E), J['qlVPZg'][o] = N) : N = H,
N
};
eval(atob(window['b'])[J('0x0', ']dQW')](J('0x1', 'GTu!'), '\x27' + mw + '\x27'));
return ''
}
先不着急研究里面的代码,先看看函数的返回值,居然是个空字符串
那么,这就意味着 [ var m = window.f ]
var m = oo0O0(timestamp.toString()) + window.f;
var m = window.f
所有,m就只跟window.f有关了,那么window.f是什么呢,去那里找呢?
寻找window.f
怎么找到[window.f],首先我们能想到的,就是去源码中搜索,但是结果并没有那么理想,只出现了一处代码,也就是刚刚那一处代码
在源码中找不到,但是又使用了[window.f],肯定是通过间接的方式定义赋值的,那么它又在在那里定义的呢?
我们再来看一下这行代码
var m = oo0O0(timestamp.toString()) + window.f;
oo0O0函数执行了,但是却返回的空值;而且oo0O0()里面却有很多代码,开发者肯定不会这么闲吧
也不排除,开发者写这些没有的代码误导我们,但是这里面肯定是有内容的
经常做逆向的同学,肯定熟悉eval()函数,而这个函数也出现在了oo0O0()里面
JS中的 eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码
我们再来看一下,oo0O0()函数中的eval()部分
eval(atob(window['b'])[J('0x0', ']dQW')](J('0x1', 'GTu!'), '\x27' + mw + '\x27'));
而eval()里面还调用了一个函数atob()
atob() 方法用于解码使用 base-64 编码的字符串
我们将 【atob(window['b'])】复制下来,在调试工具的Console运行一下,可以得到了下列代码
我们将这些代码复制下来,在notepad++里面格式化一下,就可以得到md5加密的算法,我这里展示一下部分代码
可以很清楚的看到,【window.f】出现了,通过调用hex_md5()来实现赋值;但是又出现了一个新的问题,【mwqqppz】是什么呢?
寻找mwqqppz
我们再来看一下刚刚提到的eval代码片段
eval(atob(window['b'])[J('0x0', ']dQW')](J('0x1', 'GTu!'), '\x27' + mw + '\x27'));
可以看到eval函数里面除了atob(window['b'],还有
- J('0x0', ']dQW')
- J('0x1', 'GTu!')
- '\x27' + mw + '\x27'
我们再到调试工具的Console运行一下上面列出来的代码
工具给出了报错提示,[没有找到J]
这是因为oo0O0()函数里面还有一些代码段没有执行
我们先把oo0O0()函数里面eval函数上面的所有代码复制,然后去Console中运行一下
运行完后,可能会输出一些内容,我们可以不管,接着再次运行J('0x0', ']dQW'),就可以得到结果
接着,我们依次运行J('0x1', 'GTu!') , '\x27' + mw + '\x27',可以得到下列结果
熟悉的 mwqqppz 是不是出现了呢
但是,工具又报了一个错,[ mw没有找到 ]
这是因为[ mw ]是oo0O0()函数的一个形参
我们回顾一起前面的代码,就知道了
var timestamp = Date.parse(new Date()) + 100000000;
var m = oo0O0(timestamp.toString()) + window.f;
function oo0O0(mw) {
...
}
这样大家就能理解了,[ mw ] 就是传进来的一个字符串时间戳
那么,[ '\x27' ]是什么呢,我们只需要在Console运行一下就知道了
'\x27' = ' (没错就是单引号)
翻译eval()函数
知道eval()函数里面的奇怪符号的意义后,我们就可以翻译一下eval()代码片段
eval(atob(window['b'])[J('0x0', ']dQW')](J('0x1', 'GTu!'), '\x27' + mw + '\x27'));
eval(atob(window['b'])["replace"]("mwqqppz",'mw'));
可能还是有些小伙伴看不懂这行代码,我用Python的语法规则,写一下这行代码,你肯定能懂
eval(atob(window['b']).replace("mwqqppz",'mw'));
其实,很好理解,就是将【atob(window['b'])】里面的【mwqqppz】替换成【mw】
也就是,将【mwqqppz】替换成字符串的时间戳
明白window.f的值从何而来
读到这里的小伙伴,相信你们大致明白了window.f的值从何而来
var timestamp = Date.parse(new Date()) + 100000000;
var m = oo0O0(timestamp.toString()) + window.f;
var m = window.f;
var m = hex_md5(mwqqppz);
var m = hex_md5(timestamp);
通过上面的代码,逻辑已经很清晰了(当面你要从头看到这)
现在我们就通过鬼鬼JS调试工具测试一下,我们的分析对不对
验证答案
首先,我们将【atob(window['b'])】在调试工具Console中运行得到的代码,复制到鬼鬼调试工具中
写一个验证答案的函数
function get_cipher(){
timestamp = '1608971657000';
f = hex_md5(timestamp);
return f;
}
这里面的时间戳,来源于文章开头的链接
http://match.yuanrenxue.com/api/match/1?m=f289e3140053a9320c137b67e8723ba3%E4%B8%A81608971657
运行代码,可以看到加密后的时间戳与链接中的密文一模一样
现在,我们就可以愉快的编写Python代码爬取网页数据啦!
最后的爬虫和解出答案
通过上面的一顿操作,我们可以编写一个JS文件,用于生成链接后面的密文
在Python代码中可以通过第三方库execjs,执行这个JS文件,得到密文
(由于代码有点多,我就不展示了,下面以文件的方式给大家)
话不到多,直接上爬虫代码,很简单,写了一些注释,我就不详细赘述了
# @BY :Java_S
# @Time :2020/12/25 9:10
# @Slogan :够坚定够努力大门自然会有人敲,别怕没人赏识就像三十岁的梵高
import requests
import execjs
import time
def get_md5_value():
# 导入JS,读取需要的js文件
with open(r'JS/jsConfuse.js',encoding='utf-8',mode='r') as f:
JsData = f.read()
# 加载js文件,使用call()函数执行,传入需要执行函数即可获取返回值
psd = execjs.compile(JsData).call('get_cipher')
psd = psd.replace('丨','%E4%B8%A8')
return psd
def get_data(page_num,md5):
url = f'http://match.yuanrenxue.com/api/match/1?page={page_num}&m={md5}'
headers = {
'Host':'match.yuanrenxue.com',
'Referer':'http://match.yuanrenxue.com/match/1',
'User-Agent':'yuanrenxue.project',
}
response = requests.get(url,headers=headers)
return response.json()
if __name__ == '__main__':
sum_num = 0
index_num = 0
for page_num in range(1,6):
info = get_data(page_num,get_md5_value())
price_list = [i['value'] for i in info['data']]
print(f'第{page_num}页的价格列表{price_list}')
sum_num += sum(price_list)
index_num += len(price_list)
time.sleep(1)
average_price = sum_num / index_num
print(f'机票价格的平均值:{average_price}')