メインコンテンツまでスキップ

Webアプリケーションの初期設定の流れ

info

本チュートリアルで扱う機能は、Web アプリケーション診断機能をご契約いただいた組織でのみご利用いただけます。

本ページでは、診断対象のWebアプリケーションを作成し、診断や巡回のための認証設定を行うための手順についてご説明します。

初期設定の流れ

Webアプリケーションを診断するためには、最初に必要となる設定や準備作業があります。 診断対象のアプリケーションの画面構築アーキテクチャが、MPA(Multi Page Application)の方とSPA(Single Page Application)の方では内容が多少異なりますが、おおよそ以下の流れで設定を進めていきます。

  • アプリケーションを登録する
  • 認証設定をする
  • 巡回設定をする

アプリケーションを登録する

アプリケーションのメニューにハイライト1があり、そのページ内のアプリケーションの登録にハイライト2がある

診断対象のアプリケーションを新規登録または追加するためには、画面上部のメニューから「(1)アプリケーション」を選び、「(2)アプリケーションの登録」を押していただくとアプリケーションを登録することができます。

Shisho Cloud内のスコープの登録にハイライト アプリケーションの登録の際、必須で設定していただく項目はアプリケーション名、認証の有無、スコープの3点です。

設定項目詳細
1. アプリケーション名Shisho Cloud上で表示する
アプリケーション名を設定していただきます。
[Staging]Flatt Example Application
2. 認証の有無診断対象のアプリケーションがBasic認証や
ユーザーログインによる認証が必要かどうか
を選択していただきます。
はい
3. スコープアプリケーションの診断対象とする範囲を
定義します。詳細
https://stg-flatt.example

認証設定をする(ユーザーログイン以外の設定)

アプリケーションを登録すると、初期設定のチュートリアルが開始されます。

Shisho Cloud内の認証設定の選択にハイライト 最初に診断対象のアプリケーションの (1)認証手段を選択していただきます。

次に (2)Basic認証や独自実装のAPIキー認証などを用いて、リクエストヘッダーに固定のキーが必要な場合は、この画面で設定していただきます。ユーザーログインが必要な場合は次の画面以降で設定していきます。

Basic認証、または固定値のヘッダーの設定が完了したら、(3)次へを押してください。

認証設定をする(ユーザーログインの設定)

メールアドレスやパスワード等を用いた対象アプリケーションの利用ユーザーによるログインが必要な場合の認証設定について説明します。

ユーザーログインによる認証設定の全体像を確認する

ログイン画面にGETし、取得してきたレスポンスの結果をPOSTのリクエストに利用している図

ログイン処理時に取得した認証情報をShisho Cloudが巡回・診断時に利用できるようにするため、下記の流れで設定していきます。

  1. 認証情報を設定する場所を選択する
  2. ログイン処理から認証情報を取得する
  3. ログイン処理から取得した認証情報をShisho Cloudに登録する
  4. ログイン後にアクセス可能な画面で疎通確認する

1.認証情報を設定する場所を選択する

Shisho Cloud内の認証情報を設定する場所を選択にハイライト

まずはじめに、認証情報をCookieに設定しているか、リクエストヘッダーで設定しているかを選択していただきます。ログイン処理を通じて取得したセッションや認証トークン等の設定は次のセクション以降で説明していきます。

2.ログイン処理から認証情報を取得する

ユーザーによるログイン処理の際に発行される認証情報を取得するためのリクエストをShisho Cloudに設定していきます。

診断対象のアプリケーションのログイン処理が、ユーザーがIDやパスワード等をログインフォームで送信するような、「アプリケーションにリクエストを送る」タイプなのか、またはAuth0やFirebaseなど「外部サービスにリクエストを送る」タイプなのかによって、設定する項目は変わります。

それぞれの認証方法について説明していきます。

2-1.アプリケーションにリクエストを送る場合

Shisho Cloud内のアプリケーションのリクエ��ストフォームにハイライト

「(1)認証情報の取得方法」で「アプリケーションにリクエスト」を選択してください。 次に、ログイン処理の際の最初のリクエストをどこに送信しているかを「(2)リクエストの送信先」に入力してください。

「(3)動作確認」を押すと、該当の送信先に対するHTTPリクエストとHTTPレスポンスを確認することができます。入力内容の確認等にご利用ください。

また、ログイン処理が複数ステップ必要な場合もございます(例: csrf_tokenを利用している場合などで、ログイン画面にGETした際のレスポンスの一部の値を用いてPOSTで送信している場合)。 複数ステップが必要な場合は「(4)追加」を押して、ステップを追加することが可能です。

info

ログイン処理の流れに不明な点がある方は、ブラウザ開発者ツールを用いて、ログイン処理をしている際のネットワークを確認してみるのをオススメします。

Shisho Cloud内のリクエストパラメータの選択にハイライト

ログイン処理でcsrf_token等をリクエストヘッダーに設定している場合やログイン用のIDやパスワードなどをリクエストBodyに設定している場合、「(5)リクエストパラメータの選択」から認証リクエストを設定している箇所を選択いただくと入力フォームが表示されます。

