3 年後、モバイル H5 ページ開発に再び触れました。最後にインターンを行ったのは 4 年生の時でした。今回は、h5 ページとネイティブ アプリの間の対話を含むハイブリッド開発です。h5 ページは、ネイティブ アプリでログイン状態を開き、ネイティブ カメラを呼び出すなど、ネイティブ アプリのインターフェイスを呼び出す必要があります。 QRコードをスキャンします。 WeChat ミニプログラム開発とは異なり、WeChat ではローカル開発用の WeChat 開発者ツールが提供されており、ローカルでシミュレートして呼び出すことができますが、毎回静的ファイルをパッケージ化してデバッグ用にサーバーにアップロードする必要があり、非常に面倒です。
ネイティブ アプリがオンライン h5 を読み込むときに、ローカル コードを実行できますか?答えは「はい」です。ホイッスルなどのパケット キャプチャ ツールを使用して、オンライン ページのリクエスト データをインターセプトし、ローカル コードに応答できます。この記事では、主にパケット キャプチャの原理とパケット キャプチャ ツール ホイッスルの使用方法について説明します。
#パケット キャプチャとは、ネットワーク伝送中に送受信されるデータ パケットを傍受、再送、編集、転送することです。パケット キャプチャを通じて、次のことが可能になります。
##内部および外部ユーザーによるネットワーク リソースの悪用を検出
#侵入と欺瞞
...
コンピュータ ネットワークの知識を思い出すと、データは
framesHTTP/HTTPS は、一般的なアプリケーションであるアプリケーション層で使用される通信プロトコルです。レイヤ システム アーキテクチャはクライアント サーバー アーキテクチャです。
異なるシステム上で実行されているクライアント プログラムとサーバー プログラムはどのように相互に通信するのでしょうか?実際、オペレーティング システムの用語では、実際に通信するのはプログラムではなく 
プロセスは家にたとえることができ、そのソケットはそのドアにたとえることができます。ソケット
#2 つのプロセス間の通信プロセスがわかったので、パケットをどのようにキャプチャすればよいでしょうか?人生の一例を挙げると、シャオミンはシャオ・ウェンに憧れていたのでラブレターを書きましたが、少し恥ずかしがってシャオ・ウェンの親友であるシャオ・ホアにラブレターを届けるのを手伝ってくれるように頼みました。このとき、シャオファはシャオウェンとシャオミンの間のラブレターを届ける役割を担うことができ、仲介者として二人のラブレターの内容をこっそり見ることができます。
アイデアは、パケットのキャプチャを担当する仲介プロセスをセットアップすることです。ターゲット プロセス間の各セッションは、最初に仲介プロセスと通信し、次にそれを転送します。
http 規格では、通信終了認証に関する規格がありません。サーバーの場合、受信した HTTP リクエスト メッセージの形式が仕様を満たしている限り、応答メッセージを送信します。
同じことがクライアントにも当てはまります。クライアントは、接続先のホスト (
1.2.2 HTTPS パケット キャプチャの原則HTTP はクリア テキスト送信であるため、中間者攻撃に対して脆弱であり、安全ではありません。
HTTPS セマンティクスは引き続き HTTP ですが、セキュリティ層 SSL/TSL が HTTP プロトコル スタックの http と tcp の間に挿入されます。
セキュリティ層は 対称暗号化を使用して送信データを暗号化し、非対称暗号化を使用して対称キーを送信します という 3 つの問題を解決します。http データが暗号化されない、ID を検証できない、データが暗号化されない簡単に改ざんされるキーの問題。
HTTP 暗号化認証整合性保護 = HTTPS
ID 検証の問題は、サードパーティ組織 (CA 証明書) であるサーバーの証明書を検証することによって実現されます。発行局）は、デジタル署名テクノロジーを使用して、証明書の作成、証明書の保存、証明書の更新、証明書の失効などの を管理します。
ブラウザは HTTPS Web サイトに接続します。サーバーはサーバー エンティティ証明書だけでなく証明書チェーンも送信しますが、ルート証明書は含まれません。ルート証明書はWindows、Linux、macOS、Android、iOS などのオペレーティング システムに組み込まれています。
#1. 証明書チェーンの検証:
検証が成功した場合は続行します。それ以外の場合、証明書の検証は失敗します。
1.3 ブラウザは各証明書の署名を繰り返し検証し、最終的に自己署名ルート証明書を見つけます (発行者とユーザーは同一人物です)。ブラウザはルート証明書を統合しているため、ルート証明書の公開キーを完全に信頼して、最終署名を完了できます。
証明書の検証を理解した後、具体的な https 通信プロセスを見てみましょう:
##クライアントは乱数を送信します
random1サーバーは情報を受信し、選択された暗号化アルゴリズム証明書 (S_公開キーを含む) を返します。
random2クライアントは、その有効性を検証します。
random1 random2を生成し、server公開キー暗号化を介してサーバーに送信します ##サーバーは、pre-master-secure
に対して、## に従って pre-master-secure を復号化します。 #次に、暗号化アルゴリズムを使用して master-secure (対称暗号化キー) を生成し、それをクライアントに送信します
クライアントは受信します生成された master-secure、対称暗号化キーの送信が完了します
最後に、master-secure を実際の対称暗号化送信に使用できますデータの。
#仲介者がパケットをキャプチャしたい場合は、HTTPS 通信を暗号化する前にクライアントから送信された証明書を傍受する必要があります。
また、クライアントになりすまして、サーバー独自の非対称公開キー (対称暗号化通信キーを含むクライアントから返されたメッセージ) を使用して暗号化し、それをサーバーに送信して取得します。エンドによって生成されたサービス対称暗号化キー。
最も重要な手順の 1 つは、
ブラウザのルート証明書の検証 にインポートすることしかできません。暗号化通信を確立する際に仲介者証明書の検証を完了します。
1.3 コンピュータは携帯電話のパケットをどのようにキャプチャしますか?コンピュータを通じてモバイル Web アプリケーションのデータ パケットを取得したい場合は、次のとおりです。これまでに学んだことを踏まえると、仲介者戦略が必要です。
Web アプリケーションのターゲット サーバーになりすます、PC 側でサーバー仲介プロセスを作成します。モバイル Web アプリケーションによって送信されたリクエスト データは、まず仲介者を通過し、中間者がそれを傍受して処理し、ターゲット サーバーに送信します。次に、ターゲット サーバーによって送信されたデータ パケットは、最初に仲介者を通過し、次に仲介者がブラウザ クライアントに応答します。
ここで注意すべき点は、パソコンであれ携帯電話であれ、インターネットネットワークに接続し、お互いを見つけて通信できる必要があるということです。
一般に、開発の場合、パーソナル コンピュータ上でローカルに起動されたサーバー プロセスには、パブリック ネットワーク上からアクセスできません。一般的には無線LANのことで、同じルーターから送られてくるWi-Fiにパソコンと携帯電話が接続して通信することができます。
# などのポートをリッスンします。
1. 完全なクロスプラットフォーム: Mac や Windows などのデスクトップ システムをサポートし、サーバーなどのコマンド ライン システムをサポートします
2. 強力な機能:
##アップストリーム エージェント、PAC スクリプト、ホスト、遅延の設定をサポート(高速限定) リクエスト応答など
#コンソール ログとリモート ページの DOM ノードの表示をサポート
ノードを使用した開発をサポートプラグイン拡張機能、独立した npm パッケージ リファレンスとしても使用可能
3. 簡単な操作
パケット キャプチャの表示と変更ブラウザ経由で直接リクエスト
すべての変更操作は構成 (システム ホストと同様) を通じて実装でき、グループ管理をサポートします。
#ホイッスルのグローバル インストール
npm i -g whistle & w2 start
w2 proxy // 设置全局代理 w2 proxy off // 关闭全局代理
SwitchyOmega
プラグインをインストールし、特定の Web サイトにホイッスル プロキシをオンデマンドで設定できます。 。#Whistle エージェントの選択
##Whistle エージェントの設定
3.1 ネイティブ アプリのロード PC ローカル コード開発
ネイティブ アプリのリクエストをローカル サーバーにプロキシする必要があります。前提条件は、Wi-Fi 電話とコンピュータが相互にアクセスできること、つまり、コンピュータが前述の PC パッケージをキャプチャできることです。
私の Web サーバーは https アプリケーションであるため、Whistle によって提供されるルート証明書をダウンロードし、手動で携帯電話にインポートする必要があります。
此时，再在手机上配置代理指向 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
其中试过在原生 app 访问本地应用时出现错误“ webpack 会提示 invalid host header”，解决方案是在 devServer 配置添加即可：
devServer: {
allowedHosts: 'all',
}至此，成功让原生 app 访问PC 端本地的开发代码。
Whistle 能够通过内置的 Weinre 去实现查看移动端的 DOM 样式，配置规则如下
# 设置 weinre https://juejin.cn weinre://test
手机上重新访问 juejin.cn 网站，然后打开 weinre 可以看到如下，绿色表示远程连接成功。
可以点击 Element 查看手机上网页 DOM 结构、样式等信息。
也可以在 console 控制台中，执行代码，比如 alert ，手机应用上会显示弹框。
学会抓包是软件开发人员必须掌握的调试技能，本文先介绍抓包的原理，再介绍抓包工具 whistle 的使用，whistle 非常强大，本文只是粗略的介绍，更多的使用技巧，大家可以查看官方文档whistle 文档。
原文地址：https://juejin.cn/post/7140040425129115684
（学习视频分享：web前端）
![あなたを最もよく理解するフロントエンドコース: HTML5/CSS3/ES6/NPM/Vue/...[オリジナル]](https://img.php.cn/upload/course/000/000/068/632ae26b9b376240.png)
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
