「このツールはファイルをブラウザ内だけで処理します」
と書かれていても、重要なファイルなら自分で確認したくなることがあります。
ChromeのDevToolsにあるNetworkパネルを使うと、ページが送受信したネットワーク通信を確認できます。
Networkで分かること
Chrome DevToolsのNetworkパネルは、DevToolsを開いている間のネットワーク要求を記録します。
リクエストごとに、
- 宛先
- HTTPステータス
- 種類
- Initiator
- Payload
- Response
- Timing
などを確認できます。
操作前にNetworkを開く
WindowsならChromeで対象ページを開き、
Ctrl + Shift + I
でDevToolsを開きます。
上部の Network を選びます。ページ遷移を伴う操作も追いたい場合は、必要に応じて Preserve log も有効にします。
Chrome公式ドキュメントでも、Networkパネルはページのネットワーク活動を記録・分析するための機能として案内されています。
いったんログを消す
ページ読み込み時には、
- HTML
- CSS
- JavaScript
- フォント
- 画像
など通常の通信が大量にあります。
確認したいのは「ファイルを選んだ後に何が起きるか」なので、NetworkのClearボタンで一度ログを消します。
ファイルを選んで処理を実行する
その状態で、
- CSVなどのファイルを選択
- 診断・変換を実行
- Networkに新しいリクエストが出るか確認
します。
何も出なければ、少なくともDevToolsが記録している範囲では、その操作中に新しいネットワーク要求が発生していない可能性が高くなります。
リクエストが出たらPayloadを見る
通信が出た場合はクリックし、
- Request URL
- Payload
- Headers
- Initiator
を見ます。
ファイル名、本文、Base64、巨大なPOSTデータなどが入っていないか確認します。
ただし、分析用イベントやエラーログなど、ファイル本体とは無関係な通信の場合もあります。
Initiatorを見る
ChromeのNetworkパネルでは、その通信を何が起こしたかをInitiatorから追えます。
JavaScriptファイルと行番号が分かれば、処理コードを確認できる場合があります。
外部ドメインも確認する
自社サイトだけでなく、
- analytics
- CDN
- エラー監視
- 広告
- 外部API
への通信もあります。
「通信がある＝ファイル送信」とは限りませんが、どこへ通信しているかを知る材料になります。
Networkに何も出ない＝絶対安全、ではない
Networkパネルは有力な確認方法ですが、それだけで完全な安全性を証明するものではありません。
- DevToolsを開く前の通信
- ブラウザ拡張による通信
- Service Worker
- 別のタイミングで行われる通信
なども考えられます。
重要なデータなら、ツール提供者の説明、プライバシーポリシー、ソースコードなども合わせて確認します。
MDNのFile APIが示すように、ユーザーが選んだファイルはブラウザ内で読み取れます。一方、Fetch APIを使えばネットワークへ送信することもできます。
だから「ブラウザツール」という言葉だけで判断せず、実際の通信を観察するのが一番分かりやすい確認方法です。
参考
- Chrome for Developers: Network panel
https://developer.chrome.com/docs/devtools/network/overview - MDN: File API
https://developer.mozilla.org/en-US/docs/Web/API/File_API - MDN: Fetch API
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
