|
|
现在越来越多的网站把数据的交互过程写在 JS 代码里，也就是说如果你只单单看前端网页的源码，你是无法得到具体的数据，你只能看到一大堆调用 JS 的前端代码。所以对于这类的网站，我们需要进入到具体的 JS 源码，理清关键代码，从而进行破解获取到我们想要的数据。
" M4 P- u' |6 y1 n/ ~: u) s* z. S5 g# C1 JS 基础语法学习
: `, e+ M. D! o4 m4 f0 w7 f& M 你只要有点编程基础，学习过一门编程语言，JS 的学习还是相对轻松，一个星期左右的时间就可以把 JS 所有的基础内容，全部学习一遍。如果你没有编程基础的话，JS 基础的内容学习起来也不是非常难，最多一个月的时间也能全部学完。
" R$ v+ R) ` g. D# `这里给大家推荐一个 JS 编程基础学习网站：
; l. d3 E5 d: q% W4 ]0 zhttps://www.runoob.com/js/js-tutorial.html& ~( k4 T" `* Q* x+ W3 x7 ~
$ T6 b+ t# ~: t _2 S0 D3 M
% l- p- [7 ^) t- I# T* z7 c
' L' b X, I b2 前端 JS 破解原理
! X7 C: ] B3 Q+ C 普通的网站数据的显示都是在网站的源码中就可看到，这类的网站你只要发个 requests 的请求，服务器就会把带有数据的源码返回给你，你就可以通过一些解析库进行解析了。但对于 JS 进行数据加密传输的网站，它就不同，比如下面这个网站：/ c2 y- d) }# h0 ?0 h' e# c9 ^
. G) |+ u6 ?+ p$ d" g
在控制面板可以看到获取到的数据是字母串，跟前端显示的数据完全不同，这就说明网站的数据是被加密了。新手在爬这类网站的时候，看到这里可能就会感到无奈。但大家不妨这样想，前端显示的数据是正常，所以后台一定会有某个地方对加密过的数据进行解密，而我们需要做的就是找到这个段解密的代码，按照它的逻辑进行传参就可以了。这也是我们破解 JS 代码的原理所在。
! |5 ^( x3 X: X3 C ~2 i+ U9 B0 C, x8 p
3 工具的使用
2 x+ H1 R W* K! E- i$ ^/ _4 l 讲完了原理之后，我先给大家介绍几个常用的工具。3.1 谷歌浏览器的开发者工具
+ I$ o1 g; j2 F 学爬虫一定要会使用谷歌浏览器的开发者工具，按谷歌浏览器按 F12 就可以弹出具体的页面。7 y7 v3 L/ N: i, F4 }. h2 I! `3 m/ m
; o2 L, l+ C2 _( ?8 y8 w: r! A7 H 在开发者页面中你可以看到网页的源码「Elementes」、控制台「Console」、网页源码「Sources」、网络请求面板「Network」等等。详细的教程可以去看下官方的文档：
, ]0 p1 e6 W: yhttps://developers.google.com/web/tools/chrome-devtools/?hl=zh-cn
: n) g9 p0 l" L9 ?4 O$ Y
) b b2 u2 F. v8 v9 P. y0 I3.2 Nodejs 安装
0 q, H& D; y6 Y7 x* N 因为涉及 JS 的调试验证，所以除了 Python 环境外，你还需要Nodejs（ JS 的运行环境）和 WebStorm（IDE）。
. i6 {6 V8 @/ t& o) m0 L9 N7 l6 s
5 ? Q8 G; ^. g" \
Nodejs 去官网下载安装包后直接一键安装即可，安装完毕后去控制台运行 node -- version，如果出现版本号即代表安装成功。WebStorm 安装完后需要激活，激活教程网上很多，大家自行搜索。它是 Jet Brains 的产品（和 PyCharm 是同一家公司），所以使用方式与 PyCharm 很类似。
8 w, y7 i8 Y' |" Q0 N6 h- ]9 M* B# ~! [. Q+ n0 s5 \2 w
4 实战练习
) a2 l! _0 J) t1 f D0 g. u9 ^接下来就带大家进行实战练习，这次我们爬取的对象是「企名片」网站：/ I' Q) E' t' t3 ^7 {' O0 M
https://www.qimingpian.com/finosda/project/pinvestment
9 E* `# I+ x7 V9 G$ t0 y+ y( c2 m" x( c% `* s
4.1 网站分析0 V- m; F9 K2 D: y" d% c, |
首先打开链接，点击 F12 查看网络请求面板。在 pinvestment 响应里可以看到是一个 JS 调用的代码，并没有我们想要的 HTML 代码，显示网页是由 JS 动态生成。. p5 \" C+ u' B; C0 Q
r0 l# W4 w' F
在点击 XHR，我们就可以看到一个 productListVip，这里面有个 encrypt_data 数据。参数内容像是一串 Base64 字符。既然网站对这个参数做了加密，说明它不想被爬取，所以可以做个假设：我们的目标数据就是 encrypt_data 参数里的内容。, x4 B" ?3 z7 P
% U4 s( u3 R+ g- M# S# M2 B 接下来我们就要破解 encrypt_data。
; G) P/ f# X; B1 O4.2 断点调试 JS 源码, o, G2 a( ]- e; T1 r
打开开发者工具，点击 Sources 我们在 js 文件夹中就可以找到网页的 JS 代码，在右侧我们就可以进行断点调试。- S" A( n5 l; f; E
' H9 }$ Z7 m9 P( P6 D
在断点调试拦里有个 XHR/fetch Breakpoints 选择，而我们含有 encrypt_data 加密的参数正是一个 XHR 请求，所以我们点击+号，把 productlistVip 请求 url 添加进去。
3 b7 Q G' [# I; n# p1 ]1 ?, X0 [( f8 p
4 g) f, U4 Q9 h7 G( C: [* V
随后我们重新刷新网页，就可以一步步的调试找到可疑的地方。
; N% l' M% q+ j/ b% U, k小技巧：
' s4 \" U$ Y! y% e( ?) F' @4 g1 花括号进行美化
5 x$ n* @/ b4 I% E. m( A7 m( V: o9 D7 E& Y
点击左下角的花括号，可以把乱序的 JS 代码，变成有序的代码，看起来就非常的方便。: m( H( w& o( O, D# I
3 B2 n9 L5 J/ N; S1 g3 E; ^
S0 c9 r3 ^6 ?2 Y) |2 控制台输出执行结果. G s( w$ y2 ]- W0 ^6 a' z: h3 S. y; H
如果你找到比较可疑的点，你可以选中可疑的代码段，点击右键有个 Evaluate selected 选项，它就会在控制台输出执行的结果。6 ?4 N% F, `1 L- ]; m. A8 L
9 L( |4 |1 @2 C W8 q
5 F7 J- y- e5 A, v2 |1 ?, p
I. j* |% Q5 K z9 a5 J 其实上图中执行 Object(d.a)(e.encrypt_data) 返回的内容就是我们需要的数据了。进到这个函数体里边，就能找到解密函数：其实上图中执行 Object(d.a)(e.encrypt_data) 返回的内容就是我们需要的数据了。进到这个函数体里边，就能找到解密函数：
v6 s% y9 [' K9 J, _, w
j' A. o- m$ R m function o(t) 就是我们需要的解密函数，可以看到它先调用 s 函数，传入了四个参数，除了a.a.decode(t) 外其他三个都是写死的，最后用 JSON.parse 转为 json 对象。3 M/ P9 Z) d( L- ^3 ]
然而，找到解密函数后，我们要做的不是去分析它函数内部做了什么，虽然可以研究它的解密算法然后用 Python 重写，但这样太复杂且没必要。因为我们可以用 PyExecJS 这个库，直接用 Python 调用并执行 js 代码。. ^& V& d7 ]. z: u& z" _; w
这时候，WebStorm 就派上用场了。新建一个 js 文件，把 function o里涉及的代码全部抠下来。然后执行 console.log 把执行结果打印出来。篇幅问题就只贴部分代码：
M. t" S G# t
1 S F$ z$ U1 Y/ R: t4 j0 i, }
" E0 [3 w0 N2 _7 E 成功输出正确的数据，最后用 Python 去调用解密函数就行了。9 K5 J) n3 V+ y2 c6 x
6 C7 i9 e5 m3 O e2 V4 p4 c# A |
|
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2020-3-19 10:28:04
