『壹』 前端抓手机抓包可以看页面样式吗
时隔 3 年，重新接触了移动端 h5 页面开发，上一次还是大四实习。这一次是 hybrid 开发，涉及到 h5 页面与原生 app 的交互，h5 页面需要与原生打通登录态，以及调用原生app 的接口，比如调用原生相机进行二维码扫描。跟微信小程序开发不同，本地开发时微信有提供微信开发者工具，可以本地模拟调用而我这边需要每次都打包静态文件，上传服务器才能调试，非常麻烦。
能不能在原生 app 加载线上 h5 时，跑本地的代码呢？答案是可以的，通过抓包工具比如 whistle 就可以做到拦截线上页面请求数据，再响应本地代码，本文主要讲述抓包的原理和抓包工具 whistle 使用。
1. 抓包的原理
1.1 什么是抓包？
抓包就是将网络传输发送与接收的数据包进行截获、重发、编辑、转存等操作，通过抓包可以：
分析网络问题
业务分析
分析网络信息流通量
网络大数据金融风险控制
探测企图入侵网络的攻击
探测由内部和外部的用户滥用网络资源
探测网络入侵后的影响
监测链接互让此联网宽频流量
监测网络使用流量（包括内部用户，外部用户和系统）
监测互联网和用户电脑的安全状态
渗透与欺骗
...
回顾下计算机网络知识，数据在网络上是以很小的帧的单位传输的，帧通过特定的称为网络驱动程序的程序进行成型，然后通过网卡发送到网线上，通过网线到达目的机器，在目的机器的一端执行相反的过程。接收端机器的以太网捕获到这些帧，并告诉操作系统帧已到达，然后对其进行存储。在这个传输和接收的过程，就可以使用抓包工具（Sniffers）进行抓包，作为前端开发者，通常是抓取应用层的 HTTP/HTTPS 的包。
1.2 HTTP/HTTPS 抓包原理
HTTP/HTTPS 是应用层使用的通信协议，常见的应用层体系结构是客户端-服务器体系。
对运行在不同端系统上的客户端程序和服务端程序是如何互相通信的么？实际上，在操作系统上的术语中，进行通信的实际上是进程而不是程序，一个进程可以被认为是运行在端系统中的一个程序。
在 web 应用程序中，一个客户浏览器进程与一台服务器进程进行会话交换报文。
浏览器进程需要知道接收进程的主机地址，以及定义在目的主机中的接收进程的标识符，也就是目的端口。
多数应用程序由通信进程对组成，每对中的两个进程互相发送报文。进程通过一个称为套接字的软件接口向网络发送报文和从网络接收报文。
进程可以类比一座房子，而它的套接字可以是它的门，套接字是应用层与运输层之间的端口。
知道了两个进程的通信流程，我们要怎么抓包呢？举一个生活中的例子，小明暗恋小雯，于是他写了一封情笑缺书，但他有点害羞，找了小雯的好朋友小花帮忙传递情书。这个时候，小花可以负责小雯与小明之间的情书传递，作为中间人，她可以偷偷查看他们的情书内容。
思路就是设置一个中间人进程负责抓包，每次目标进程之间的会话都先与中间人进程通信，再进行转发。
1.2.1 HTTP 抓包原理
在 http 标准中，没有对通信端身份验证的标准。对于服务器来说，它接收的 HTTP 请求报文只要格式符合规范碰滑辩，就发送响应报文。
对于客户端来说也是如此，它无法校验服务器的身份，比如它连接的 http://www.jecyu.com 的主机，但由于中间节点的存在，最终连接的可能是 http://www.jerry.com 的主机。
因此，对于 HTTP 抓包，无需做过多的处理，只需要让中间人负责转发客户端和服务端的数据包。
1.2.2 HTTPS 抓包原理
HTTP 是明文传输，容易受到中间人攻击，不安全。
HTTPS 语义仍然是 HTTP，只不过是在 HTTP 协议栈中 http 与 tcp 之间插入安全层 SSL/TSL。
安全层采用对称加密的方式加密传输数据和非对称加密的方式来传输对称密钥，解决 http 数据没有加密、无法验证身份、数据容易纂改三个核心问题。
HTTP + 加密 + 认证 + 完整性保护 = HTTPS
其中验证身份问题是通过验证服务器的证书来实现的，证书是第三方组织（CA 证书签发机构）使用数字签名技术管理的，包括创建证书、存储证书、更新证书、撤销证书。
浏览器连接至一个 HTTPS 网站，服务器发送的不仅仅只是服务器实体证书，而是一个证书链，但不包含根证书，根证书会被内嵌在 Windows, Linux, macOS, Android, iOS 这些操作系统里。
其中校验证书分为两步，证书的签发者校验和服务器实体证书校验
1、证书链校验：
1.1 浏览器从服务器实体证书的上一级证书（比如 B 证书）获取公钥，用来校验服务器实体证书的签名（签名是通过 CA 机构的私钥签名的），校验成功则继续，否则证书校验失败。
1.2 浏览器从 B 证书的上一级证书（比如 C 证书）获取公钥，用来校验 B 证书的签名，
校验成功则继续，否则证书校验失败。
1.3 浏览器迭代校验每张证书的签名，最后会找到自签名的根证书（签发者和使用者是同一个人），由于浏览器已经集成了根证书，可以充分信任根证书的公钥，完成最后的签名。
2、服务器实体证书校验：访问的域名信息是否与证书一致、日期、证书扩展校验等。
了解完证书校验后，我们来看看具体的 https 通信流程：
首先是 tcp 的三次握手建立连接
接着是非对称加密的握手过程
client 发送随机数 random1 + 支持的加密算法集合
server 收到信息，返回选择的一个加密算法+ 证书 （包含S_公钥） + random2
client 验证证书有效性，并用 random1 + random2 生成 pre-master-secure，通过服务端公钥加密发送给 server
server 收到 pre-master-secure，根据约定的算法使用S_私钥对 pre-master-secure 解密，
然后用加密算法生成 master-secure（对称加密的密钥），然后发送给 client
client 收到生成的 master-secure，对称加密密钥传输完毕
最后，就可以使用 master-secure 进行真正的数据对称加密传输。
中间人想要抓包，需在 HTTPS 加密通信之前：
截取客户端发送的包含证书的报文，伪装成服务端，把自己的证书发给客户端，然后拿到【客户端返回的包含对称加密通信密钥的报文】，生成中间人与客户端对称加密的密钥。
同样伪装成客户端，以服务端自己的非对称公钥加密【客户端返回的包含对称加密通信密钥的报文】发给服务端，获得服务端生成的对称加密密钥。
这样一来，加密通信建立完成，而中间人拿到了通信的数据密钥，可以查看、修改 HTTPS 的通信报文。
这里客户端与中间人通信、中间人与服务端通信，都是正常建立了 HTTPS 加密连接的。
其中很重要的一步是浏览器的根证书校验，CA 机构不可能随便给一个中间人签发不属于它的域名证书，也就不在客户端的操作系统上了，因此只能把中间人的根证书，导入到客户端的操作系统了，以此完成建立加密通信时对中间人证书的验证。
1.3 电脑如何抓手机的包
要想通过电脑端获取手机 Web 应用的数据包，根据前面所学，就需要中间人策略。
PC 端建立一个服务器中间人进程，伪装为 web 应用的目标服务器。手机端 web 应用发送的请求数据先经过中间人，中间人进行拦截处理再发送给目标服务器。反过来，目标服务器发送的数据包先通过中间人，再由中间人响应给浏览器客户端。
这里要注意的是，无论是个人电脑PC，还是移动端手机，都需要接入互联网网络，可以相互找到对方才能建立通信。
一般对开发来说，个人电脑本地起的服务器进程，在公网上是访问不到的。一般是无线局域网，个人电脑与手机端连接同一个路由器发出的 Wi-Fi，就可以相互通信。
具体步骤：
在 PC 电脑本地起一个服务器进程，监听一个端口比如 8899
在手机上连接同一个局域网，配置网络代理，指向 PC 端的 IP 地址和 8899 端口
这样一来，手机上所有的网络通信都会被先转发到 PC 端的 8899 端口，就可以对数据包进行分析处理
拿访问 youtuBe 来说，比如电脑已经使用【服务器软件】成功访问，此时只要手机配置代理指向电脑 ip 地址和指定端口，手机就可以同样访问 youtuBe了。
2. 抓包工具 whistle
2.1 whistle 是什么
Whistle 是基于 Node 实现的跨平台抓包免费调试工具，其主要特点：
1、完全跨平台：支持 Mac、Windows 等桌面系统，且支持服务端等命令行系统
2、功能强大：
支持作为 HTTP、HTTPS、SOCKS 代理及反向代理
支持抓包及修改 HTTP、HTTPS、HTTP2、WebSocket、TCP 请求
支持重放及构造 HTTP、HTTPS、HTTP2、WebSocket、TCP 请求
支持设置上游代理、PAC 脚本、Hosts、延迟（限速）请求响应等
支持查看远程页面的 console 日志及 DOM 节点
支持用 Node 开发插件扩展功能，也可以作为独立 npm 包引用
3、操作简单
直接通过浏览器查看抓包、修改请求
所有修改操作都可以通过配置方式实现（类似系统 Hosts），并支持分组管理
项目可以自带代理规则并一键配置到本地 Whistle 代理，也可以通过定制插件简化操作
如何快速使用 whistle
先安装 node，建议用 nvm 管理
全局安装 whistle
1
npm i -g whistle & w2 start
安装后，可以在电脑上设置全局代理，代理的端口为 8899.
1
2
3
w2 proxy // 设置全局代理
w2 proxy off // 关闭全局代理
就可以通过浏览器访问 http://127.0.0.1:8899/ 查看抓包、修改请求等。
如果你不想使用全局代理，就可以安装 SwitchyOmega 插件，按需对某些网站设置 whistle 代理。
选择 Whistle 代理
设置 Whistle 代理
2.2 whistle 可以做的事情
whistle 可以做的事情很多，以下是官网图：
一些例子配置如下图所示：
3. whistle 实战案例
3.1 原生 app 加载 PC本地代码开发
在原生 app 上已经通过 h5 域名加载了 web 页面，但是本地开发时不想每次都走流水线或本地打包上传代码。
需要把原生 app 的请求代理到本地服务器上来，前提条件是 wifi 手机与电脑可相互访问，也就是前面提到的电脑抓 pc 的包。
因为我的 web 服务端是 https 应用，因此需要下载 whistle 提供的根证书，手动导入到手机上。
点击 HTTPS 菜单，然后使用手机扫描二维码，使用手机浏览器打开即可下载，在手机证书中设置进行导入并且设置信任。
此时，再在手机上配置代理指向 PC 电脑的 IP和 whistle 监听的端口即可在电脑上截获数据包。
我本地webpack 启动的服务器应用访问地址为：xxx.xxx.xxx.xxx:8080
whistle 的配置规则：
1
2
3
4
5
6
7
8
9
# Rules
# 访问首页走本地
jecyu.com/webs/short-transport http://xxx.xxx.xxx.xxx:8080?deptCode=755DL # 首页路径
# 后续的请求都使用本地代码
jecyu.com http://xxx.xxx.xxx.xxx:8080?deptCode=755DL
其中试过在原生 app 访问本地应用时出现错误“ webpack 会提示 invalid host header”，解决方案是在 devServer 配置添加即可：
1
2
3
4
5
devServer: {
allowedHosts: 'all',
}
至此，成功让原生 app 访问PC 端本地的开发代码。
3.2 查看移动端的 DOM 样式
Whistle 能够通过内置的 Weinre 去实现查看移动端的 DOM 样式，配置规则如下
1
2
3
# 设置 weinre
https://juejin.cn weinre://test
手机上重新访问 juejin.cn 网站，然后打开 weinre 可以看到如下，绿色表示远程连接成功
『贰』 如何通过wireshark进行抓包的分析
启动wireshark后，选择工具栏中的快捷键（红色标记的按钮）即可Start a new live capture。
主界面上也有一个interface list（如下图红色标记1），列出了系统中安装的网卡，选择其中一个可以接收数据的的网卡也可以开始抓包。
在启动时候也许会遇到这样的问题：弹出一个对话框说 NPF driver 没有启动，无法抓包。在win7或Vista下找到C: \system\system32下的cmd.exe 以管理员身份运行，然后输入 net start npf，启动NPf服务。
重新启动wireshark就可以抓包了。
抓包之前也可以做一些设置，如上红色图标记2，点击后进入设置对话框，具体设置如下：
Interface：指定在哪个接口（网卡）上抓包（系统会自动选择一块网卡）。
Limit each packet：限制每个包的大小，缺省情况不限制。
Capture packets in promiscuous mode：是否打开混杂模式。如果打开，抓 取所有的数据包。一般情况下只需要监听本机收到或者发出的包，因此应该关闭这个选项。
Filter：过滤器。只抓取满足过滤规则的包。
File：可输入文件名称将抓到的包写到指定的文件中。
Use ring buffer： 是否使用循环缓冲。缺省情况下不使用，即一直抓包。循环缓冲只有在写文件的时候才有效。如果使用了循环缓冲，还需要设置文件的数目，文件多大时回卷。
Update list of packets in real time：如果复选框被选中，可以使每个数据包在被截获时就实时显示出来，而不是在嗅探过程结束之后才显示所有截获的数据包。
单击“OK”按钮开始抓包，系统显示出接收的不同数据包的统计信息，单击“Stop”按钮停止抓包后，所抓包的分析结果显示在面板中，如下图所示：
为了使抓取的包更有针对性，在抓包之前，开启了QQ的视频聊天，因为QQ视频所使用的是UDP协议，所以抓取的包大部分是采用UDP协议的包。
3、对抓包结果的说明
wireshark的抓包结果整个窗口被分成三部分：最上面为数据包列表，用来显示截获的每个数据包的总结性信息；中间为协议树，用来显示选定的数据包所属的协议信息；最下边是以十六进制形式表示的数据包内容，用来显示数据包在物理层上传输时的最终形式。
使用wireshark可以很方便地对截获的数据包进行分析，包括该数据包的源地址、目的地址、所属协议等。
上图的数据包列表中，第一列是编号（如第1个包），第二列是截取时间（0.000000），第三列source是源地址（115.155.39.93），第四列destination是目的地址（115.155.39.112），第五列protocol是这个包使用的协议（这里是UDP协议），第六列info是一些其它的信息，包括源端口号和目的端口号（源端口：58459，目的端口：54062）。
中间的是协议树，如下图：
通过此协议树可以得到被截获数据包的更多信息，如主机的MAC地址（Ethernet II）、IP地址（Internet protocol）、UDP端口号（user datagram protocol）以及UDP协议的具体内容（data）。
最下面是以十六进制显示的数据包的具体内容，如图：
这是被截获的数据包在物理媒体上传输时的最终形式，当在协议树中选中某行时，与其对应的十六进制代码同样会被选中，这样就可以很方便的对各种协议的数据包进行分析。
4、验证网络字节序
网络上的数据流是字节流，对于一个多字节数值（比如十进制1014 = 0x03 f6），在进行网络传输的时候，先传递哪个字节，即先传递高位“03”还是先传递低位“f6”。 也就是说，当接收端收到第一个字节的时候，它是将这个字节作为高位还是低位来处理。
下面通过截图具体说明：
最下面是物理媒体上传输的字节流的最终形式，都是16进制表示，发送时按顺序先发送00 23 54 c3 …00 03 f6 …接收时也按此顺序接收字节。
选中total length：1014， 它的十六进制表示是0x03f6， 从下面的蓝色选中区域可以看到，03在前面，f6在后面，即高字节数据在低地址，低字节数据在高地址（图中地址从上到下从左到右依次递增），所以可知，网络字节序采用的是大端模式。
『叁』 怎么抓包网页发给手机的验证码
抓不到，因为验证码是服务器端发给手机的，不是页面端。PC抓包可以试试基于进程抓包的软件QPA
『肆』 网络验证转本地验证
我刚找到一个教程，发给你，一起学习。
http://www.52pojie.cn/thread-169854-1-1.html