Nach 3 Jahren kam ich wieder mit der mobilen h5-Seitenentwicklung in Berührung. Das letzte Mal war ein Praktikum in meinem Abschlussjahr. Diesmal handelt es sich um eine Hybridentwicklung, die die Interaktion zwischen der h5-Seite und der nativen App umfasst. Die h5-Seite muss den Anmeldestatus mit der nativen App öffnen und die Schnittstelle der nativen App aufrufen, z. B. die native Kamera aufrufen Scannen Sie den QR-Code. Anders als bei der Entwicklung von WeChat-Miniprogrammen bietet WeChat WeChat-Entwicklertools für die lokale Entwicklung, die lokal simuliert und aufgerufen werden können. Ich muss jedoch jedes Mal statische Dateien packen und zum Debuggen auf den Server hochladen, was sehr mühsam ist.
Kann ich lokalen Code ausführen, wenn die native App online h5 lädt? Die Antwort lautet: Ja. Sie können Paketerfassungstools wie Whistle verwenden, um Online-Seitenanforderungsdaten abzufangen und dann auf lokalen Code zu reagieren. In diesem Artikel werden hauptsächlich das Prinzip der Paketerfassung und die Verwendung des Paketerfassungstools Whistle beschrieben.
1. Das Prinzip der Paketerfassung
1.1 Was ist Paketerfassung?
Paketerfassung dient dem Abfangen, erneuten Senden, Bearbeiten, Übertragen und anderen Vorgängen an den während der Netzwerkübertragung gesendeten und empfangenen Datenpaketen. Durch Paketerfassung können Sie:
Netzwerkprobleme analysieren
Geschäftsanalyse
Analysieren Sie den Informationsfluss im Netzwerk.
-
Big-Data-Finanzrisikokontrolle im Netzwerk Einbrüche
Überwachen Sie den Link-Internet-Breitbandverkehr
Überwachen Sie den Netzwerknutzungsverkehr (einschließlich interner Benutzer, externer Benutzer und Systeme)
Überwachen Sie den Sicherheitsstatus des Internets und der Benutzercomputer
-
Eindringung und Täuschung
..
Daten werden im Netzwerk in sehr kleinen Einheiten von Frames übertragen. Die Frames werden von einem bestimmten Programm, einem sogenannten Netzwerktreiber, geformt Durchgeleitet Die Netzwerkkarte sendet die Daten an das Netzwerkkabel, erreicht den Zielcomputer über das Netzwerkkabel und führt den umgekehrten Vorgang an einem Ende des Zielcomputers aus. Das Ethernet des empfangenden Computers erfasst diese Frames, teilt dem Betriebssystem mit, dass der Frame angekommen ist, und speichert ihn dann. Während dieses Übertragungs- und Empfangsprozesses können Sie Paketerfassungstools (Sniffer) verwenden, um Pakete zu erfassen. Als Front-End-Entwickler erfassen Sie HTTP/HTTPS-Pakete normalerweise auf der Anwendungsebene.
-
1.2 HTTP/HTTPS-Paketerfassungsprinzip
- HTTP/HTTPS ist das von der Anwendungsschicht verwendete Kommunikationsprotokoll. Die gemeinsame Architektur der Anwendungsschicht ist das Client-Server-System. Wie kommunizieren Client-Programme und Server-Programme, die auf verschiedenen Systemen laufen, miteinander? Tatsächlich ist es in Bezug auf das Betriebssystem tatsächlich ein
Prozess, der kommuniziert, und nicht ein Programm. Ein Prozess kann als ein Programm betrachtet werden, das auf dem Endsystem ausgeführt wird.
In einer Webanwendung tauscht ein Client-Browserprozess Nachrichten mit einem Serverprozess aus.
帧的单位传输的，帧通过特定的称为网络驱动程序的程序进行成型，然后通过网卡发送到网线上，通过网线到达目的机器，在目的机器的一端执行相反的过程。接收端机器的以太网捕获到这些帧，并告诉操作系统帧已到达，然后对其进行存储。在这个传输和接收的过程，就可以使用抓包工具（Sniffers）进行抓包，作为前端开发者，通常是抓取应用层的 HTTP/HTTPS 的包。
1.2 HTTP/HTTPS 抓包原理
HTTP/HTTPS 是应用层使用的通信协议，常见的应用层体系结构是客户端-服务器体系。
对运行在不同端系统上的客户端程序和服务端程序是如何互相通信的么？实际上，在操作系统上的术语中，进行通信的实际上是进程而不是程序，一个进程可以被认为是运行在端系统中的一个程序。
在 web 应用程序中，一个客户浏览器进程与一台服务器进程进行会话交换报文。
浏览器进程需要知道接收进程的主机地址，以及定义在目的主机中的接收进程的标识符，也就是目的端口。
多数应用程序由通信进程对组成，每对中的两个进程互相发送报文。进程通过一个称为套接字的软件接口向网络发送报文和从网络接收报文。
进程可以类比一座房子，而它的套接字可以是它的门，套接字是应用层与运输层之间的端口。
知道了两个进程的通信流程，我们要怎么抓包呢？举一个生活中的例子，小明暗恋小雯，于是他写了一封情书，但他有点害羞，找了小雯的好朋友小花帮忙传递情书。这个时候，小花可以负责小雯与小明之间的情书传递，作为中间人，她可以偷偷查看他们的情书内容。
思路就是设置一个中间人进程负责抓包，每次目标进程之间的会话都先与中间人进程通信，再进行转发。
1.2.1 HTTP 抓包原理
在 http 标准中，没有对通信端身份验证的标准。对于服务器来说，它接收的 HTTP 请求报文只要格式符合规范，就发送响应报文。
对于客户端来说也是如此，它无法校验服务器的身份，比如它连接的 http://www.jecyu.com 的主机，但由于中间节点的存在，最终连接的可能是 http://www.jerry.comDer Browserprozess muss die Hostadresse des empfangenden Prozesses und die im Zielhost definierte Kennung des empfangenden Prozesses kennen, bei der es sich um den Zielport handelt.
Die meisten Anwendungen bestehen aus Paaren kommunizierender Prozesse, wobei die beiden Prozesse in jedem Paar einander Nachrichten senden. Ein Prozess sendet Nachrichten an das Netzwerk und empfängt Nachrichten vom Netzwerk über eine Softwareschnittstelle, die als Socket bezeichnet wird.
Ein Prozess kann mit einem Haus verglichen werden, und sein Socket kann seine Tür sein. Socket ist der Port zwischen der Anwendungsschicht und der Transportschicht.
Wissen Wie erfassen wir die Pakete, nachdem wir den Kommunikationsprozess zwischen den beiden Prozessen verstanden haben? Um ein Beispiel aus dem Leben zu nennen: Xiao Ming war in Xiao Wen verknallt, also schrieb er einen Liebesbrief, war aber etwas schüchtern und bat Xiao Wens guten Freund Xiao Hua, ihm bei der Überbringung des Liebesbriefs zu helfen. Zu diesem Zeitpunkt kann Xiaohua für die Zustellung von Liebesbriefen zwischen Xiaowen und Xiaoming verantwortlich sein. Als Mittelsmann kann sie den Inhalt ihrer Liebesbriefe heimlich einsehen.
🎜Die Idee besteht darin, einen Zwischenhändlerprozess einzurichten, um Pakete zu erfassen. Jede Sitzung zwischen den Zielprozessen kommuniziert zunächst mit dem Zwischenhändlerprozess und leitet sie dann weiter. 🎜🎜
🎜
🎜1.2.1 HTTP-Paketerfassungsprinzip🎜🎜🎜Im HTTP-Standard gibt es keinen Standard für die Authentifizierung am Ende der Kommunikation. Solange das Format der empfangenen HTTP-Anforderungsnachricht der Spezifikation entspricht, sendet der Server eine Antwortnachricht. 🎜🎜Das Gleiche gilt für den Client. Er kann die Identität des Servers nicht überprüfen, z. B. des Hosts, mit dem er eine Verbindung herstellt http://www.jecyu.com, aber aufgrund der Existenz des Zwischenknoten, der schließlich eine Verbindung herstellt. Möglicherweise handelt es sich um den Host von http://www.jerry.com. 🎜🎜Für die HTTP-Paketerfassung ist daher kein übermäßiger Verarbeitungsaufwand erforderlich. Sie müssen lediglich den Mittelsmann für die Weiterleitung der Datenpakete des Clients und des Servers verantwortlich machen. 🎜🎜🎜1.2.2 HTTPS-Paketerfassungsprinzip🎜🎜🎜HTTP ist eine Klartextübertragung, die anfällig für Man-in-the-Middle-Angriffe und nicht sicher ist. 🎜
HTTPS-Semantik ist immer noch HTTP, aber zwischen http und TCP wird eine Sicherheitsschicht in den HTTP-Protokollstapel eingefügt SSL/TSL.
Die Sicherheitsschicht verwendet symmetrische Verschlüsselung zum Verschlüsseln von Übertragungsdaten und asymmetrische Verschlüsselung zum Übertragen symmetrischer Schlüssel, wodurch drei Kernprobleme gelöst werden: HTTP-Daten werden nicht verschlüsselt, die Identität kann nicht überprüft werden und Daten sind leicht zu ändern.
HTTP + Verschlüsselung + Authentifizierung + Integritätsschutz = HTTPS
Das Problem der Identitätsüberprüfung wird durch die Überprüfung des Serverzertifikats gelöst, das von einer Drittorganisation (CA-Zertifikatsaussteller) mithilfe digitaler Signaturtechnologie verwaltet wird. Dazu gehören das Erstellen von Zertifikaten, das Speichern von Zertifikaten, das Aktualisieren von Zertifikaten und das Widerrufen von Zertifikaten.
Wenn der Browser eine Verbindung zu einer HTTPS-Website herstellt, sendet der Server nicht nur das Server-Entitätszertifikat, sondern eine Zertifikatskette, enthält jedoch nicht das Stammzertifikat. Das Stammzertifikat wird in Windows, Linux, macOS eingebettet. Android, In Betriebssystemen wie iOS.
Die Zertifikatsüberprüfung ist in zwei Schritte unterteilt: die Überprüfung des Zertifikatausstellers und die Überprüfung der Serverentitätszertifikate
1. Zertifikatskettenüberprüfung:
1.1 Der Browser beginnt auf der oberen Ebene des Serverentitätszertifikats Das Zertifikat (z. B. das B-Zertifikat) ruft den öffentlichen Schlüssel ab und verwendet ihn zur Überprüfung der Signatur des Serverentitätszertifikats (die Signatur wird durch den privaten Schlüssel der CA-Organisation signiert). Wenn die Überprüfung erfolgreich ist, wird die Zertifikatsüberprüfung fortgesetzt scheitert.
1.2 Der Browser erhält den öffentlichen Schlüssel vom übergeordneten Zertifikat von Zertifikat B (z. B. Zertifikat C), um die Signatur von Zertifikat B zu überprüfen.
Wenn die Überprüfung erfolgreich ist, fahren Sie fort, andernfalls die Zertifikatsüberprüfung scheitert.
- 1.3 Der Browser überprüft iterativ die Signatur jedes Zertifikats und findet schließlich das selbstsignierte Stammzertifikat (der Aussteller und der Benutzer sind dieselbe Person). Da der Browser das Stammzertifikat integriert hat, kann er der Veröffentlichung vollständig vertrauen den Root-Zertifikatsschlüssel, um die endgültige Signatur abzuschließen.
2. Überprüfung des Server-Entitätszertifikats: ob die Informationen zum abgerufenen Domänennamen mit dem Zertifikat, dem Datum, der Überprüfung der Zertifikatserweiterung usw. übereinstimmen.
Nachdem wir die Zertifikatsüberprüfung verstanden haben, werfen wir einen Blick auf den spezifischen https-Kommunikationsprozess:
Zunächst erfolgt der Drei-Wege-Handshake von TCP zum Herstellen der Verbindung
Dann folgt der asymmetrische Verschlüsselungs-Handshake-Prozess
Client sendet Zufallszahl random1 + unterstützter Verschlüsselungsalgorithmus eingestellt
Server empfängt die Informationen und sendet einen ausgewählten Verschlüsselungsalgorithmus + Zertifikat zurück (einschließlich S_public Key) + random2
-
Client überprüft die Gültigkeit des Zertifikats und verwendet Random1 + Random2, generiert Pre-Master-Secure und sendet es über die Server-Public-Key-Verschlüsselung an den Server. Entschlüsselt
Pre-Master-Secure , und verwendet dann den Verschlüsselungsalgorithmus zum Generieren master-secure (symmetrisch verschlüsselter Schlüssel) und dann an den Client senden
- master-secure
, die Übertragung des symmetrischen Verschlüsselungsschlüssels ist abgeschlossen
Schließlich können Sie - master verwenden -sicher
für echte datensymmetrische Verschlüsselungsübertragung.
- Wenn der Mittelsmann Pakete abfangen möchte, muss er dies vor der HTTPS-verschlüsselten Kommunikation tun:
Fangen Sie die vom Client gesendete Nachricht mit dem Zertifikat ab, geben Sie sich als Server aus und senden Sie sein Zertifikat an den Client, und dann get Erhalten Sie in der [Nachricht, die den vom Client zurückgegebenen symmetrischen Verschlüsselungskommunikationsschlüssel enthält] den Schlüssel für die symmetrische Verschlüsselung zwischen dem Mittelsmann und dem Client.
gibt auch vor, der Client zu sein, verschlüsselt [die Nachricht, die den vom Client zurückgegebenen symmetrischen Verschlüsselungskommunikationsschlüssel enthält] mit dem eigenen asymmetrischen öffentlichen Schlüssel des Servers, sendet ihn an den Server und erhält den vom Server generierten symmetrischen Verschlüsselungsschlüssel .
Auf diese Weise wird die verschlüsselte Kommunikation hergestellt, und der Mittelsmann erhält den Kommunikationsdatenschlüssel und kann HTTPS-Kommunikationsnachrichten anzeigen und ändern.
Hier kommuniziert der Client mit dem Mittelsmann und der Mittelsmann kommuniziert mit dem Server, die alle normalerweise HTTPS-verschlüsselte Verbindungen herstellen.
- Einer der wichtigsten Schritte ist
die Überprüfung des Stammzertifikats des Browsers
. Es ist für die CA-Organisation unmöglich, einfach ein Domänennamenzertifikat auszustellen, das nicht zu einem Vermittler gehört und nicht auf dem Daher können Sie Sie können nur das Stammzertifikat des Zwischenhändlers in das Betriebssystem des Kunden importieren
, um die Überprüfung des Zwischenhändlerzertifikats beim Aufbau einer verschlüsselten Kommunikation abzuschließen.
1.3 So ergattern Sie Mobilfunkpakete mit einem Computer
Wenn Sie die Datenpakete mobiler Webanwendungen über den Computer erhalten möchten, benötigen Sie nach dem, was Sie zuvor gelernt haben, eine Zwischenhändlerstrategie. Erstellen Sie einen Server-Middleman-Prozess auf der PC-Seite und geben Sie vor, der Zielserver der Webanwendung zu sein. Die von der mobilen Webanwendung gesendeten Anfragedaten durchlaufen zunächst den Mittelsmann, der sie abfängt, verarbeitet und dann an den Zielserver sendet. Die vom Zielserver gesendeten Datenpakete durchlaufen wiederum zunächst den Mittelsmann, und dann antwortet der Mittelsmann dem Browser-Client.
Hier ist zu beachten, dass unabhängig davon, ob es sich um einen PC oder ein Mobiltelefon handelt, diese mit dem Internet verbunden sein müssen und sich gegenseitig finden müssen, um eine Kommunikation herzustellen.
Im Allgemeinen ist für die Entwicklung der lokal auf dem PC gestartete Serverprozess im öffentlichen Netzwerk nicht zugänglich. Im Allgemeinen handelt es sich um ein WLAN. Ein PC und ein Mobiltelefon können miteinander kommunizieren, indem sie sich mit dem vom selben Router gesendeten WLAN verbinden.
Spezifische Schritte:
Starten Sie einen Serverprozess lokal auf dem PC und hören Sie auf einen Port wie 8899.
Verbinden Sie sich mit demselben LAN auf dem Mobiltelefon, konfigurieren Sie den Netzwerk-Proxy und zeigen Sie auf den IP-Adresse des PCs und Port 8899
Auf diese Weise wird die gesamte Netzwerkkommunikation des Mobiltelefons zunächst an Port 8899 des PCs weitergeleitet und die Datenpakete können analysiert und verarbeitet werden
Zum Beispiel: Beim Zugriff auf YouTube hat der Computer beispielsweise [Serversoftware] verwendet. Zu diesem Zeitpunkt kann das Mobiltelefon auch auf YouTube zugreifen, solange das Mobiltelefon den Proxy so konfiguriert, dass er auf die IP-Adresse des Computers und den angegebenen Port verweist .
2. Paketerfassungstool whistle
2.1 Was ist whistle? , Windows und andere Desktop-Systeme und unterstützt Befehlszeilensysteme wie Server. HTTPS-, HTTP2-, WebSocket- und TCP-Anfragen
Unterstützt die Wiedergabe und Erstellung von HTTP-, HTTPS-, HTTP2-, WebSocket- und TCP-Anfragen
Unterstützt die Einrichtung von Upstream-Proxy, PAC-Skript, Hosts, verzögerter (Geschwindigkeitsbegrenzung) Anforderungsantwort usw.
-
Unterstützt Anzeigen des Konsolenprotokolls und des DOM-Knotens der Remote-Seite
-
Unterstützt die Verwendung von Node zum Entwickeln von Plug-in-Erweiterungsfunktionen und kann auch als unabhängiges npm-Paket referenziert werden
-
3
Paketerfassung und Änderungsanfragen direkt über den Browser anzeigen
Alle Änderungsvorgänge können durch Konfiguration (ähnlich wie bei System-Hosts) und Supportgruppenverwaltung implementiert werden.
Projekte können ihre eigenen Proxy-Regeln mitbringen und diese konfigurieren mit einem Klick zum lokalen Whistle-Proxy, oder sie können den Betrieb auch durch benutzerdefinierte Plug-Ins vereinfachen Whistle global installieren
npm i -g whistle & w2 start
Nach dem Login kopieren
Nach der Installation können Sie einen globalen Proxy auf dem Computer festlegen, der Proxy-Port ist 8899.
w2 proxy // 设置全局代理
w2 proxy off // 关闭全局代理
Nach dem Login kopieren
Sie können auf http://127.0.0.1:8899/ zugreifen über Ihren Browser, um Paketerfassungen, Änderungsanfragen usw. anzuzeigen. 
SwitchyOmega installieren und bei Bedarf Whistle-Proxys für bestimmte Websites festlegen.
Whistle-Proxy einrichten
-
2.2 Dinge, die Whistle bewirken kann
Hier gibt es viele Dinge zu tun ist das offizielle Website-Bild:
http://127.0.0.1:8899/ 查看抓包、修改请求等。
如果你不想使用全局代理，就可以安装 SwitchyOmega
Einige Beispielkonfigurationen sind in der folgenden Abbildung dargestellt:
3. Praktischer Fall der Pfeife
- 3.1 Native App lädt die lokale Codeentwicklung auf den PC
Die Webseite wurde über h5 geladen Wenn Sie jedoch lokal entwickeln, möchten Sie nicht jedes Mal das Fließband oder das Paket durchlaufen und den Code lokal hochladen.
Sie müssen die Anfrage der nativen App an den lokalen Server weiterleiten. Voraussetzung ist, dass das WLAN-Telefon und der Computer aufeinander zugreifen können, d. h. der Computer erfasst das zuvor erwähnte PC-Paket. 
Da es sich bei meinem Webserver um eine https-Anwendung handelt, muss ich das von whistle bereitgestellte Stammzertifikat herunterladen und manuell auf mein Telefon importieren. Klicken Sie auf das HTTPS-Menü, scannen Sie dann mit Ihrem Mobiltelefon den QR-Code, öffnen Sie ihn mit Ihrem mobilen Browser zum Herunterladen, richten Sie den Import ein und setzen Sie Vertrauen in das Mobiltelefonzertifikat.
此时，再在手机上配置代理指向 PC 电脑的 IP和 whistle 监听的端口即可在电脑上截获数据包。
我本地webpack 启动的服务器应用访问地址为：xxx.xxx.xxx.xxx:8080
whistle 的配置规则：
# Rules
# 访问首页走本地
jecyu.com/webs/short-transport http://xxx.xxx.xxx.xxx:8080?deptCode=755DL # 首页路径
# 后续的请求都使用本地代码
jecyu.com http://xxx.xxx.xxx.xxx:8080?deptCode=755DL
Nach dem Login kopieren
其中试过在原生 app 访问本地应用时出现错误“ webpack 会提示 invalid host header”，解决方案是在 devServer 配置添加即可：
devServer: {
allowedHosts: 'all',
}Nach dem Login kopieren
至此，成功让原生 app 访问PC 端本地的开发代码。
3.2 查看移动端的 DOM 样式
Whistle 能够通过内置的 Weinre 去实现查看移动端的 DOM 样式，配置规则如下
# 设置 weinre
https://juejin.cn weinre://test
Nach dem Login kopieren
手机上重新访问 juejin.cn 网站，然后打开 weinre 可以看到如下，绿色表示远程连接成功。
可以点击 Element 查看手机上网页 DOM 结构、样式等信息。
也可以在 console 控制台中，执行代码，比如 alert ，手机应用上会显示弹框。
4. 总结
学会抓包是软件开发人员必须掌握的调试技能，本文先介绍抓包的原理，再介绍抓包工具 whistle
的使用，whistle 非常强大，本文只是粗略的介绍，更多的使用技巧，大家可以查看官方文档whistle 文档。
参考资料
原文地址：https://juejin.cn/post/7140040425129115684
（学习视频分享：web前端）
