第8回「Googleデータポータル(BIツール)を利用したスキャン結果の可視化」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2422105/e8954c41-ac28-0137-deed-e219f7edd9ae.png)
SaaS型Webアプリ診断ツール「AeyeScan」を運営している株式会社エーアイセキュリティラボが、セキュリティテストの自動化、脆弱性診断の内製化、AI/機械学習などの技術情報の共有を目的とした記事です。
AeyeScanの情報はこちら [https://www.aeyescan.jp](https://www.aeyescan.jp/)
エーアイセキュリティラボの情報はこちら、[https://www.aeyesec.jp](https://www.aeyesec.jp/)

[![2022-155641.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2422105/dd3f69d5-879a-ed11-d6ac-353a85523c43.png)](https://www.aeyescan.jp)

こんにちは。株式会社エーアイセキュリティラボ　カスタマーサクセス担当　日髙です。
今回は、Googleデータポータルを利用して、AeyeScanの日々の診断データの可視化をおこなっていきたいと思います。

# 目次
[なぜスキャン結果の可視化が必要?](#なぜスキャン結果の可視化が必要)
[Googleデータポータルの紹介](#googleデータポータルの紹介)
[概要](#概要)
[GASによるスキャン情報取得](#gasによるスキャン情報取得)
[Googleデータポータルで表示](#googleデータポータルで表示)
[レポートの見方](#レポートの見方)
[レポートの共有設定](#レポートの共有設定)
[利用上の注意](#利用上の注意)
[おわりに](#おわりに)
[参考文献](#参考文献)


# なぜスキャン結果の可視化が必要?
AeyeScanなどの脆弱性診断ツールの結果レポートは、診断した時点での結果を報告するレポートです。
そのため、定期的に診断を実施している場合、脆弱性検出数の増減や検出箇所の推移などを把握しようとすると、レポートなどから情報を収集し、別途取りまとめる作業が必要となります。
組織によっては、経営層にサマリーレポートの提出を求められるケースもありますので、情報を横断的にみて分析できる仕組みは重要です。

今回ご紹介するスキャン結果を可視化する仕組みによって、一定期間の脆弱性検出数の増減や、管理しているWebサイト全体の脆弱性の傾向などを分析が容易になります。


# Googleデータポータルの紹介
Googleデータポータルとは、スプレッドシートなどのデータを表やグラフなどで可視化することができるツールです。

スプレッドシートのデータ以外にもGoogle アナリティクスのデータや各種データベース（Microsoft SQL Server、MySQL、PostgreSQL）と直接接続することも可能です。

Gmailアカウントがあれば無料で利用することができます。

# 概要
今回は、AeyeScanのAPI（[スキャン情報のリストを取得](https://aeyescan.com/api-doc.html?_=3161126543561#tag/ScanInfo/paths/~1scan~1/get)）とGASを利用して、スプレッドシートに日々の脆弱性の検出結果を記録していき、そのデータをGoogleデータポータルにて、可視化するという仕組みを作っていきます。

![イメージ図.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2422105/31ec0daf-db0b-9ce8-ef3c-3445966e4fc8.png)

この仕組みにより、AeyeScanにログインすることなく簡単にAeyeScanのスキャン結果を確認することが可能です。

それでは、早速作っていきましょう！

# GASによるスキャン情報取得

## APIキー作成

AeyeScanのAPIを実行するためにAPIキーを作成します。
APIキーはAeyeScanのメニューバーの「アカウント管理」→「APIキー管理」から作成できます。

今回はAPIからデータの取得のみを行うため、書き込み・実行権限は「読み取り」に設定します。
作成したAPIキーとトークンは後から確認できないため、安全な場所に保管してください。

![Untitled (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2422105/441128da-9508-77a9-98d7-b35070c7f465.png)

## スプレッドシートの用意

次に、スプレッドシートを用意します。
以下のリンクからスプレッドシートを開き、メニューバーの「ファイル」→「コピーを作成」からご利用のGoogle Driveにファイルをコピーしてください。以下、コピーされたファイルを編集していきます。

https://docs.google.com/spreadsheets/d/1jB6WSuwfiQiLe_751MYLrMG0xxHmh9gCIjx19-wXrEM/

## GASの実行イメージ

スプレッドシートを確認すると以下の項目が表示されています。

A列の取得日には、スキャン情報の取得日（GASを実行した日時）が設定されます。
B列以降は、スキャン情報取得APIで取得した内容が表示されます。
![Untitled (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2422105/d46cf03b-bc45-bc7c-41a2-4d692d69fec3.png)

GASを実行すると以下のように更新されます。

![Untitled (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2422105/3c1e55b4-a9aa-8643-2ad2-0530ccfc4131.png)

GASが実行される度に、スプレッドシートの最終行にデータを追加していきます。

## GASの編集

GASを編集し、動作の確認を行います。
編集する箇所は2か所です。

メニューバーの「ツール」→「スクリプトエディタ」を開き、スクリプトの8, 9行目のXXXXXの部分を作成したAPIキーとAPIトークンの値にそれぞれ置き換えてファイルを保存します。

![Untitled (5).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2422105/b0a31b48-d375-1c41-0cbd-d1fb0f12f063.png)


## GASの動作確認
「スクリプトエディタ」にて、GASを実行して、データの取得を行います。
![Untitled (6).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2422105/f6619a43-d177-eb7c-42f3-1ebb01f11ad6.png)


## トリガーの設定
データが取得できることを確認できたら、最後に、GASのトリガーを作成します。
「スクリプトエディタ」を開き、サイドバーから「トリガー」を選択して「トリガーの追加」を押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2422105/13dc5011-dc8e-61b9-faf7-4b5a0ea0b6ec.png)

以下の画像のようなウィンドウが表示されるので、トリガーの設定を行います。
今回は、1日に一回データを更新する設定にするので、「時間主導型」、「日付ベースのタイマー」、「午前7時～8時」に設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2422105/2deace6b-b621-eba3-09a8-03d177f3bd42.png)


ここで、はじめてトリガーを追加する際には以下のような警告が表示されます。

これは、このスクリプトがGoogle Drive内のスプレッドシートの参照と編集と、外部サービス(AeyeScan)への接続を行うことに対しての警告です。

**必ず本スクリプトと警告の内容を理解したうえで続行してください。**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2422105/0e569afa-5d25-47de-2a17-3d9ddeccb5a6.png)

以上で「GASによりスキャン情報取得」の設定は完了です。

# Googleデータポータルで表示
次に「Googleデータポータル」にアクセスして、設定を行っていきます。
以下のURLにアクセスします。

https://datastudio.google.com/

## データソースの取得
まずは、データソースの取得を行います。
データソースとは、データポータルに表示するデータの元となるデータを表しています。
今回の場合は、これまでの手順で用意したスプレッドシートがデータソースとなります。

画面左上の「作成」ボタンをクリックし、「データソース」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2422105/f758cee8-d548-00d7-e9c3-b7e99f2ac13b.png)

一覧から「Googleスプレッドシート」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2422105/132c02c4-3cc5-3547-0bff-498c2cefee2c.png)

①「スプレッドシート」欄で対象のスプレッドシートを選択します。
②「ワークシート」欄にシート名が表示されるので、対象のシートを選択します。
③オプションの「先頭行をヘッダーとして使用する」にチェックが入っていることを確認します。
④画面右上の「接続」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2422105/28fcec1c-b3a7-74b5-8693-964a7c9245e6.png)

接続が完了すると以下の画面が表示され、スプレッドシートから取得したデータのフィールド名とデータタイプが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2422105/4e9c5381-6a62-6edb-d642-1713836c38d5.png)

この画面から不要なフィールドの削除やデータタイプの変更も可能です。

今回の場合は、特に変更は不要です。

以上で、データソースの設定は完了です。

## レポートの作成
次に、レポートの作成を行います。
レポートの作成では、表やグラフを追加して、どんな状態でデータを表示するかを設定していきます。

先ほどのデータソースの画面の右上の「レポートを作成」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2422105/a6c3ec25-8fdb-721c-38a9-5cc83f0773b7.png)

以下のように表グラフが画面に表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2422105/c26de37d-d97d-0532-f8b9-136a6046d7f3.png)

### 表グラフの設定
まずは、既に読み込まれている表グラフに対して設定を行っていきます。
①表グラフをクリック
②画面右側の「グラフ」の「SETUP」欄に選択したグラフに対する設定内容が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2422105/be114234-1039-6501-dde6-b6668fe52113.png)

「SETUP」欄は以下のように設定します。

- データソース
データの取得元となるデータソースを選択します。

- 期間のディメンション
データタイプが日付の項目を設定可能です。
設定することにより、日付によってデータをフィルタすることが可能です。
今回の場合は、「取得日」を設定します。

- ディメンション
データをグループ化するための条件となる値です。
設定することにより、グループ化されて、表に表示されます。
今回の場合は、「スキャンID」「スキャン名」「トップURL」「ステータス」を設定します。

- 指標
ディメンションに設定された値でグループ化されたデータを集計するための項目です。
設定することにより、集計が行われて、表に表示されます。
今回の場合は、「Critical」「High」「Medium」「Low」「Info」を設定します。


設定後、以下のように表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2422105/581195de-031a-da2f-87fc-4d6c88d1e72e.png)

以上で表グラフの設定は完了です。

### スコアカード追加

次に以下のような深刻度毎の件数を表示するグラフを追加します。
データポータルでは、「スコアカード」と呼ばれています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2422105/0f688bcd-6da8-49ad-880d-9ecd2599106f.png)

まずは、レポートにスコアカードを追加します。
画面上部の「グラフを追加」から「スコアカード」を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2422105/7cd4a687-a482-c72c-020f-22574e534c9a.png)

スコアカードが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2422105/59f6aee6-be31-e591-3ce6-298b8dffd7e1.png)

表グラフの時と同様に画面右側の「グラフ」の「SETUP」欄に以下のように設定します。

- 期間のディメンション
「取得日」を設定します。

- 指標
スコアカードに表示するデータを選択します。１つのスコアカードに設定できるフィールドは１つとなります。
今回の場合、深刻度毎にスコアカードを作成するので、まずは、「Critical」を設定します。

次に、画面右側の「グラフ」の「スタイル」欄にて、スコアカードの文字色を変更します。
「ラベル」の項目で色を設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2422105/f0a01ad1-67ab-b766-bb68-0fe5a0f065a4.png)

設定後、以下のように表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2422105/3aefb060-aae0-084b-a15d-5b4ed59eb4e3.png)

以降「High」～「info」まで同じように設定し、配置します。


### 折れ線グラフ追加

次に、データの取得日毎の推移がわかるように以下のような折れ線グラフを追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2422105/fbae2631-481d-57ba-c60b-eadacc73364e.png)

