|
|
现在越来越多的网站把数据的交互过程写在 JS 代码里，也就是说如果你只单单看前端网页的源码，你是无法得到具体的数据，你只能看到一大堆调用 JS 的前端代码。所以对于这类的网站，我们需要进入到具体的 JS 源码，理清关键代码，从而进行破解获取到我们想要的数据。
, p1 d+ ~- s0 F4 l1 JS 基础语法学习: I; F' t0 {% j& L |/ ~
你只要有点编程基础，学习过一门编程语言，JS 的学习还是相对轻松，一个星期左右的时间就可以把 JS 所有的基础内容，全部学习一遍。如果你没有编程基础的话，JS 基础的内容学习起来也不是非常难，最多一个月的时间也能全部学完。# b) j! q1 C; |4 g; d! Q; }
这里给大家推荐一个 JS 编程基础学习网站：
& q& W+ @9 [! s* Y- G/ d3 ^https://www.runoob.com/js/js-tutorial.html
, a: }; A( f( l: W2 g" N6 \2 Z/ L* }8 k. l
3 k% ?; w5 ^) d3 Y8 M- g' G
( M/ c: l, D3 _2 前端 JS 破解原理: I" C* }3 F+ N* ?+ e
普通的网站数据的显示都是在网站的源码中就可看到，这类的网站你只要发个 requests 的请求，服务器就会把带有数据的源码返回给你，你就可以通过一些解析库进行解析了。但对于 JS 进行数据加密传输的网站，它就不同，比如下面这个网站：
" F5 N/ q; }4 U2 t- u
* a/ K! S! v& U, L/ `
在控制面板可以看到获取到的数据是字母串，跟前端显示的数据完全不同，这就说明网站的数据是被加密了。新手在爬这类网站的时候，看到这里可能就会感到无奈。但大家不妨这样想，前端显示的数据是正常，所以后台一定会有某个地方对加密过的数据进行解密，而我们需要做的就是找到这个段解密的代码，按照它的逻辑进行传参就可以了。这也是我们破解 JS 代码的原理所在。
4 ?% @2 z; ?8 W% d& L4 A
/ h" b) |8 l0 l- y. H8 ^3 工具的使用
% U" G) c _! M. K Q 讲完了原理之后，我先给大家介绍几个常用的工具。3.1 谷歌浏览器的开发者工具
* c& a; f# f9 J$ ] 学爬虫一定要会使用谷歌浏览器的开发者工具，按谷歌浏览器按 F12 就可以弹出具体的页面。( J) }+ t D; x6 l3 i
7 ~2 J- Y9 S3 A8 d
在开发者页面中你可以看到网页的源码「Elementes」、控制台「Console」、网页源码「Sources」、网络请求面板「Network」等等。详细的教程可以去看下官方的文档：$ b4 D) Y: f i( }, ^ A: E. M
https://developers.google.com/web/tools/chrome-devtools/?hl=zh-cn; _/ w5 D% d6 Z* q& n9 ]
# r- {% B! W1 W0 ?- N. b
3.2 Nodejs 安装) A+ f; p- N% F- H' R
因为涉及 JS 的调试验证，所以除了 Python 环境外，你还需要Nodejs（ JS 的运行环境）和 WebStorm（IDE）。
3 ^; v- J( g% ?% B
2 D: g U: R6 N# E! Y* k; @( E
Nodejs 去官网下载安装包后直接一键安装即可，安装完毕后去控制台运行 node -- version，如果出现版本号即代表安装成功。WebStorm 安装完后需要激活，激活教程网上很多，大家自行搜索。它是 Jet Brains 的产品（和 PyCharm 是同一家公司），所以使用方式与 PyCharm 很类似。
3 L9 g9 q0 w- e8 {9 ^3 U0 X
) a4 s# M: j$ m f: d4 实战练习; S6 V4 t9 k: z5 K
接下来就带大家进行实战练习，这次我们爬取的对象是「企名片」网站：
* _% Z# c: _4 W7 a4 _. L1 ?2 xhttps://www.qimingpian.com/finosda/project/pinvestment3 Q1 T2 h6 @* ]( F1 {" }) @# t' e
& g) }8 ^: G" a4.1 网站分析
( J3 B3 D5 ?/ X0 ^$ O; N/ A 首先打开链接，点击 F12 查看网络请求面板。在 pinvestment 响应里可以看到是一个 JS 调用的代码，并没有我们想要的 HTML 代码，显示网页是由 JS 动态生成。6 Z- c% q5 r9 b4 q* H
0 {0 S1 N# r9 }5 M7 W5 [ 在点击 XHR，我们就可以看到一个 productListVip，这里面有个 encrypt_data 数据。参数内容像是一串 Base64 字符。既然网站对这个参数做了加密，说明它不想被爬取，所以可以做个假设：我们的目标数据就是 encrypt_data 参数里的内容。
% \5 B! }6 S8 t' _4 J
9 B' w/ c5 O+ D. V' | 接下来我们就要破解 encrypt_data。( W( u! ?: O; \0 Y
4.2 断点调试 JS 源码
- L ~1 A; h" N" R$ f9 T* e, ~3 o" V 打开开发者工具，点击 Sources 我们在 js 文件夹中就可以找到网页的 JS 代码，在右侧我们就可以进行断点调试。
9 P& j7 i7 l: @+ [
* ^0 ]' h, A$ c) ~+ u; z 在断点调试拦里有个 XHR/fetch Breakpoints 选择，而我们含有 encrypt_data 加密的参数正是一个 XHR 请求，所以我们点击+号，把 productlistVip 请求 url 添加进去。; l/ j+ \7 L, u# M
4 O; A7 s* Z6 {/ o7 e8 I
随后我们重新刷新网页，就可以一步步的调试找到可疑的地方。
7 U5 f. S) e" P3 Z8 G/ W小技巧：# J: o4 K L. j( R4 q4 X7 ~) H
1 花括号进行美化5 T6 k7 E+ v$ r, K/ r: O
7 H! d9 X5 v8 \9 q
点击左下角的花括号，可以把乱序的 JS 代码，变成有序的代码，看起来就非常的方便。9 d ?, u$ k9 Q* {7 {7 v
5 F3 ?4 a& R0 r6 l8 u2 G
0 @- w4 b' O$ i' z- q+ I# J3 t. E
2 控制台输出执行结果+ M6 f' x# t5 G2 q
如果你找到比较可疑的点，你可以选中可疑的代码段，点击右键有个 Evaluate selected 选项，它就会在控制台输出执行的结果。
- C/ z6 O. E7 p0 P: u# \( p
+ r5 s! }( F) r
" C5 L; X# T# [! e& \
8 K7 H, k2 H' K+ u$ @ 其实上图中执行 Object(d.a)(e.encrypt_data) 返回的内容就是我们需要的数据了。进到这个函数体里边，就能找到解密函数：其实上图中执行 Object(d.a)(e.encrypt_data) 返回的内容就是我们需要的数据了。进到这个函数体里边，就能找到解密函数：
: M. ^7 g# i: {" G4 c$ w
( ?* N1 R+ ?5 G" P- t& |7 E
function o(t) 就是我们需要的解密函数，可以看到它先调用 s 函数，传入了四个参数，除了a.a.decode(t) 外其他三个都是写死的，最后用 JSON.parse 转为 json 对象。( R3 {* m8 S- P9 O% f
然而，找到解密函数后，我们要做的不是去分析它函数内部做了什么，虽然可以研究它的解密算法然后用 Python 重写，但这样太复杂且没必要。因为我们可以用 PyExecJS 这个库，直接用 Python 调用并执行 js 代码。* e/ K$ A3 z, W& J0 Q
这时候，WebStorm 就派上用场了。新建一个 js 文件，把 function o里涉及的代码全部抠下来。然后执行 console.log 把执行结果打印出来。篇幅问题就只贴部分代码：$ \% o N; \( R: o! c( \" X
4 N( r. E7 s% s0 d m
b2 E+ b7 ~; N1 v6 J) i% |( A2 D
成功输出正确的数据，最后用 Python 去调用解密函数就行了。/ Q9 L+ o3 D& K# G& [* |9 T X
2 E7 p0 ] k. O. K1 @: S) P: C |
|
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2020-3-19 10:28:04
