More than 5 years have passed since last update.

[Chromeヘッドレスブラウザ活用] セキュリティ解析ツール | Webアクセス先の可視化/調査GUI

Last updated at 2018-10-29Posted at 2018-10-26

##概要

この記事では、私の作成したWebリソースのアクセス状況の可視化/分析ツール（beta版）を紹介します。

私はこのツールをサイバーセキュリティの調査の用途を念頭に置いて、開発しました。その他、プライバシーポリシーの順守状況の調査など、顧客情報にまつわるコンプライアンス状況の調査にも利用を想定しています。

このGUIツールは、あるページ（ランディングページなど）にアクセスした際に付随してアクセスが発生するインターネット上のリソースを「グラフ図」として可視化すると同時に、クリックしたリソースの詳細情報を調査確認する機能を備えています。

##動作イメージ

更改しているGithub上のデモ動画は、以下の通り。

Wikipediaの「横浜中華街」にアクサスした際、付随してアクセスが生じる画像やJavascriptなどの要求/応答関係をグラフとして可視化しています。

また、特定のリソースのアイコンをクリックすると、そのリソースの詳細情報やアクセス発生原因が表示される様子を示しています。

###Chrome Devtoolの活用

このプログラムは大きく、以下の2つのコンポーネントで構成されています。

（1）のユーザ・インタフェイスから検査対象のURLや、グラフ上のアイコンのクリックなどのイベント情報をWebsocketで（2）のバックエンドプロセスに引き渡し、Chromeヘッドレスブラウザの操作や情報収集を行っています。

（2）では、指定されたURLのブラウジングの実行と、そのブラウジング状態の情報収集を行います。

具体的にはリクエストやレスポンス到達のイベントをトリガーに、アクセス先のリソースの情報やアクセスの原因（メディアへのリンクや、jsの実行ステートメント）に関する情報を収集しています。

上記で収集した情報を、リソース別に管理し、クリックされたアイコンに対応するリソースの情報をGUI上のテーブルに表示する仕様となっています。

Chrome DevtoolでChromeのブラウザをスクリプトで利用する際の規約は以下を参照してください。

また、本ツールで利用したNodejs向けの3rdパーティー製のDevtoolライブラリはchrome-remote-interfaceというもので、以下で公開されています。

###今後の開発

機能としては、以下のものを追加して、実用的なツールとしたい。

その他、リファクタリングしつつ、知名度を上げる施策を検討していく。