【M3Mac版】安全なWebアプリケーションの作り方 実習環境構築【徳丸本】

# はじめに
実習環境構築の情報が古かったり、点在している状況だったため、備忘録として集約します。
M1, M2でも同様の手順で環境構築できるはずです。

## 動作環境
- Mac M3 Sonoma14.5
- docker desktop 4.25.0
- FireFox 127.0
- ZAP 2.15.0

# 環境構築の全体像
特定のURLパターンのみ、ZAPを経由して実習環境にアクセスする構図となります。

![er copy.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1754248/e2882776-7e25-cff1-1a4f-bacf5a7464c1.png)
-  ブラウザの拡張機能であるFoxyProxyは、アクセスするURLパターンによってルーティング先を変更
    - 指定した3つのドメインのみZAP`localhost:5888`に飛ばす
    - その他のドメイン(google.comなど）は通常のアクセスを行う
-  ZAPで実習環境`localhost:13128`にアクセスし、通信を監視する

# 環境構築手順
以下の手順で進めていきます。
1. dockerファイルダウンロードと起動
1. ZAPインストールと設定
1. FoxyProxyインストールと設定

## 1. Dockerファイルダウンロードと起動
1. [こちらのダウンロードページ](https://wasbook.org/download/)にBASIC認証[^1]して、「実習用仮想マシン (Docker版 Ver 1.1.1)」をダウンロードする
1. 「実習用仮想マシン」を適当なフォルダに解凍
1. 解凍したフォルダパスへ移動
`$ cd <解凍したフォルダパス/wasbook-docker>`
1. Dockerファイル起動
`$ docker compose up -d`
1. `localhost:13128`にアクセスできることを確認

## 2. ZAPのインストールと設定
:::note info
ZAPは、元々OWSAPという団体が提供しておりましたが、独立したとのことです。
:::

参考：OWSAP独立について

https://www.zaproxy.org/blog/2023-08-01-zap-is-joining-the-software-security-project/

「ZAP」を以下の手順でインストール・設定してください。

1. [こちら](https://www.zaproxy.org/download/)からZAPのmacOS (Apple Silicon - aarch64) Installerをダウンロード
1. インストーラを起動してZAPをインストール
※JavaJREはMac版インストーラに含まれているので事前インストール不要です。
※ZAPを起動しようとしても、初回はリジェクトされます
![スクリーンショット 2024-06-25 5.47.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1754248/7d7c836b-04d8-b1a8-d877-41e09cf3d47a.png)

1. 設定アプリの「プライバシーとセキュリティ」にアクセスして「このまま開く」
![スクリーンショット 2024-06-25 5.47.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1754248/8b43f0f9-7d1e-8042-0710-823b53dfc86f.png)

1. 「開く」
![スクリーンショット 2024-06-25 5.47.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1754248/adf281bb-01dd-1b2f-b3d8-9727e79d6b5e.png)

1. 「現在のタイプスタンプでファイル名を付けてセッションを保存」にチェックした状態で「開始」
※セッション（通信内容）をZAPデータベースに常に保管する設定です。
![スクリーンショット 2024-06-27 6.02.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1754248/5495d684-5976-5ae9-b90c-76015c692d53.png)

1. なにもせず「閉じる」
![スクリーンショット 2024-06-27 6.02.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1754248/74e5a93f-e5e5-ded7-7600-e8ebb3a31057.png)

1. 「Commnad + ,」で設定画面を開く
1. Network > ネットワーク > HTTP Proxyの設定
![スクリーンショット 2024-06-25 5.52.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1754248/73eb6930-a3af-be3c-7538-a165bc937e16.png)
    - 以下情報を入力する
    ホスト：localhost
    ポート：13128
1. Network > Local Servers/Proxiesの設定
![スクリーンショット 2024-07-05 20.19.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1754248/61185b55-206a-c4d9-4046-94d940eeb60b.png)
    - 以下情報を入力する
    アドレス：localhost
    ポート：58888

## 3. FoxyProxyの設定
1. FireFoxで[こちら](https://addons.mozilla.org/ja/firefox/addon/foxyproxy-standard/)にアクセスして、拡張機能のFoxyProxyをインストールする
1. [公式の説明](https://wasbook.org/foxyproxy8.html)に従い、FoxyProxyの設定をする
1. FireFoxで http://example.jp にアクセスできることを確認する

以上で環境構築が完了です。

# 学習の中断と再開について
中断再開手順はシンプルです。

### 中断手順
1. ZAPを終了
1. dockerファイル停止
`$ docker compose down`

### 再開手順
1. dockerファイル起動
`$ docker compose up -d`
1. ZAPを起動
※セッション保持方法とアドオンの管理画面のみ、上記と同様に対処してください。
1. FireFoxで`example.jp`にアクセス

以上で学習を再開できます。


# 参考
https://wasbook.org/wasbook-docker.html

https://www.youtube.com/watch?v=07k-7Q2xGzY

https://web-scan.jp/article/2681/

[^1]: 購入した本の巻末に認証情報が記載されています。