More than 1 year has passed since last update.

PHPAdvent Calendar 2022

@mainy(mikumo)

徳丸本の Docker 実習環境を M1/M2 Mac で１から構築した

Last updated at 2023-02-04Posted at 2022-12-10

先日、徳丸本（正式名称: 安全なWebアプリケーションの作り方第2版）の実習環境 Docker 対応バージョンが公開されました。

こちら、M1/M2 Mac にも対応したものになっています。

リリース内容を確認してみましたが、解説されている内容は既存の部分からの変更点のみとなっています。
せっかくなので、1から新規で M1 Mac 環境に構築した方法の記録です。

前提条件

初心者向けではありません。
ある程度の知識がある方向けに、簡略化して記載しています。

初心者向けに記事を寄稿しました。
初心者の方は、リンク先の記事をご確認ください。

ウェブ・セキュリティ学習のため徳丸本を読んでみた
第3回　M1/M2 Mac に対応！Docker 環境で実習環境を構築しよう
https://www.school.ctc-g.co.jp/columns/mikumo/mikumo03.html

Homebrew などを使い、できる限りコマンドで構築します。
~~いちいちスクショを貼るのがめんどくさいので。~~
brew --version などで、 brew コマンド実行できるか確認しておきましょう。

user@MMacBook-Air ~ % brew --version

Homebrew 3.6.14-73-g11cdffb
Homebrew/homebrew-core (git revision 4fb232d5327; last commit 2022-12-10)
Homebrew/homebrew-cask (git revision 006575c5a3; last commit 2022-12-09)

また、私の作業環境は以下のとおりです。
M1 MacBook Air 2020 - macOS Monterey 12.6 ってところです。

user@MMacBook-Air ~ % uname -a

Darwin MacBook-Air.local 21.6.0 Darwin Kernel Version 21.6.0: Mon Aug 22 20:20:05 PDT 2022; root:xnu-8020.140.49~2/RELEASE_ARM64_T8101 arm64

user@MMacBook-Air ~ % sw_vers 

ProductName: macOS
ProductVersion: 12.6
BuildVersion: 21G115

ざっくり構築手順の確認

下記のとおり進めます。

アプリケーションのインストール
徳丸本どおりの設定部分その1
Docker 実習環境の追加設定部分
徳丸本どおりの設定部分その2
起動手順

構築

1. アプリケーションのインストール

下記のアプリケーションをインストールします

Firefox
- FoxyProxy Standard アドオン
Docker Desktop
OWASP ZAP

インストール

アプリは brew cask でインストールします。

# Firefox
brew install --cask firefox

# Docker Desktop
brew install --cask docker

# OWASP ZAP
brew install --cask owasp-zap

OWASP ZAP 用に Java のランタイムは追加で特別必要ありませんでした。
~~もしかしたら私の環境ではすでに入っていたのかもしれないです。~~
どうやら Mac 版はアプリの中に JDK が入っているっぽいです。

補足：
コメントで指摘いただいたとおり、brew コマンドで --cask を明示しなくてもOKです。
ただし、Docker Desktop は --cask 必須です。
すべてに --cask を明示している理由が気になっていた方はコメントをご確認ください。

Firefox プロファイルの作成（必須でない）

Firefox はプロファイルを分けておくと実習環境として使いやすいです。
この作業は必須ではないので、お好みでどうぞ。

/Applications/Firefox.app/Contents/MacOS/firefox-bin -P

これでプロファイルマネージャーが起動できるので、新しい wasbook プロファイルを作成しました。

Mozilla Support: プロファイルマネージャーを使用して、Firefox のプロファイルを作成または削除する
https://support.mozilla.org/ja/kb/profile-manager-create-and-remove-firefox-profiles

Firefox アドオンの追加

Firefox を起動して、下記の URL からインストールします。

FoxyProxy Standard
https://addons.mozilla.org/ja/firefox/addon/foxyproxy-standard/

作業の結果