まずは、レポートに折れ線グラフを追加します。
画面上部の「グラフを追加」から「期間＞時系列グラフ」を選択します。

折れ線グラフが表示されます。
（データソースに取得日が一つしか存在しないため、点しか表示されませんが正しいです。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2422105/5aac4302-b918-b504-7daa-7d505306559b.png)

これまでと、同様に画面右側の「グラフ」の「SETUP」欄を以下のように設定します。

- 期間のディメンション
「取得日」を設定します。

- ディメンション
「取得日」を設定します。

- 指標
折れ線グラフに表示するフィールドを選択します。
データが多いと見づらくなるため、今回は、高深刻度の「Critical」「High」「Medium」のみ表示します。

次に、画面右側の「グラフ」の「スタイル」欄にて、折れ線の色を変更します。
「系列1~3」の鉛筆マークで色を設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2422105/a6d3dbc6-ec43-fda8-9680-0299c8ff0038.png)

設定後、以下のように表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2422105/54041406-1496-9c51-a572-3a7b61e6b791.png)

データが蓄積されていくと以下のように日毎の脆弱性の検出件数の推移を確認することが可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2422105/026326d4-3295-413b-9f24-8ef12aa3b886.png)


### 日付フィルタの追加
最後に、取得日でデータをフィルタ出来るようにコントロールを追加します。

