爱回收网站,js请求过程分析
aihuishou
最近在qq群里看到有个小伙伴在问爱回收网站怎么爬取手机价格信息。
爱回收网站,在网站中大量使用了js动态改变DOM元素,而且请求的参数使用的是paylaod加密。我们在分析网站的时候看不到参数,也就分析不出来请求参数的规律,这个问题可以通过fiddler抓包工具解决。刚开始分析确实有点懵,在此记录下我的分析过程。
工具;火狐浏览器,开发者模式 Fiddler
前面各个分类的分析还是比较简单,所需内容都在网页源码中有,可以直接找到。主要是请求价格的过程有点复杂。
首先看看网站是如何发送POST请求价格的
我们以http://www.aihuishou.com/prod...:
必须选择要提交的选项才能提交查询价格,这里我们随便选择几个选项,查找买免费询价的元素看到href是:
重点来了这里点击免费询价之后,网站直接跳转到价格的页面网址是:http://www.aihuishou.com/pc/i...,我们来找下http://www.aihuishou.com/user...,
这时候发现没有网址的请求,这时猜测是重定向了。这时候我们需要知道请求了什么导致重定向,打开fiddler,重新回到刚才,点击免费询价。然后在fiddler中找到发送的http://www.aihuishou.com/user...:
可以发现是个post请求,返回的是一个json格式的数据,我们看到里面有个redirectUrl,参数是"/pc/index.html#/inquiry/1516201064093351267”, 看到这个心中有没有感到一喜,对比这个和跳转后的页面,发现惊奇的相似。访问下这个网址,正是我们要找的价格的页面。
此时是不是有点大功告成的感觉,然后我们在页面中提取我们要的数据,结果并没有发现,这时猜测可能是请求的是json数据,然后动态加载到页面中的,这这是我们通过火狐浏览器的开发者功能,找到了真正数据的请求:
发现后面的数字就是url后面的数字,这是我们重新构造这个http://www.aihuishou.com/port...。
现在整个过程明朗了,但是还有一个问题,最初的POST请求的参数怎么来的, 我们回过头重新看下http://www.aihuishou.com/user...。
在火狐开发者模式下,我们可以看到免费询价这个元素对应触发的click事件,
function(a) {
a.preventDefault();
var l = $(this);
if (!l.hasClass("disabled") && W) {
if (!d.hasClass("hidden")) { var c = $.trim(o.val()); if (!s(c)) return; n.imgCaptcha = c } n.PriceUnits = e(), ahs.PopWindow.Loading(!0), $.post(r, n, function(e) { ahs.PopWindow.Hide(), e.code ? 3001 === e.code ? i(e.data.captchaUrl) : 3002 === e.code ? (t(e.data.captchaUrl), alert("验证码有误")) : e.data.redirectUrl && (location.href = e.data.redirectUrl) : location.href = e.data.redirectUrl })
}
}
可以看到js中有个post请求,请求的参数是r, n,r应该是请求的url,n是对应的POST参数,那么就要找到这个r, n,在js文件中,我们可以看到定义r, n参数的代码,就在这个函数的上面定义了:
var r = $submit.attr('href'),
n = { AuctionProductId: $submit.data('pid'), ProductModelId: $submit.data('mid') };
这里我们可以看到r正是submit元素的href的值,n是submit元素属性中包含'pid', 'mid'的值,我们再看看fiddler抓到的参数应该有三个,还有一个priceUnits参数,我们js代码,发现,n.PriceUnits = e(),这个便是
第三个参数的由来,在js中搜索function e,可以找到 函数e的定义:
function e() {
var e = [ ], t = [ ]; return $('.base-property').find('li.checked').each(function () { e.push($(this).data('id')) }), F ? (e = a(e, t), e = e.concat(O), e.join(';')) : (e = a(e, O), $('.appearance-property').find('li.checked').each(function () { t.push($(this).data('id')) }), c.filter('.function-property').find('li').each(function () { var e = $(this); t.push(e.hasClass('checked') ? e.data('id') : e.data('default')) }), e = e.concat(t), e.join(';')) }
大致的意思就是找到对应元素下包含'id'的属性的值加入到e的类表中,然后合并列表e,t,最后在用';'连接各元素。
这样,POST请求的三个参数都找到了,这个网站访问过快会有验证码,可以加代理绕过代理验证。
至此,整个询问价格的流程分析完成,还是由衷的感觉整个爬虫懂点js还是好处多多的! 如果想读源码,请移步github,链接是:https://github.com/allenshen3...