今回インストールして検証したバージョンは、次のとおりです。

Firefox: 107.0.1
- FoxyProxy Standard アドオン: 7.5.1
Docker Desktop: 4.12.0 (85629)
OWASP ZAP: 2.12.0

2. 徳丸本どおりの設定部分その1

OWASP ZAP (ローカルプロキシ、ブレークポイント、フォント)

OWASP ZAP の起動に失敗したときには、システム設定の「セキュリティとプライバシー」の設定から許可する必要があります。

上記のポイントに気をつけつつ、ここは徳丸本のとおりに作業しましょう。

3. Docker 実習環境の追加設定部分

Docker 実習環境の追加設定は、徳丸本の公式サポートページで詳細が書かれています。
ここの内容どおりに行います。

安全なWebアプリケーションの作り方第2版サポートサイト: Docker版の実習環境
https://wasbook.org/wasbook-docker.html

重要なポイントは下記の2点です。

ダウンロードページから wasbook-docker.zip ダウンロードし解凍
OWASP ZAP 追加設定 (HTTP Proxy)

サポートページ内容に沿って設定するだけです。
OWASP ZAP は設定が完了した後に再起動しておくと良いでしょう。

4. 徳丸本どおりの設定部分その2

Firefox FoxyProxy Standard アドオン

ただし、FoxyProxyの設定ファイル (foxyproxy.json) のダウンロード URL は http://127.0.0.1:13128/ に変更になりますので注意してください。
徳丸本に書かれている http://example.jp/ にはこの段階ではアクセスできません。
なぜなら、Docker 実習環境構築では hosts 書き換えをしないためです。
FoxyProxyの設定ファイルをインポート後は http://example.jp/ にアクセスできるようになります。

上記のポイントに気をつけつつ、ここは徳丸本のとおりに作業しましょう。

5. 起動手順

次回からは、この手順で起動してください。

Docker Desktop & Docker コンテナ
OWASP ZAP
Firefox

今までの設定で、次のようなアプリケーション連系となっています。
[Firefox] -- [FoxyProxy Standard] -- [OWASP ZAP] -- [実習 Docker コンテナ群]

1. Docker Desktop & Docker コンテナ

Docker Desktop アプリを起動しておいてください。

wasbook-docker.zip を解凍したディレクトリ内で、次のコマンドを実行します。

docker compose up -d

2. OWASP ZAP

OWASP ZAP アプリで起動するだけです。

3. Firefox

Firefox で http://example.jp/ にアクセスすると、目次ページが表示されます。

おまけ VirtualBox 版から不要になった設定部分

ざっと次の内容が不要になりました。

VirtualBox のインストール
VirtualBox の設定変更（ホストネットワークマネージャ）
仮想マシンのダウンロード（wasbook.ova このファイルはサイズが大きい）
ホスト側の hosts ファイルの書き換え

感想

公開されている情報では、１から環境を構築するものではなかったのでまとめてみました。
VirtualBox 版に比べ設定項目が減っているため、実習環境構築が楽になっています。
これであれば初心者でも Docker 環境を実習環境にしてもいいんじゃないかなと思います。
特に hosts 設定は初心者にとっては鬼門で、よく分かっていない状態で設定変更することは好ましくないため、設定不要になった変更は良かったと思います。

最後に宣伝です。
「ウェブ・セキュリティ学習のため徳丸本を読んでみた」という初心者向けコラムを連載開始しました。

CTC教育サービス: ウェブ・セキュリティ学習のため徳丸本を読んでみた
https://www.school.ctc-g.co.jp/columns/mikumo/

こちらもよろしくお願いいたします😊

更新情報

2022-12-11 : 初版
2022-12-31 : 徳丸本からの手順を分割し作業順にあわせた。FoxyProxy設定ファイルダウンロードのURL変更になるため追記。アプリケーション連携イメージの追加
2023-02-01 : 初心者向け記事へのリンクを追加
2023-02-04 : brew コマンドの --cask について補足を追記

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up