変数について

Shisho Cloud内の変数機能にハイライト

Shisho Cloudでは、リクエストに直前のステップから取得した値を抽出したい場合に、変数として登録することが可能です。
(例: csrf_tokenを利用している場合などで、ログイン画面にGETした際のレスポンスを変数として抽出が可能)

変数を利用したい方は「(6)変数を挿入」を選択していただき、「新しい変数を追加する」から新規の変数を作成可能です。

Shisho Cloud内の変数登録ダイアログ

変数の設定では、下記の項目が設定可能です。

設定項目詳細
7. 変数名Shisho Cloud内で利用する変数名を指定できます。
8. Valueの抽出元どのステップのレスポンスから値を抽出するかを設定可能です。
9. 抽出の手段正規表現でマッチした値を抽出するか、セットされたCookieを
全て抽出するかを選択できます。
10. Valueの抽出箇所正規表現で抽出する場合のみ、レスポンスのHeaderまたはBodyの
どこから抽出するかを選択していただきます。
11. 正規表現正規表現を指定ができます。

例: name="authenticity_token" value="([^"]+)"
12. 正規表現のグループ番号正規表現は、文字列の集合を表す汎用的な記法です。
何番目のグループにマッチした文字列を抽出するかを指定できます。

例: 1

Shisho Cloud内の変数登録ダイアログの抽出の手段がCookieになっている

セットされたCoookieを全て抽出する場合、正規表現を書かずに設定が可能です。

Bear認証など、

設定した値の確認

Shisho Cloud内のステップ2というカード下部の動作確認にハイライト

ログイン処理の設定が完了した場合、Shisho Cloudがログインに成功できるか「(13)動作確認」をしてみましょう。

2-2.外部サービス(Auth0など)にリクエストを送る場合

Shisho Cloud内のステップというカード内で外部サービスが選択されている

Shisho Cloudでは現状Auth0、Firebase、Cognitoを利用した外部サービスの認証に対応しております。ユーザーが診断対象のアプリケーションにログインする際の情報と外部サービスの設定に関する情報を設定しましょう。

3.ログイン処理から取得した認証情報をShisho Cloudに登録する

1.認証情報を設定する場所を選択する」で設定したCookieまたはカスタムヘッダーへ、「2.ログイン処理から認証情報を取得する」で取得した認証情報を設定する流れを説明します。

Shisho Cloud内のログイン処理から取得した認証情報の中で、変数を挿入にハイライト1、更新間隔にハイライト2、ログイン後にアクセス可能なエンドポイントにハイライト3 「(1)変数を挿入」を押し「変数について」で説明した流れで、ログイン処理から抽出した値を登録します。

認証情報を更新間隔を設定する

次にセッションや認証トークン等の期限が切れるタイミングに合わせて、Shisho Cloudが最新の認証情報を取得できるように認証情報の(2)更新間隔を設定しましょう。

4.ログイン後にアクセス可能な画面で疎通確認する

全ての設定が完了したら、(3)ログイン後にアクセス可能なエンドポイントに対して動作確認をしてみましょう。

info

ここで設定するエンドポイントは認証が成功しているかどうかを確認するために利用するだけです。認証していないとアクセスできないエンドポイントを適当に指定してみましょう。

動作確認を行い、認証後のエンドポイントのアクセスが成功していそうであれば、認証設定は終了です。

巡回設定をする

MPA(Multi Page Application)の場合

Shisho Cloud では診断対象アプリケーションのエンドポイントを洗い出すために、自動巡回機能を提供しています。アプリケーションのトップページを入力すると、Shisho Cloud はページ中のリンクやフォームを辿ってアプリケーションを自動で巡回し、エンドポイントを洗い出します。

詳細はMPA 用: 自動巡回でご確認ください。

SPA(Single Page Application)の場合

ReactやVueを利用するSingle-Page ApplicationやAjaxなどのアプリケーションの方はShisho Cloudがエンドポイントを把握するため、OpenAPISpecification からのインポート、GraphQL スキーマからのインポート、Connect RPC からのインポートに対応しております。

詳細は下記をご確認ください。

巡回設定が完了すれば、Webアプリケーションのセットアップは終了です。

よくある質問

変数の抽出がうまくいかない

正規表現の記法が間違っている可能性がございます。動作確認を実行していただくと、各ステップから抽出された変数の値が確認できます。 また、変数の抽出元がBodyであるはずなのに、Headerにしている場合も抽出に失敗してしまうので、抽出元を再度ご確認ください。

リクエストパラメータに変数と固定値を組み合わせたい

Bear {{.変数名}} のような形で指定することが可能です。 固定値のみ送信したい場合はFixedValueのような形で指定することもできます。

ログイン画面から返ってきたSet-Cookieを次のステップのリクエストで使いたい

「(1)変数を挿入」を押し「変数について」で説明した流れで変数を作成することができます。 「抽出の手段」の「セットされた Cookie を抽出する」で変数を定義し、リクエストに指定してください。