JavaScript逆向爬取实战——使用Python实现列表页内容爬取(一)

简介: JavaScript逆向爬取实战——使用Python实现列表页内容爬取(一)

JavaScript逆向爬取—使用Python实现列表页内容爬取
1. 案例介绍
案例网址:https://spa6.scrape.center/, 如图所示:

image.png

点击任意一步电影,观察一下URL的变化,如图所示:

image.png

看到详情页URL包含了一个长字符串,看上去像是Base64编码的内容。

看看Ajax的请求,从列表页的第1页到第10页依次点击一下,观察Ajax请求是怎么样的,如图所示:
image.png

可以看到,Ajax接口的URL里多了一个token,而且在不同的页码,token是不一样的,它们同样看似是Base64编码的字符串。而且这个接口还有时效性。如果我们把Ajax接口的URL直接复制下来,短期内可以访问,但是过段时间就无法访问了,会直接返回401状态码。

再看一下列表页的返回结果,比如打开第一个请求,看看第一部电影数据的返回结果,如图所示:

image.png

第一部电影的URL是https://spa6.scrape.center/detail/ZWYzNCN0ZXVxMGJ0dWEjKC01N3cxcTVvNS0takA5OHh5Z2ltbHlmeHMqLSFpLTAtbWIx,看起来是Base64编码,对它进行解码,结果为ef34#teuq0btua#(-57w1q5o5–j@98xygimlyfxs*-!i-0-mb1,看起来似乎还是毫无规律,这个解码后的结果又是怎么来的呢?返回结果里也并不包含这个字符串,这是怎么构造的呢?其真实数据是通过Ajax加载的,那么Ajax请求又是怎样的呢?如下图所示:

image.png

发现Ajax接口除了包含刚才说的URL中携带的字符串,又多了一个token,同样也是类似Base64编码的内容。这个网站有如下特点:

  • 列表页的Ajax接口参数带有加密的token
  • 详情页的URL带有加密id
  • 详情页的Ajax接口参数带有加密id和加密token

那么爬取的逻辑就是,必须把这些加密id和token构造出来才行,而且必须一步步来。首先构造出列表页Ajax接口的token参数,然后获取每部电影的数据信息,接着根据数据信息构造出加密id和加密token。

由于是网页,所以其加密逻辑一定藏在前端代码里,前端为了保护器接口加密逻辑不被轻易分析出来,会采取压缩、混淆等方式来加大分析等难度。

首先看网站的源代码,在网站上点击鼠标右键,此时会弹出快捷菜单,然后点击“查看源代码”选项,结果如下图所示:

image.png

内容如下:

<!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的源代码,如图所示:

image.png

随便复制一些出来,看看是什么样子的,结果如下:

