爱回收网站，js请求过程分析

2019年8月15日 228次阅读 来源: allenfp

aihuishou

最近在qq群里看到有个小伙伴在问爱回收网站怎么爬取手机价格信息。

爱回收网站，在网站中大量使用了js动态改变DOM元素，而且请求的参数使用的是paylaod加密。我们在分析网站的时候看不到参数，也就分析不出来请求参数的规律，这个问题可以通过fiddler抓包工具解决。刚开始分析确实有点懵，在此记录下我的分析过程。

工具；火狐浏览器，开发者模式 Fiddler

前面各个分类的分析还是比较简单，所需内容都在网页源码中有，可以直接找到。主要是请求价格的过程有点复杂。

首先看看网站是如何发送POST请求价格的
我们以http://www.aihuishou.com/prod…：

《爱回收网站，js请求过程分析》

必须选择要提交的选项才能提交查询价格，这里我们随便选择几个选项，查找买免费询价的元素看到href是：

《爱回收网站，js请求过程分析》

重点来了这里点击免费询价之后，网站直接跳转到价格的页面网址是：http://www.aihuishou.com/pc/i…，我们来找下http://www.aihuishou.com/user…，

《爱回收网站，js请求过程分析》

这时候发现没有网址的请求，这时猜测是重定向了。这时候我们需要知道请求了什么导致重定向，打开fiddler，重新回到刚才，点击免费询价。然后在fiddler中找到发送的http://www.aihuishou.com/user…：

《爱回收网站，js请求过程分析》

《爱回收网站，js请求过程分析》

可以发现是个post请求，返回的是一个json格式的数据，我们看到里面有个redirectUrl，参数是”/pc/index.html#/inquiry/1516201064093351267”， 看到这个心中有没有感到一喜，对比这个和跳转后的页面，发现惊奇的相似。访问下这个网址，正是我们要找的价格的页面。

此时是不是有点大功告成的感觉，然后我们在页面中提取我们要的数据，结果并没有发现，这时猜测可能是请求的是json数据，然后动态加载到页面中的，这这是我们通过火狐浏览器的开发者功能，找到了真正数据的请求：
《爱回收网站，js请求过程分析》

发现后面的数字就是url后面的数字，这是我们重新构造这个http://www.aihuishou.com/port…。

现在整个过程明朗了，但是还有一个问题，最初的POST请求的参数怎么来的， 我们回过头重新看下http://www.aihuishou.com/user…。

在火狐开发者模式下，我们可以看到免费询价这个元素对应触发的click事件，

《爱回收网站，js请求过程分析》

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…

    原文作者：allenfp
    原文地址: https://segmentfault.com/a/1190000014873431
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