GitLabが持っている、セキュリティスキャンを、まじで"秒"で使う方法 - Browser-based analyzer

# あなたのWebサイトを「いますぐ」セキュリティスキャンする

つい先日、似たような題でブログを書いたのだが、実はもっとさらに上をいく機能があるので、それをご紹介したい。

GitLab Ultimateには、DAST (Dynamic Application Security Testing)が含まれているのだが、実はこの機能、大きく２つある。

0. Proxy-based analyzer
0. Browser-based analyzer

前回 ( https://qiita.com/SerinaMorino/items/8b948724df3d68085a20 ) は、この前者の「Proxy-based analyzer」を取り上げたのだが、このブログでは、後者の「Browser-based analyzer」をご紹介したい。

# とはいえ、しばらくはハイブリッド
ちなみに、小声で言っておくが、Proxy-based analyzerを辞めて、全部Browser-based analyzerにするそうだ( https://docs.gitlab.com/ee/user/application_security/dast/browser_based.html )。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3665149/f77e2310-b3fe-e011-6733-b8cacd7abe61.png)


とはいえ、まだ全機能を実現できていないということなので、しばらくは、Browser-basedといいつつ、部分的にProxy-basedも使うとのこと( https://docs.gitlab.com/ee/user/application_security/dast/browser_based.html#vulnerability-check-migration )。

# 1. 準備

さて、さっそくスキャンしよう。必要なのは、GitLab Ultimate。無償版のCE(Community Edition)やPremium版では使えない。

Ultimateを持っていない方は、GitLab Ultimateトライアルを試そう。

# 2. プロジェクトを作成

GitLabでは、なにをするにしても最初にプロジェクトを作る必要がある。

次のように、blankでプロジェクトを作ろう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3665149/f7bbe61c-6a60-7460-f8cd-baedb07312f6.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3665149/5753653d-76f9-67cd-fd94-28b4b75a1592.png)

# 3. .gitlab-ci.yml ファイルを作る

.gitlab-ci.ymlファイルをいきなり作る。手で作るのが好きな人は手でどうぞ。
ちょっとおしゃれにいきたい人は、次のように、Pipeline Editorメニューをクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3665149/af7a3b7a-0302-4819-cef1-4e17501c0a7e.png)

次のように、[Configure pipeline]をクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3665149/601de823-2454-47af-35d4-7155b0417cd9.png)

次のように、デフォルトで定義される .gitlab-ci.yml ファイルの中身をすべて選択して、削除。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3665149/5f813731-e747-3a75-eb5f-776d3798ea4d.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3665149/9c6f1a37-a2c9-f506-7efb-c8e11bb98787.png)

次に、この中身を手で書くのだが、タブやら改行やら面倒なので、マニュアルから拝借する。拝借するURLはこちら ( https://docs.gitlab.com/ee/user/application_security/dast/browser_based.html#create-a-dast-cicd-job )。
いちおう、リンク切れも将来起きる可能性があるので、どこの部分を言っているのか、スクショを貼り付けておく。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3665149/d4786395-4543-0c36-cc39-81b99b51bed1.png)

ちなみに、みなさんがコピー・ペーストできるようにということで、以下に載せておく。

```
stages:
  - build
  - test
  - deploy
  - dast

include:
  - template: DAST.gitlab-ci.yml

dast:
  variables:
    DAST_WEBSITE: "https://example.com"
    DAST_BROWSER_SCAN: "true"
```

ここでいう、「DAST_WEBSITE」がセキュリティスキャンの対象Webサイトを指定する。OWASPセキュリティツールで有名な、テストサイト(やられサーバー)のURL「 https://juice-shop.herokuapp.com/ 」を使うことにする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3665149/aa2fe37f-05a5-901a-5b6d-ad84e4803689.png)

ちなみにコードは以下。
```
stages:
  - build
  - test
  - deploy
  - dast

include:
  - template: DAST.gitlab-ci.yml

dast:
  variables:
    DAST_WEBSITE: "https://juice-shop.herokuapp.com/"
    DAST_BROWSER_SCAN: "true"
```

上の画面のように、[Commit changes]をクリックして、保存する。
この操作で、このプロジェクトのGitレポジトリに、「.gitlab-ci.yml」ファイルが保存&コミットされる。

# 4. なんと、これで終わりである

なんと、これで終わりである。ここに来た瞬間に、あなたのGitLabは、OWASPのやられサーバーに攻撃しまくっていることになる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3665149/ede5d8be-564b-77c8-bc71-171a92e68c4a.png)

このパイプラインが終わったら(緑になったら)、次に進もう。

# 5. スキャンそのものは時間かかる

だーっとスキャンする設定なので、結構時間がかかる。辛抱強く待つと、次のように脆弱性が出てくる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3665149/6aaab40f-4357-7c09-d514-9e6d8a646d01.png)

実際の業務では、ここからそれぞれ脆弱性ごとにイシューをつくって、脆弱性つぶしにかかる。

# 6. どこまでスキャンしたのか、見たい

上の、.gitlab-ci.yml を使うと、結局スキャンがどのページを訪れたのか、よくわからない。実は、このBrowser-based analyzerは、「DAST_BROWSER_CRAWL_GRAPH」というオプションがあり、これを有効にすると、グラフ図で訪れたページを見せる機能がある。
これを使ってみる方法がこちら。

先程と同じように、[Pipeline Editor」から「.gitlab-ci.yml」ファイルの編集画面を開く。

今度は、次のコードのように「DAST_BROWSER_CRAWL_GRAPH」と「artifacts」の設定を加える。

```
stages:
  - build
  - test
  - deploy
  - dast

include:
  - template: DAST.gitlab-ci.yml

dast:
  variables:
    DAST_WEBSITE: "https://juice-shop.herokuapp.com/"
    DAST_BROWSER_SCAN: "true"
    DAST_BROWSER_CRAWL_GRAPH: "true"

  artifacts:
    paths:
      - gl-dast-crawl-graph.svg
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3665149/25709c7c-c11e-57c7-5b56-ac8a8fcc7555.png)

この「artifacts」は何のためかというと、スキャンする際に訪問サイトをこのsvgファイル(グラフィックス)内に描画し、その画像を保存する、という指定になる。

詳しく説明すると・・・
正確には、スキャンそのものはGitLab Runner(共有)で行われるので、.gitlab-ci.ymlファイルの処理内容が完了すると、このGitLab Runner（共有)マシンは初期化されるため、なにもかも消えてしまう。消えてしまう前に、GitLab本体側に収集しておく、という意味になる。

なにはともあれ、ここでもう一度、[Commit changes]を押して、セキュリティスキャンが終わるのを待とう。

# 6. なにをどこまでスキャンしたのか見る

スキャンが終了したら、次の画面で[Passed]をクリックする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3665149/af17f572-81d4-d051-e97a-9b77c0b2ac5a.png)

dastジョブをクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3665149/087231d3-fd15-fadb-4403-057f66b7698d.png)

次のように、[Download]をクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3665149/ceff1d56-1e2b-2509-931d-cff8d5ab07bc.png)

すると、[artifacts.zip]というファイルがダウンロードされるので、解凍すると、[gl-dast-crawl-graph.svg]というファイルが手に入る。

ブラウザ等で見ると、次のようにグラフ図が表示される。これはまさに、セキュリティスキャン(実際はhtmlを解釈して、DOM操作をしながらクリック動作をしていく)をした軌跡となっている。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3665149/88e76c12-4d3d-8092-3933-9006f75d74ec.png)

以上、さくっと使えることがわかったと思うので、みなさまもぜひトライを。