爬虫实战,爱回收网站js请求过程分析

1、问题来源

    最近在qq群里看到有个小伙伴在问爱回收网站怎么爬取手机价格信息。然后就看了下这个网站,研究了下请求过程。

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

2、工具

工具;火狐浏览器,开发者模式 ,Fiddler抓包工具

3、分析过程

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

    首先看看网站是如何发送POST请求价格的,我们以http://www.aihuishou.com/product/17458.html为例:必须选择要提交的选项才能提交查询价格,这里我们随便选择几个选项,打开fiddler抓包工具,点击‘免费询价’,查看请求过程:

     点击免费询价后,网页跳转到下图的页面:


 这里点击免费询价之后,网站直接跳转到价格的页面网址是:http://www.aihuishou.com/pc/index.html#/inquiry/5910998295796770865

   我们通过火狐浏览器开发者功能,查看‘免费询价’的href是:/userinquiry/create.html这个网址


    请求前后的网站不一样,这时猜测是重定向了。这时候我们需要知道请求了什么导致重定向,在fiddler抓包工具中找到发送的http://www.aihuishou.com/userinquiry/create.html的这个请求

    可以发现是个post请求,返回的是一个json格式的数据,我们看到里面有个redirectUrl,是"/pc/index.html#/inquiry/1516201064093351267”, 看到这个数字,心中有没有感到一喜,对比这个和跳转后的页面后的数字串一样。访问下这个网址,正是我们要找的价格的页面。这样就能得到请求价格的key
    
    此时是不是有点大功告成的感觉,然后我们在价格的页面中提取我们要的数据,结果并没有发现,这时猜测可能是请求的是json数据,然后动态加载到页面中的,这这是我们通过fiddler抓包工具中,找到了真正数据的请求:

    请求数据的url是:http://www.aihuishou.com/portal-api/inquiry/1096765232508653251,这个后面的数字就是前面得到的key,重新构造这个请求的url就可以拿到我们想要的数据了。
    
    现在发送请求的整个过程明朗了,但是还有一个问题,最初的POST请求的参数怎么来的,我们回过头重新看下http://www.aihuishou.com/userinquiry/create.html这个POST请求具体是怎么实现的。这就用到了火狐浏览器可以查看元素对应触发的时间的功能了。在火狐开发者模式下,我们可以看到免费询价这个元素对应触发的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,最后在用';'连接各元素。其中这些元素对应的是点击‘免费询价’之前需要作出的选项,每个选项元素中有个‘data-id’的属性,这个属性就是将各个选择的属性值按‘;’连接起来就是请求的price_units参数。

        这样,POST请求的三个参数都找到了,也就能够顺利的拿到我们想要的数据了。另外,这个网站请求过快会有验证码,可以加代理绕过代理验证。

4、结论

        至此,整个询问价格的流程分析完成,还是由衷的感觉整个爬虫懂点js还是好处多多的! 如果想读源码,请移步github,链接是:https://github.com/allenshen321/aihuishou
阅读更多
文章标签: python 爬虫 JavaScript
个人分类: 爬虫实战项目
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