画面上部の「コントロールを追加」から、「期間設定」を追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2422105/4f6d050c-6674-4d65-2c06-8826450487a4.png)

以下のように表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2422105/a40b6e25-70a9-7a08-9c07-6b088ec80c7e.png)

こちらのコントロールからカレンダーで期間を指定したり、先週1週間など相対的な日付でフィルタすることも可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2422105/550e3fdb-4aa8-eadf-8fa2-45cd59c35c76.png)

以上で、Googleデータポータルで表示設定は完了です。


# レポートの見方

以上で完成です！！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2422105/e8954c41-ac28-0137-deed-e219f7edd9ae.png)

ここで、レポートの画面で便利な機能をご紹介します。

- スキャンID毎の結果表示
表グラフにて、スキャン名をクリックすると個別のスキャンIDの件数が他のグラフに反映されます。
個別の結果を確認する際に便利な機能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2422105/09b725cb-6b51-0b7e-995f-4333a852fbc3.png)

- スキャンID毎、取得日毎の結果表示
さらに、折れ線グラフで取得日をクリックするとスキャンID毎、取得日毎でグラフを絞ることが可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2422105/c7a8c02b-288e-b573-81e6-5d4f3fddb984.png)

# レポートの共有設定
最後に他ユーザからも見れるように共有設定を行います。
レポートの共有設定を行うには、画面上の「共有」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2422105/897cd241-e5b2-bc01-d01c-f756685e9f35.png)

「ユーザ追加」タブから、メールアドレスを登録することで特定のユーザと共有することが可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2422105/ff1ae9bc-a7c6-65e1-6f66-0a0152427174.png)

また、「アクセスを管理する」タブの「リンク共有」から同じ組織内からのアクセスのみ可能とすることも可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2422105/4d42bb06-6caa-3889-803d-5249184fc896.png)

# 利用上の注意
**GASのコードなどご自由に編集し利用してください。ただし、無償無保証のため**不明点の質問やカスタマイズについてのサポートはできません。コードの改善、不具合については、是非ご連絡ください。

# おわりに
今回は、GASとGoogleデータポータルを利用して、スキャン結果の可視化を行いました。
GASで使用するAPIや取得するデータ、Googleデータポータルの表示方法など柔軟にカスタマイズ可能ですので是非ご活用ください。

# 参考文献
データポータルへようこそ
https://support.google.com/datastudio/answer/6283323?hl=ja
データポータル用語集
https://support.google.com/datastudio/topic/6302375?hl=ja&ref_topic=6291010

AeyeScanのトライアル、脆弱性診断の自動化のご相談は[こちら](https://www.aeyescan.jp/)

[![2022-155641.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2422105/dd3f69d5-879a-ed11-d6ac-353a85523c43.png)](https://www.aeyescan.jp)