環境構築

1. telnet / curl を使えるようにする

事前学習で telnet / curl というコマンドを使います。 HTTP についての事前学習を行わない人は「node を使えるようにする」まで飛ばして構いませんが、Windows の人は、WSL をセットアップしておくことをおすすめします。

1.1. Mac / Linux

ターミナルツールを開き、以下のコマンドを打ってください。

telnet

エラーが出ず、telnet の待機モードに入れば問題ありません。qを入力し、待機モードから抜けてください。

以降は、command not found などのエラーが出て、telent がインストールされていなかった人向けです。 もし telnet がインストールされていなかった場合は、パッケージマネージャーを使ってインストールする必要があります。 Mac の場合は、

brew install telnet

でインストール可能です。 Linux の場合は、お使いのディストリビューションのパッケージマネージャーでインストールしてください。

また、同じような手順で curl コマンドをインストールしてください。 動作確認は、curl --versionで可能です。

1.2. Windows

node をインストールすることも考えて、Windows Subsystem for Linux(WSL) を使います。 WSL とは、 Windows のうえで Linux を動かすツールです。 WSL のインストール | Microsoft Learnを参考にインストールしてください。 ディストリビューションの指定は特にありません。

WSL のセットアップを行い、Linux にログインできたら、以下のコマンドを打ってください。

telnet

エラーが出ず、telnet の待機モードに入れば問題ありません。qを入力し、待機モードから抜けてください。

Ubuntu 以外のディストリビューションをインストールし、そのディストリビューションに telnet が含まれていなかった場合は、適切なパッケージマネージャーを用いてインストールしてください。

また、同じような手順で curl コマンドをインストールしてください。 動作確認は、curl --versionで可能です。

2. node を使えるようにする

JavaScript の実行環境である Node.js をインストールし、nodeコマンドをつかえるようにします。 最終的に、node -vコマンドを打ってバージョンが確認できれば良いので、既に何らかの方法でインストールしてある人は読み飛ばして構いません。

まだインストールしていない人は、このドキュメントでは Volta というツールを使ってインストールします。 Volta は node のバージョン管理ツールで、node 自体のバージョン切り替えを容易にしてくれます。 ただし、node のバージョン管理ツールは他にもあるため、それらを使っても構いません。

2.1. Mac / Linux

以下のコマンドを実行してください。

curl https://get.volta.sh | bash

実行が終わったら、以下のコマンドを実行して、バージョンが出力されることを確認してください。

volta -v

バージョンが出力されたら、以下のコマンドを実行して node をインストールしてください。

volta install node

2.2. Windows

Volta は Windows 環境でも動作します。 そのため、Windows 環境で完結させたい人はそれで構いません。

しかし、一応環境をそろえておきたいという講師側の都合と、今後開発していく上での WSL の便利さを考慮して、このドキュメントでは WSL を利用した環境構築を推奨します。

telnet の項にある WSL のセットアップが終わっていない人は、そちらを先に行ってください。 WSL のセットアップができ、Linux のコンソール画面に入ったら、以下の操作を進めてください。（Mac / Linux と同じ手順です）

以下のコマンドを実行してください。

curl https://get.volta.sh | bash

実行が終わったら、以下のコマンドを実行して、バージョンが出力されることを確認してください。

volta -v

バージョンが出力されたら、以下のコマンドを実行して node をインストールしてください。

volta install node

以下のコマンドで、node のバージョンが出力されることを確認してください。

node -v

3. VSCode のダウンロード

ソースファイルを編集するのに、VSCode というエディタを利用します。既に使用しているエディタがある人は、それで構いません。

以下のページからダウンロードして、セットアップを行ってください。 https://code.visualstudio.com/download

VSCode ではソースコードを編集したり、ターミナルを利用できたりします。各自で使い方は調べておいてください。

4. リポジトリの clone

当日に用いるサンプルアプリとして、nodejs を用いたものを用意しました。 nodejs を使用したことがあれば理解度が上がるとは思いますが、必要な箇所にコメントをつけるので、使用経験がなくても CSRF を理解する妨げにはならないと思います。

以下のコマンドを実行して、リポジトリを clone してください。Mac / Ubuntu(WSL) ならば、デフォルトで git コマンドがインストールされているはずです。

git clone https://github.com/sasakiy84/csrf-demo

その後、clone したディレクトリに移動し、 readme に従ってアプリを起動してください。nodejs か docker-compose の実行環境が必要です。 本を読み進めていくと、localhost へのリンクが出てくると思います。これは、サンプルアプリへのリンクを示しています。ポート 3000 番のリンクが本物のアプリで、ポート 4000 番のリンクが攻撃者が作成したアプリのものだと思ってください。

起動した際に、特にエラーログなどが出ず、ターミナルに以下のようなログが表示されれば問題ないです。Ctrl + C を押してアプリを閉じてください。

app listening on port: 4000
app listening on port: 3000