|
|
现在越来越多的网站把数据的交互过程写在 JS 代码里，也就是说如果你只单单看前端网页的源码，你是无法得到具体的数据，你只能看到一大堆调用 JS 的前端代码。所以对于这类的网站，我们需要进入到具体的 JS 源码，理清关键代码，从而进行破解获取到我们想要的数据。: R6 p) R/ n& ~6 z
1 JS 基础语法学习
' u& j' n4 ?3 h5 `# H1 n+ G 你只要有点编程基础，学习过一门编程语言，JS 的学习还是相对轻松，一个星期左右的时间就可以把 JS 所有的基础内容，全部学习一遍。如果你没有编程基础的话，JS 基础的内容学习起来也不是非常难，最多一个月的时间也能全部学完。4 h; B. A! T- ?* N% f
这里给大家推荐一个 JS 编程基础学习网站：
# C1 T0 x& |7 v: shttps://www.runoob.com/js/js-tutorial.html
2 ]6 _8 ^# i& _+ r0 O
% t/ w* k+ y* i3 m- p
" X, Q0 \ { U2 p
8 v5 [" q+ J$ V4 ]# B0 T7 t2 前端 JS 破解原理3 d* O# X" u- t5 [! V) Q2 F' [
普通的网站数据的显示都是在网站的源码中就可看到，这类的网站你只要发个 requests 的请求，服务器就会把带有数据的源码返回给你，你就可以通过一些解析库进行解析了。但对于 JS 进行数据加密传输的网站，它就不同，比如下面这个网站：% }3 Y6 `: y1 o W
" R/ E' S5 I3 n2 j2 c6 q0 G 在控制面板可以看到获取到的数据是字母串，跟前端显示的数据完全不同，这就说明网站的数据是被加密了。新手在爬这类网站的时候，看到这里可能就会感到无奈。但大家不妨这样想，前端显示的数据是正常，所以后台一定会有某个地方对加密过的数据进行解密，而我们需要做的就是找到这个段解密的代码，按照它的逻辑进行传参就可以了。这也是我们破解 JS 代码的原理所在。
$ Q" Q8 S, S* \+ h l% I4 B" X: o3 R* O* i" d5 h/ @& u& o
3 工具的使用/ p! V7 f+ ]9 Z
讲完了原理之后，我先给大家介绍几个常用的工具。3.1 谷歌浏览器的开发者工具6 i" d! L5 X+ y" d/ O) o1 J6 G
学爬虫一定要会使用谷歌浏览器的开发者工具，按谷歌浏览器按 F12 就可以弹出具体的页面。( e. Y+ {( |) }4 q: u+ y
. b2 Q; {4 k% d- z! k+ A
在开发者页面中你可以看到网页的源码「Elementes」、控制台「Console」、网页源码「Sources」、网络请求面板「Network」等等。详细的教程可以去看下官方的文档：
( g- w% I+ [/ g: |, vhttps://developers.google.com/web/tools/chrome-devtools/?hl=zh-cn
C# L! s* E- |5 o. v: Y6 V' w6 G t" h. s: m/ |; |* B
3.2 Nodejs 安装6 [! Y$ b1 m) h% Q% K8 n b
因为涉及 JS 的调试验证，所以除了 Python 环境外，你还需要Nodejs（ JS 的运行环境）和 WebStorm（IDE）。2 K( y+ E6 E" @; O, ?* H
$ L6 F1 J( K4 w0 ~; P8 O/ k
Nodejs 去官网下载安装包后直接一键安装即可，安装完毕后去控制台运行 node -- version，如果出现版本号即代表安装成功。WebStorm 安装完后需要激活，激活教程网上很多，大家自行搜索。它是 Jet Brains 的产品（和 PyCharm 是同一家公司），所以使用方式与 PyCharm 很类似。
X# l* K& |$ k" q2 ]0 M6 ~
# c% @: a1 o+ L8 G) P/ F4 实战练习
+ Y- j: p. ^. \$ @' L7 x# H接下来就带大家进行实战练习，这次我们爬取的对象是「企名片」网站：0 ^, o) X3 |, f1 Y
https://www.qimingpian.com/finosda/project/pinvestment
- I- V2 w" s6 a5 o M$ f6 e( F4 S# Y8 P: x: v
4.1 网站分析; ~! U' G( Q# }: E+ j
首先打开链接，点击 F12 查看网络请求面板。在 pinvestment 响应里可以看到是一个 JS 调用的代码，并没有我们想要的 HTML 代码，显示网页是由 JS 动态生成。' t2 [$ i C) j& a! i2 Q' `
$ O8 q! s8 E" D1 k. M) M
在点击 XHR，我们就可以看到一个 productListVip，这里面有个 encrypt_data 数据。参数内容像是一串 Base64 字符。既然网站对这个参数做了加密，说明它不想被爬取，所以可以做个假设：我们的目标数据就是 encrypt_data 参数里的内容。3 M" I2 g. l6 ], M. v- z7 E0 z
, ~6 R0 m5 u- F9 b M 接下来我们就要破解 encrypt_data。
0 [& @2 j0 z5 g7 ]8 T, t4.2 断点调试 JS 源码' Z( t0 ~8 R6 [
打开开发者工具，点击 Sources 我们在 js 文件夹中就可以找到网页的 JS 代码，在右侧我们就可以进行断点调试。+ ^+ F4 }4 k$ l6 y4 Y( g0 h
% V. X0 c- n& ? c 在断点调试拦里有个 XHR/fetch Breakpoints 选择，而我们含有 encrypt_data 加密的参数正是一个 XHR 请求，所以我们点击+号，把 productlistVip 请求 url 添加进去。
8 }( S+ N* W' z* g' p* T# O
q. L6 E n* t0 Q
随后我们重新刷新网页，就可以一步步的调试找到可疑的地方。: i0 m% \7 o: L6 d& N
小技巧：. C8 T5 O0 S. E4 ~. ~
1 花括号进行美化- \7 h R2 L) ^; h
1 `# E! y& p2 T% x1 R5 z- Z 点击左下角的花括号，可以把乱序的 JS 代码，变成有序的代码，看起来就非常的方便。0 Z, U& F% R# ~/ A" U
' e5 o2 Q# `! L" T* k! p; `
: G8 I: z. U8 ]/ v
2 控制台输出执行结果
. z @- P. | H3 |$ s 如果你找到比较可疑的点，你可以选中可疑的代码段，点击右键有个 Evaluate selected 选项，它就会在控制台输出执行的结果。4 K' q, Q, c& D
$ a+ H& s0 w6 D+ N1 S+ i
1 u$ A+ J* U0 j0 ^- j
; ^1 s. L( ]7 t/ R' v" J( @
其实上图中执行 Object(d.a)(e.encrypt_data) 返回的内容就是我们需要的数据了。进到这个函数体里边，就能找到解密函数：其实上图中执行 Object(d.a)(e.encrypt_data) 返回的内容就是我们需要的数据了。进到这个函数体里边，就能找到解密函数：4 o- s& P" r. a6 D7 \5 h& V
6 Y; K; p& B: j2 H$ k M/ R function o(t) 就是我们需要的解密函数，可以看到它先调用 s 函数，传入了四个参数，除了a.a.decode(t) 外其他三个都是写死的，最后用 JSON.parse 转为 json 对象。
2 _1 g& E' I" H: T! l7 x. L$ y$ x然而，找到解密函数后，我们要做的不是去分析它函数内部做了什么，虽然可以研究它的解密算法然后用 Python 重写，但这样太复杂且没必要。因为我们可以用 PyExecJS 这个库，直接用 Python 调用并执行 js 代码。
0 W( H8 E' a+ z4 a0 f 这时候，WebStorm 就派上用场了。新建一个 js 文件，把 function o里涉及的代码全部抠下来。然后执行 console.log 把执行结果打印出来。篇幅问题就只贴部分代码：
/ ^$ F+ ^# P0 `4 V
, B$ _1 p& [- g+ Q) }
u! f. [! E. [9 ? 成功输出正确的数据，最后用 Python 去调用解密函数就行了。
1 A! b3 G3 Q8 X5 @: K; a+ c
% T, p% O2 \# p( n t4 U( _; Y |
|
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2020-3-19 10:28:04