(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,如下图所示:

image.png

这样就进入全局搜索模式,搜索token,可以看到的确搜索到几个结果,如下图所示:

image.png

经过观察,下面的两个结果可能是我们想要的,点击第一个进入看看,此时定位到一个JavaScript文件,如下图所示:
image.png

这时可以看到整个代码都是经过压缩的,只有一行,不好看,点击左下角的{}按钮,格式化JavaScript代码,格式化后的结果如 下图所示:

image.png

这里我们再次定位到token,观察一下看到有limit、offset、token。然后观察其他的逻辑,基本上能确定这就是构造Ajax请求的 地方,如果不是的话,可以继续搜索其他文件观察分析。现在,就成功找到了混淆的入口,这是一个寻找入口的首选方法,如下 图所示:

image.png

设置Ajax断点
我们可以在Sources选项卡右侧XHR/fetch Breakpoints处添加一个断点。首先点击+号,此时就会让我们输入匹配的URL内容。由于Ajax接口的形式是/api/movie/?limit=10…这样的格式,所以截取一段填进去就好了,这里填的就是/api/movie,如图所示:

image.png

重新点击格式化按钮{},格式化代码,看看断点在哪里,如下图所示。这里有一个字符send,我们可以初步猜测它相当于发送Ajax请求的一瞬间。

image.png

怎样回溯查找相关逻辑的方法,点击右侧的Call Stack,这里记录了JavaScript方法逐层调用的过程,如下图所:

image.png

当前指向的是一个名为anonymous(也就是匿名)的调用,在它的下方显示了调用anonymous的方法,名字叫做_0x29474e,然后在下一层就显示了调用_0x2ad882方法的方法,以此类推。继续找下去,注意观察类似token这样的信息,就能找到对应的位置了。最后,找到了onFetchData,这个方法实现了token的构造逻辑,就成功找到了token参数构造位置了。如下图所示:
image.png

接下文 JavaScript逆向爬取实战——使用Python实现列表页内容爬取(二)https://developer.aliyun.com/article/1621796

相关文章
|
26天前
|
数据采集 数据可视化 数据挖掘
Python数据分析实战:Pandas处理结构化数据的核心技巧
在数据驱动时代,结构化数据是分析决策的基础。Python的Pandas库凭借其高效的数据结构和丰富的功能,成为处理结构化数据的利器。本文通过真实场景和代码示例,讲解Pandas的核心操作,包括数据加载、清洗、转换、分析与性能优化,帮助你从数据中提取有价值的洞察,提升数据处理效率。
101 3
|
26天前
|
数据可视化 Linux iOS开发
Python脚本转EXE文件实战指南:从原理到操作全解析
本教程详解如何将Python脚本打包为EXE文件,涵盖PyInstaller、auto-py-to-exe和cx_Freeze三种工具,包含实战案例与常见问题解决方案,助你轻松发布独立运行的Python程序。
327 2
|
26天前
|
存储 监控 API
Python实战:跨平台电商数据聚合系统的技术实现
本文介绍如何通过标准化API调用协议,实现淘宝、京东、拼多多等电商平台的商品数据自动化采集、清洗与存储。内容涵盖技术架构设计、Python代码示例及高阶应用(如价格监控系统),提供可直接落地的技术方案,帮助开发者解决多平台数据同步难题。
|
2月前
|
机器学习/深度学习 算法 文件存储
神经架构搜索NAS详解:三种核心算法原理与Python实战代码
神经架构搜索(NAS)正被广泛应用于大模型及语言/视觉模型设计,如LangVision-LoRA-NAS、Jet-Nemotron等。本文回顾NAS核心技术,解析其自动化设计原理,探讨强化学习、进化算法与梯度方法的应用与差异,揭示NAS在大模型时代的潜力与挑战。
285 6
神经架构搜索NAS详解:三种核心算法原理与Python实战代码
|
13天前
|
机器学习/深度学习 文字识别 Java
Python实现PDF图片OCR识别:从原理到实战的全流程解析
本文详解2025年Python实现扫描PDF文本提取的四大OCR方案(Tesseract、EasyOCR、PaddleOCR、OCRmyPDF),涵盖环境配置、图像预处理、核心识别与性能优化,结合财务票据、古籍数字化等实战场景,助力高效构建自动化文档处理系统。
212 0
|
11天前
|
小程序 PHP 图形学
热门小游戏源码(Python+PHP)下载-微信小程序游戏源码Unity发实战指南​
本文详解如何结合Python、PHP与Unity开发并部署小游戏至微信小程序。涵盖技术选型、Pygame实战、PHP后端对接、Unity转换适配及性能优化,提供从原型到发布的完整指南,助力开发者快速上手并发布游戏。
|
2月前
|
数据采集 消息中间件 并行计算
Python多线程与多进程性能对比:从原理到实战的深度解析
在Python编程中,多线程与多进程是提升并发性能的关键手段。本文通过实验数据、代码示例和通俗比喻,深入解析两者在不同任务类型下的性能表现,帮助开发者科学选择并发策略,优化程序效率。
116 1
|
13天前
|
JavaScript 前端开发 安全
【逆向】Python 调用 JS 代码实战:使用 pyexecjs 与 Node.js 无缝衔接
本文介绍了如何使用 Python 的轻量级库 `pyexecjs` 调用 JavaScript 代码,并结合 Node.js 实现完整的执行流程。内容涵盖环境搭建、基本使用、常见问题解决方案及爬虫逆向分析中的实战技巧,帮助开发者在 Python 中高效处理 JS 逻辑。
|
19天前
|
开发工具 Android开发 开发者
用Flet打造跨平台文本编辑器:从零到一的Python实战指南
本文介绍如何使用Flet框架开发一个跨平台、自动保存的文本编辑器,代码不足200行,兼具现代化UI与高效开发体验。
152 0
|
21天前
|
算法 安全 数据安全/隐私保护
Python随机数函数全解析:5个核心工具的实战指南
Python的random模块不仅包含基础的随机数生成函数,还提供了如randint()、choice()、shuffle()和sample()等实用工具,适用于游戏开发、密码学、统计模拟等多个领域。本文深入解析这些函数的用法、底层原理及最佳实践,帮助开发者高效利用随机数,提升代码质量与安全性。
110 0

推荐镜像

更多