← ニュースに戻る

SPA(シングルページアプリケーション)の待機画面

オンライン待ち行列 spa0

CrowdHandlerでは、URLやページの保護についてよく話題にしています。しかし、最近の多くのウェブサイトでは、SPA(シングルページアプリケーション)のパラダイムが採用されています。

もしあなたのサイトがREACT、Angular、Vueなどのフレームワークを使用しているなら、おそらく「CrowdHandlerは私のSPAを保護できるのか?」と知りたいと思うでしょう。

もちろん、答えは「はい」です。しかも、たったの2ステップで簡単にできます。

SPAを保護するためのキューシステムの導入

まず、SPAの仕組みについて考えてみましょう。 従来のウェブサイトのように複数のHTMLページで構成されるのではなく、SPAはJavaScriptフレームワークを読み込む単一のHTMLページで構成されています。ユーザーがSPA内を移動する際、ブラウザにURLが表示されることはありますが、実際にはアプリケーションが毎回サーバーに戻って全く別のページを読み込んでいるわけではありません。その代わりに、同じドメイン上に存在しない可能性のあるコンテンツに対してさまざまなAPI呼び出しを行い、画面の更新を構成しています。

ステップ1:JavaScriptの統合

したがって、SPAを過度なトラフィックから保護するためのオンライン待ち行列システムをお探しなら、まず第一に、SPAモードを有効にしたCrowdHandlerのJavaScript統合機能を利用してください。この設定にはわずか15分しかかかりませんがユーザーのリクエストを確認し、必要に応じてユーザーを待機室にリダイレクトするという、最初の、そして最も重要な保護層を提供してくれます。

CrowdHandlerがSPAモードで動作している場合、サーバーへのリクエストを監視するのではなく、JavaScriptによってブラウザのURLが変更されることを監視します。ただし、ページリクエストがあったかのように反応します。つまり、CrowdHandlerを使用することで、サイト全体を保護することも、SPA内の特定の画面のみを保護することも可能です。例えば、チケット販売アプリケーション内の単一のイベントを保護する場合などが挙げられます。 SPAモードのCrowdHandlerは、従来のWebサイトとまったく同じ保護機能とユーザー体験を提供します。これには、ユーザーのセッションを維持するためにウィンドウのロケーション変更に対応することも含まれます。

ステップ2:サーバーサイド/APIの保護

SPAで基本的な待合室の保護機能を迅速に導入したい場合、CrowdHandlerのJavaScript統合機能があれば、ほとんどのユースケースにおいて負荷を制御できるはずです。ただし、真のセキュリティを確保するためには、サーバーサイドでのチェックも必要です。

鋭い読者の皆さんはお気づきかもしれませんが、SPAはユーザー体験を提供するものの、実際に保護が必要なのはAPIの方です。それは単に過負荷から守るためだけでなく、JavaScriptとの連携を迂回してAPIと直接やり取りできるほど知識のある者から守るためでもあります。

(再びチケット販売の例を挙げましょう。劇場への観劇を予約するユーザーは、SPA上の座席選択マップを操作して座席を選ぶことができますが、SPAはその情報を座席予約APIから取得しており、そのAPIは同じドメイン名上で動作していない可能性さえあります。したがって、そのAPIは保護する必要があります。)

そこで、ステップ2として――JavaScriptとの連携に加え――CrowdHandlerをAPIに統合します。

これは、第2の保護層として機能するだけでなく、重要なパフォーマンス情報をCrowdHandlerに送信するため、Autotuneなどの機能を最大限に活用することができます。

APIとの統合をさらに進めることで、CrowdHandlerはAPIにアクセスするセッションをカウントし、それらをキューに入れ、SPAで発行されたキュートークンと関連付けることが可能になります。つまり、誰かがAPI上で操作を実行しようとしても、SPAから発行された有効なトークンを持っていない場合は、そのリクエストを無視することができます。

これを設定するにはいくつかの方法があり、サポート記事「シングルページアプリケーション(SPA)の保護 - 高度な統合」で詳しく説明しています。この記事には、実際に動作するコードや、CloudFront用の動作するEdgeWorkerも掲載されており、必要に応じて修正して利用することができます。

安心感:SPA向けのCrowdHandler

CrowdHandler を使って SPA を保護するのは簡単で、従来のウェブサイトと同じように、コントロールパネル内ですべての設定を行うことができます。

SPAで待合室のような体験を提供しつつ、APIを完全に保護する方法をお探しなら、今すぐCrowdHandlerをお試しください。

登録する