JavaScript逆向爬取—使用Python实现列表页内容爬取
1. 案例介绍
案例网址：https://spa6.scrape.center/， 如图所示：
点击任意一步电影，观察一下URL的变化，如图所示：
看到详情页URL包含了一个长字符串，看上去像是Base64编码的内容。
看看Ajax的请求，从列表页的第1页到第10页依次点击一下，观察Ajax请求是怎么样的，如图所示：
可以看到，Ajax接口的URL里多了一个token，而且在不同的页码，token是不一样的，它们同样看似是Base64编码的字符串。而且这个接口还有时效性。如果我们把Ajax接口的URL直接复制下来，短期内可以访问，但是过段时间就无法访问了，会直接返回401状态码。
再看一下列表页的返回结果，比如打开第一个请求，看看第一部电影数据的返回结果，如图所示：
发现Ajax接口除了包含刚才说的URL中携带的字符串，又多了一个token，同样也是类似Base64编码的内容。这个网站有如下特点：
- 列表页的Ajax接口参数带有加密的token
- 详情页的URL带有加密id
- 详情页的Ajax接口参数带有加密id和加密token
那么爬取的逻辑就是，必须把这些加密id和token构造出来才行，而且必须一步步来。首先构造出列表页Ajax接口的token参数，然后获取每部电影的数据信息，接着根据数据信息构造出加密id和加密token。
由于是网页，所以其加密逻辑一定藏在前端代码里，前端为了保护器接口加密逻辑不被轻易分析出来，会采取压缩、混淆等方式来加大分析等难度。
首先看网站的源代码，在网站上点击鼠标右键，此时会弹出快捷菜单，然后点击“查看源代码”选项，结果如下图所示：
内容如下：
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/favicon.ico><title>Scrape | Movie</title><link href=/css/chunk-19c920f8.2a6496e0.css rel=prefetch><link href=/css/chunk-2f73b8f3.5b462e16.css rel=prefetch><link href=/js/chunk-19c920f8.c3a1129d.js rel=prefetch><link href=/js/chunk-2f73b8f3.8f2fc3cd.js rel=prefetch><link href=/js/chunk-4dec7ef0.e4c2b130.js rel=prefetch><link href=/css/app.ea9d802a.css rel=preload as=style><link href=/js/app.5ef0d454.js rel=preload as=script><link href=/js/chunk-vendors.77daf991.js rel=preload as=script><link href=/css/app.ea9d802a.css rel=stylesheet></head><body><noscript><strong>We're sorry but portal doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/js/chunk-vendors.77daf991.js></script><script src=/js/app.5ef0d454.js></script></body></html>
这是一个典型的SPA（单页Web应用）页面，其JavaScript文件名带有编码字符、chunk、vendors等关键字，这就是经过webpack打包压缩后的源代码，目前主流的前端开发框架Vue.js、React.js等的输出结果都是类似这样的。
再看一下JavaScript代码是什么样的。在开发者工具中打开Sources选项卡下的Page选项卡，然后打开js文件夹，在这里看到JavaScript的源代码，如图所示：
随便复制一些出来，看看是什么样子的，结果如下：
(window['webpackJsonp'] = window['webpackJsonp'] || [])['push']([['chunk-19c920f8'], {
'5a19': function(_0x1588d2, _0x49ff45, _0x493500) {
},
'c6bf': function(_0x1ff78d, _0x1a7aa3, _0x6392a5) {
},
'ca9c': function(_0x34ea17, _0x1d01c8, _0x1a974c) {
'use strict';
var _0x116bc9 = _0x1a974c('5a19')
, _0x14ee23 = _0x1a974c['n'](_0x116bc9);
_0x14ee23['a'];
},
'd504': function(_0x4c4705, _0x3c93b9, _0x4c22a6) {
'use strict';
_0x4c22a6['r'](_0x3c93b9);
var _0x4b4f78 = function() {
var _0x1dc0eb = this
, _0x559ed0 = _0x1dc0eb['$createElement']
, _0x28c6bc = _0x1dc0eb['_self']['_c'] || _0x559ed0;
return _0x28c6bc('div', {
'attrs': {
'id': 'index'
}
}, [_0x28c6bc('el-row', {
'directives': [{
'name': 'loading',
'rawName': 'v-loading',
'value': _0x1dc0eb['loading'],
'expression': 'loading'
}]
...
...
可以看到一些变量是十六进制字符串，而且代码全部被压缩了。要从这里找出token和id的构造逻辑。
2. 寻找列表页Ajax入口
简单介绍两种寻找入口的方式：
全局搜索标志字符串
全局搜索标志字符串
重新打开列表页的Ajax接口，看一下请求的Ajax接口，如图所示：
这里Ajax接口的URL为https://spa6.scrape.center/api/movie/?limit=10&offset=0&token=NzRlZWQwYjRiNDFmZGRiMWZkZj RiYjUyZTkxNTg2OGUxOWUxNDk2YiwxNzEyNjY4MTc4，可以看到带有limit、offset、token三个参数，关键就是找token，我 们就全局搜索是否存在token吧！点击开发者右上角“三个小竖点”选项卡，然后点击Search，如下图所示：
这样就进入全局搜索模式，搜索token，可以看到的确搜索到几个结果，如下图所示：
经过观察，下面的两个结果可能是我们想要的，点击第一个进入看看，此时定位到一个JavaScript文件，如下图所示：
这时可以看到整个代码都是经过压缩的，只有一行，不好看，点击左下角的{}按钮，格式化JavaScript代码，格式化后的结果如 下图所示：
这里我们再次定位到token，观察一下看到有limit、offset、token。然后观察其他的逻辑，基本上能确定这就是构造Ajax请求的 地方，如果不是的话，可以继续搜索其他文件观察分析。现在，就成功找到了混淆的入口，这是一个寻找入口的首选方法，如下 图所示：
设置Ajax断点
我们可以在Sources选项卡右侧XHR/fetch Breakpoints处添加一个断点。首先点击+号，此时就会让我们输入匹配的URL内容。由于Ajax接口的形式是/api/movie/?limit=10…这样的格式，所以截取一段填进去就好了，这里填的就是/api/movie，如图所示：
重新点击格式化按钮{}，格式化代码，看看断点在哪里，如下图所示。这里有一个字符send，我们可以初步猜测它相当于发送Ajax请求的一瞬间。
怎样回溯查找相关逻辑的方法，点击右侧的Call Stack，这里记录了JavaScript方法逐层调用的过程，如下图所：
当前指向的是一个名为anonymous（也就是匿名)的调用，在它的下方显示了调用anonymous的方法，名字叫做_0x29474e，然后在下一层就显示了调用_0x2ad882方法的方法，以此类推。继续找下去，注意观察类似token这样的信息，就能找到对应的位置了。最后，找到了onFetchData，这个方法实现了token的构造逻辑，就成功找到了token参数构造位置了。如下图所示：
接下文 JavaScript逆向爬取实战——使用Python实现列表页内容爬取（二）https://developer.aliyun.com/article/1621796
