Ein Muss für Front-End-Leute: Ausführliche Erläuterung der Paketerfassungsprinzipien und der Verwendung des Paketerfassungstools whistle

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.

帧的单位传输的，帧通过特定的称为网络驱动程序的程序进行成型，然后通过网卡发送到网线上，通过网线到达目的机器，在目的机器的一端执行相反的过程。接收端机器的以太网捕获到这些帧，并告诉操作系统帧已到达，然后对其进行存储。在这个传输和接收的过程，就可以使用抓包工具（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.

🎜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

Der Client erhält den generierten
• 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

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.

npm i -g whistle & w2 start

w2 proxy // 设置全局代理

w2 proxy off // 关闭全局代理

# Rules

# 访问首页走本地

jecyu.com/webs/short-transport http://xxx.xxx.xxx.xxx:8080?deptCode=755DL # 首页路径

# 后续的请求都使用本地代码

jecyu.com http://xxx.xxx.xxx.xxx:8080?deptCode=755DL

devServer: {

allowedHosts: 'all',

}

# 设置 weinre

https://juejin.cn weinre://test