1.前言时隔3年，重新接触手机h5页面开发。最后一次是高级实习。这次是混合开发，涉及到h5页面和nativeapp的交互。h5页面需要连接原生登录状态，调用原生app的接口，比如调用原生相机扫描二维码。不同于微信小程序的开发，微信提供了微信开发者工具用于本地开发，可以在本地模拟调用。我这边，每次都需要打包静态文件上传到服务器调试，很麻烦。原生应用加载在线h5时能运行本地代码吗？答案是肯定的。可以使用whistle等抓包工具拦截在线页面请求数据，然后响应本地代码。本文主要介绍抓包原理和抓包工具whistle的使用。二、抓包原理1、什么是抓包？抓包就是对网络传输中收发的数据包进行拦截、重发、编辑、转储等操作。通过抓包，您可以：分析网络问题、分析分析网络信息流、网络大数据、金融风控、检测网络入侵企图检测内外部用户滥用网络资源检测网络入侵的影响监控链路互联网宽带流量监控网络使用流量（包括内部用户、外部用户和系统）监控互联网和用户计算机的安全状态渗透和欺骗..复习计算机网络知识，数据在网络上以非常单位传输小框架。帧由一个叫做网络驱动程序的特定程序整形，然后通过网卡发送到网线，再通过网线到达目的机。在目标机器端执行相反的过程。接收端机器上的以太网捕获这些帧，告诉操作系统帧已经到达，并存储它。在收发过程中，可以使用抓包工具（Sniffer）进行抓包。作为前端开发者，通常会在应用层抓取HTTP/HTTPS数据包。2、HTTP/HTTPS抓包原理HTTP/HTTPS是应用层使用的通信协议，常见的应用层架构是客户端-服务器架构。运行在不同终端系统上的客户端程序和服务器程序如何相互通信？实际上，用操作系统术语来说，实际上是进程而不是程序进行通信，进程可以看作是运行在端系统上的程序。在Web应用程序中，客户端浏览器进程在会话中与服务器进程交换消息。浏览器进程需要知道接收进程的主机地址，以及目的主机中定义的接收进程的标识，即目的端口。大多数应用程序由成对的通信进程组成，每对进程中的两个进程相互发送消息。进程通过称为套接字的软件接口向网络发送消息和从网络接收消息。一个进程可以比作一个房子，它的套接字可以是它的门，套接字是应用层和传输层之间的端口。知道了两个进程的通信流程，我们如何抓包呢？举个生活中的例子，小明暗恋小文，写了一封情书，但他有点害羞，就请小文的好朋友小华帮忙送情书。这时候，小花可以负责小文和小明之间情书的递送。作为中介，她可以偷偷查看他们情书的内容。思路是设置一个中间进程负责抓包，目标进程之间的每一个session都要先和中间进程通信，然后再转发。(1)HTTP抓包原理在http标准中，并没有对通信终端进行认证的标准。对于服务器来说，只要它收到的HTTP请求报文格式符合规范，就会发送响应报文。客户端也是如此，它无法验证服务器的身份，比如它连接的主机是http://www.jecyu.com，但是由于中间节点的存在，最终连接的可能是http://www.jerry.com的主机。所以对于HTTP抓包，不需要做太多的处理，让中间人负责转发客户端和服务端的数据包即可。(2)HTTPS抓包原理HTTP是明文传输，容易受到中间人攻击，不安全。HTTPS的语义仍然是HTTP，只是在HTTP协议栈的http和tcp之间插入了安全层SSL/TSL。安全层采用对称加密对传输数据加密，非对称加密传输对称密钥，解决http数据未加密、无法验证身份、数据易篡改三大核心问题。HTTP+加密+认证+完整性保护=HTTPS身份验证的发布是通过验证服务器的证书来实现的，该证书由第三方机构（CA证书颁发机构）使用数字签名技术进行管理，包括创建证书、存储证书、更新证书，吊销证书。浏览器连接HTTPS网站时，服务器发送的不仅仅是服务器实体证书，而是一个证书链，但不包含根证书，会内嵌在Windows、Linux、macOS、Android、iOS等操作系统中.证书的验证分为两个步骤，证书颁发者的验证和服务器实体证书的验证。证书链验证：浏览器从服务器实体证书的上层证书（如B证书）中获取公钥来验证服务器实体证书的签名（签名由CA机构的私钥签名），验证成功继续，否则证书验证失败。浏览器从B证书的上层证书（如C证书）中获取公钥来验证B证书的签名。如果验证成功，则继续，否则证书验证失败。浏览器迭代验证每个证书的签名，最终找到自签名的根证书（颁发者和使用者是同一个人）。由于浏览器已经集成了根证书，因此可以完全信任根证书的公钥。签名。服务器实体证书校验：访问的域名信息是否与证书、日期、证书扩展名校验等一致。了解了证书校验之后，我们来看一下具体的https通信过程：首先，三次握手tcp建立连接，然后是非对称加密的握手过程。客户端发送一个随机数random1+支持的加密算法集。服务端收到信息返回选择一个加密算法+证书（含S_公钥）+random2client验证证书的有效性，并使用random1+random2生成pre-master-secure，通过server发送给server端公钥加密。收到pre-master-secure后，根据协议算法使用S_privatekey解密pre-master-secure，然后使用加密算法生成master-secure（对称加密密钥），然后发送给客户。客户端接收生成的master-secure，传输对称加密密钥，可以使用master-secure进行真正的数据对称加密传输。中间人如果要抓包，需要拦截客户端发送的包含证书的报文，伪装成服务器，将自己的证书发送给客户端，然后得到【客户端返回的报文包含symmetricencryptedcommunicationKeymessage]生成中间人和客户端之间对称加密的密钥。同样假装客户端，用服务器自己的非对称公钥加密【客户端返回的包含对称加密通信密钥的报文】发送给服务器，得到服务器生成的对称加密密钥。这样就建立了加密通信，中间人得到通信的数据密钥，可以查看和修改HTTPS通信报文。这里，客户端与中介的通信，以及中介与服务器的通信，都是正常建立HTTPS加密连接。最重要的步骤之一是验证浏览器的根证书。一个CA组织不可能签发不属于中介的域名证书，也不在客户的操作系统上。因此，只能将中介的根证书导入到客户端的操作系统中，才能在建立加密通信时完成对中介证书的验证。3、电脑如何抓取手机的数据包如果要通过电脑获取手机Web应用的数据包，根据前面的学习，需要中间人策略。在PC端建立一个服务器中间人进程，伪装成Web应用的目标服务器。手机端Web应用发送的请求数据，首先经过中间人，中间人进行拦截处理后，再发送给目标服务器。反之，目标服务器发送的数据包先经过中间人，中间人再响应给浏览器客户端。这里需要注意的是，无论是个人电脑PC还是手机，都需要连接到Internet网络，才能找到对方建立通信。一般来说，为了开发，在个人电脑本地启动的服务器进程是无法在公网访问的。一般是无线局域网，个人电脑和手机连接同一个路由器发出的Wi-Fi就可以相互通信。具体步骤：在PC本地启动一个server进程，监听一个端口如8899，手机连接同一个局域网，配置网络代理，指向PC的IP地址和8899端口。这样，手机上的所有网络通信将首先被阻止。转发到PC端的8899端口，即可对数据包进行分析处理。以访问youtuBe为例。例如，电脑使用【服务器软件】访问成功。立即访问youtuBe。三、抓包工具whistle1．什么是口哨？Whistle是一款免费的基于Node.js的跨平台抓包调试工具。它的主要特点是：完全跨平台：支持Mac、Windows等桌面系统，支持服务器等强大的命令行系统。：支持HTTP、HTTPS、SOCKS代理和反向代理支持捕获和修改HTTP、HTTPS、HTTP2、WebSocket、TCP请求支持重放和构造HTTP、HTTPS、HTTP2、WebSocket、TCP请求支持设置上游代理、PAC脚本、Hosts、延迟（限速）请求响应等支持查看远程页面的控制台日志和DOM节点支持使用Node开发插件扩展功能，也可以作为独立的npm包引用。操作简单：通过浏览器直接查看抓包和修改请求修改操作可以通过配置实现（类似于系统Hosts），支持分组管理。项目可以自带代理规则，一键配置到本地Whistle代理，也可以通过自定义插件简化操作。如何快速使用whistle先安装node，推荐使用nvm管理，全局安装whistle：npmi-gwhistle&w2start安装完成后，可以在电脑上设置全局代理，代理的端口为8899.w2proxy//设置全局代理w2proxyoff//关闭全局代理通过Browser访问http://127.0.0.1:8899/查看抓包、修改请求等如果你不想如需使用全局代理，可以根据需要安装SwitchyOmega插件为部分网站设置whistle代理。选择Whistle代理：设置Whistle代理：2.Whistle可以做很多事情。哨子可以做很多事情。以下为官网示意图：部分示例配置如下图所示：四、whistle实战案例1、原生app加载PC本地代码开发在原生app上已经通过h5域名加载网页，但是在本地开发的时候，又不想每次都走流水线或者在本地打包上传代码。需要将原生应用的请求代理到本地服务器。前提是wifi手机和电脑可以互访，也就是电脑抓包上面说的pc。因为我的web服务器是https应用，所以需要下载whistle提供的根证书，手动导入到手机中。点击HTTPS菜单，然后用手机扫描二维码，用手机浏览器打开下载，在手机证书中设置导入并设置信任。此时在手机上配置proxy指向PC的IP和whistle监听的端口，拦截电脑上的数据包。我本地的webpack启动的服务端应用的访问地址是：xxx.xxx.xxx.xxx:8080Whistle配置规则：#Rules#访问首页，进入本地的jecyu.com/webs/short-transporthttp:///xxx.xxx.xxx.xxx:8080?deptCode=755DL#Home路径#后续请求使用本地编码jecyu.comhttp://xxx.xxx.xxx.xxx:8080?deptCode=755DL其中，尝试访问本地应用时出错在nativeapp中“webpack会提示invalidhostheader”，解决方法是在devServer配置中添加：devServer:{allowedHosts:'all',}至此，nativeapp已经成功访问??PC端本地开发代码边。2.查看移动端DOM样式。Whistle可以通过内置的Weinre查看移动端的DOM样式。配置规则如下：#setweinrehttps://juejin.cnweinre://test在手机上再次访问juejin.cn网站，然后打开Weinre可以看到如下，绿色代表远程连接成功。您可以点击元素在手机端查看网页的DOM结构、样式等信息。也可以在console控制台执行代码，比如alert，移动端app上会弹出一个弹框。五、总结学习抓包是软件开发者必须掌握的调试技巧。本文首先介绍抓包的原理，然后介绍抓包工具whistle的使用。口哨非常强大。本文只是粗略介绍。更多使用技巧，大家可以查看官方文档whistle文档。
