能不能在原生 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 可以看到如下，绿色表示远程连接成功
前端开发的编译器在选择上还是很多的。在学校里，老师主要讲三个前端开发软件：
1、WebStorm
帮助编写HTML、CSS、Less、Sass和Stylus代码，并且支持Node.js和主流框架，如React、Angular、 Vue.js、Meteor等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。但是付费软件。
2、IntelliJ idea
idea是学校老师教得最多的一款软件，从学Java开始，除了eclipse和myeclipse之外，学校老师用的最广泛埋丛的Java编译器就是idea，而idea也能进行前端项目的游液运开发，idea是我用得最熟的一个编译软件。像一个完整的神梁前端网站，配置好jdk，tomcat，maven，数据库之后就可以在idea上进行搭建了。
3.Visual Studio Code
简称VScode，前端开发时期学习的第一款软件，当时学VScode的时候上的网课，老师用插件的时候一个没跟上，就跟不上了。总体感觉下来是插件库很丰富，而且内存占用不大，目前我身边用VScode的人是最多的。
下面是我在实习中接触到的前端开发工具：
notepad++
页面很简单，乍一看像是一个记事本，它也确实可以当记事本用。有很多特色插件可以使用，支持多种编程语言的语法高亮显示，具有代码折叠功能。
2、HBuilderX
HBuilderX是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写。是HBuilder下一代版本，具有轻便、适合vue框架的特点。
首先，进入微信小程序后台衡宏带，点击工具，选择生成小程序码在小程序码生成页面中，填写小程序的名称
点击“获取更多页面路径”，添写获取链接的绝袜微信号
最后，在微信中，进入小程序页面，点击咐芦右上角“三个点”选项，选择“复制本页面路径”即可。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）