【Webアプリ開発】セキュリティ入門⑥ Juice Shopの活用方法の紹介
本記事は下記の記事の続きです。
前回の記事ではDVWAの活用方法について簡単に紹介しましたが、本記事ではJuice Shopの活用方法について簡単に紹介します。
Juice Shopへの行き方
Juice Shopのリポジトリへの行き方ですが、検索を使うのが便利です。
「juice shop github」というワードで検索するとすぐに見つかります。
下記にリンクを貼っておきます。
Juice Shopを動かしてみよう
Juice ShopのリポジトリのREADMEにはDocker Containerに関する記述があります。
下記の赤線のコマンドを実行するだけでJuice Shopを動かすことができます。ただし、Ubuntu環境では「sudo」を前に付けます。
sudo docker pull bkimminich/juice-shop を実行します。
sudo docker run --rm -p 3000:3000 bkimminich/juice-shop を実行します。
下記のようなメッセージが出れば無事にJuice Shopが起動しています。
ブラウザで「http://localhost:3000」を入力すると下記の画面が表示されます。
Juice Shopの課題チャレンジの始め方
まず、赤線箇所のように「/」の後に「score-board」を追加してENTERキーを押します。
その結果、Score Boardという画面に遷移します。
Juice Shopには脆弱性に関するさまざまな課題が用意されており、それらを解きながらセキュリティについて学んでいく学習教材ですが、Score Boardは課題を管理しているページです。
Score Boardを見つけること自体も課題であるため、上図の赤線箇所にあるように課題を解決した旨のメッセージが表示されています。
DOM XSS（難易度１）の課題にチャレンジしてみよう
赤線箇所のアイコン（難易度１）のみが選択されている状態にします。
難易度１の課題の中に「DOM XSS」というものがありますので、これにチャレンジします。
「DOM XSS攻撃を実行せよ」という課題です。
赤線箇所に<iframe ...>というコードがあるので、これをコピーします。
右上の検索アイコンを押します。
入力フィールドが現れます。
先ほどコピーしたものをペーストしてENTERキーを押します。
XSSの脆弱性のためにJavaScriptが実行されポップアップが表示されます。（課題が解決したので赤線箇所にメッセージが表示されています）
「DOM XSS」のステータスがアップデートされています。
Login Admin（難易度２）の課題にチャレンジしてみよう
赤線箇所のアイコン（難易度２）のみが選択されている状態にします。
難易度２の課題の中に「Login Admin」というものがありますので、これにチャレンジします。
「Adminでログインせよ」という課題です。
右上の「Account」を押します。
「Login」を押します。
ログイン画面に遷移します。
下記のように入力して「Log in」ボタンを押します。
Email：' or 1=1 --
Password：aaaa（何でもOKです)
課題成功の旨のメッセージが表示されます。
課題成功のメッセージは右の「×」を押すことで消すことができます。
Adminでログインしているのかを確認するために「Account」を押します。
プルダウンメニューのメールアドレスが「admin@juice-sh.op」となっているのでAdminでログインしていることがわかります。
CSRF（難易度３）の課題にチャレンジしてみよう
赤線箇所のアイコン（難易度３）のみが選択されている状態にします。
難易度３の課題の中に「CSRF」というものがありますので、これにチャレンジします。
「あるユーザーのUsernameをCSRFを使って変更せよ」という課題です。
ここでは「Jim」というユーザーのUsernameをCSRFを使って変更することにします。
現在Adminでログインしているので一旦ログアウトします。
次のように入力してJimというユーザーでログインします。
Email：jim@juice-sh.op
Password：ncc-1701
「Account」のプルダウンメニューでJimのメアドを選択します。
Jimのプロフィール画面に遷移します。
Jim本人の場合は上図の赤線箇所でUsernameを変更することができますが、Jim以外の人がCSRFを使ってJimのUsernameを変更するというのが今回の課題です。
デベロッパーツールを使ってフォームのHTMLの内容を確認します。
次のようなコードを入力した「csrf.html」というファイルを作成します。
<form action="http://localhost:3000/profile" method="POST">
<input name="username"><br>
<input type="submit" value="Set Username">
</form>上記のファイルをブラウザで開いて「Taro」と入力して「Set Username」を押します。
その結果、Juice Shopのプロフィール画面に遷移してJimのUsernameがTaroに変更されます。
課題は解決しましたが、ステータスは更新されません。それは指定された「another origin」からCSRFを実行していないからです。
下記が指定された「another origin」ですが、ここから「http://localhost:3000」にアクセスできないため、今回は自分のパソコンからCSRFを実行しました。
Juice Shopの機能の紹介
Juice Shopは脆弱性のあるECサイトですが、いろいろな機能が実装されているので、ここでは次の機能を簡単に紹介します。
商品購入
カスタマーフィードバック
サポートチャット
Jimというユーザーでログインしておきます。
商品購入
商品購入の流れを紹介します。
右上の「Your Basket」を押します。
商品購入の手続きを進めます。
商品購入の手続きを進めます。
商品購入の手続きを進めます。
商品購入の手続きを進めます。
商品購入の手続きを進めます。
商品購入の手続きが完了しました。
カスタマーフィードバック
カスタマーフィードバックの流れを紹介します。
左上のアイコンを押します。
メニューが表示されますので「Customer Feedback」を選択します。
適当に入力します。（CAPTCHAの箇所は正しい計算結果を入力します）
サポートチャット
サポートチャットの流れを紹介します。
メニューの中の「Support Chat」を選択します。
チャット画面が表示されます。
適当にやりとりします。
デフォルトユーザーの設定ファイルの紹介
Juice Shopにはデフォルトで用意されているユーザーがいます。
今までに登場したものだと次の２つですが、この他にもたくさんいます。
Admin
email: admin@juice-sh.op
password: admin123
role: admin
Jim
email: jim@juice-sh.op
password: ncc-1701
role: customer
ユーザー情報はGitHubリポジトリのコードの中の「data/static/users.yml」で確認することができます。
下記の赤線箇所がAdminとJimに関する情報です。
メールアドレスのドメインは「config/default.yml」で確認することができます。
ルーティングファイルの紹介
Juice Shopのルーティングに関しては「frontend/src/app/app.routing.ts」で確認することができます。
例えば「/administration」というパスは下記の赤線箇所で定義されていますが、Admin権限がないと見れない設定になっています。
実際にAdminでログインして「/administration」が見れるかを確認してみます。
Adminでログインします。
「/administration」を入力してENTERキーを押します。
Administration画面に遷移しました。
先程Jimが行ったカスタマーフィードバックが確認できます。
Juice Shopのアーキテクチャの紹介
Juice Shopにはオンラインドキュメントがあり、そこではJuice Shopに関する様々な情報を得ることができます。
オンラインドキュメントは下記の赤線箇所のリンクから行けます。
下記の赤線箇所をクリックするとJuice Shopのアーキテクチャを確認することができます。
Juice Shopは次のような構成で実現されています。
フロントエンド：Angularフレームワーク
バックエンド：Expressフレームワーク
例えば下記の画面を表示するためにバックエンドからフロントエンドに渡されているJSONデータを確認してみます。
「frontend/src/app/Services/product.service.ts」のコードを確認してみます。
下記の赤線箇所でバックエンドのAPIの情報が確認できます。
ブラウザで「http://localhost:3000/rest/products/search?q=」（上記で確認したAPI）と入力するとJSONデータ（生データ）が表示されます。
JSON形式で表示するわかりやすいです。
以上、Juice Shopについて簡単に紹介しました。
大変有益な学習教材だと思いますので、是非とも有効活用していただければと思います。