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

はじめに

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

動作環境

• Mac M3 Sonoma14.5
• docker desktop 4.25.0
• FireFox 127.0
• ZAP 2.15.0

環境構築の全体像

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

• ブラウザの拡張機能であるFoxyProxyは、アクセスするURLパターンによってルーティング先を変更
  • 指定した3つのドメインのみZAPlocalhost:5888に飛ばす
  • その他のドメイン(google.comなど）は通常のアクセスを行う
• ZAPで実習環境localhost:13128にアクセスし、通信を監視する

環境構築手順

以下の手順で進めていきます。

1. dockerファイルダウンロードと起動
2. ZAPインストールと設定
3. FoxyProxyインストールと設定

1. Dockerファイルダウンロードと起動

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

2. ZAPのインストールと設定

ZAPは、元々OWSAPという団体が提供しておりましたが、独立したとのことです。

参考：OWSAP独立について

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

1. こちらからZAPのmacOS (Apple Silicon - aarch64) Installerをダウンロード

2. インストーラを起動してZAPをインストール
   ※JavaJREはMac版インストーラに含まれているので事前インストール不要です。
   ※ZAPを起動しようとしても、初回はリジェクトされます
   

3. 設定アプリの「プライバシーとセキュリティ」にアクセスして「このまま開く」
   

4. 「開く」
   

5. 「現在のタイプスタンプでファイル名を付けてセッションを保存」にチェックした状態で「開始」
   ※セッション（通信内容）をZAPデータベースに常に保管する設定です。
   

6. なにもせず「閉じる」
   

7. 「Commnad + ,」で設定画面を開く

8. Network > ネットワーク > HTTP Proxyの設定
   

   • 以下情報を入力する
     ホスト：localhost
     ポート：13128

9. Network > Local Servers/Proxiesの設定
   

   • 以下情報を入力する
     アドレス：localhost
     ポート：58888

3. FoxyProxyの設定

1. FireFoxでこちらにアクセスして、拡張機能のFoxyProxyをインストールする
2. 公式の説明に従い、FoxyProxyの設定をする
3. FireFoxで http://example.jp にアクセスできることを確認する

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

学習の中断と再開について

中断再開手順はシンプルです。

中断手順

1. ZAPを終了
2. dockerファイル停止
   $ docker compose down

再開手順

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

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

参考

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