統合 getToken を使用する方法 - AWS WAF、AWS Firewall Manager、および AWS Shield Advanced

統合 getToken を使用する方法

このセクションでは、getToken オペレーションの使用方法について説明します。

AWS WAF は、保護されているエンドポイントへのリクエストに、現在のトークンの値を含む aws-waf-token という名前の cookie を含める必要があります。

getToken オペレーションとは、AWS WAF トークンを取得し、名前を aws-waf-token にして、値をトークン値に設定し、現在のページの cookie に保存する非同期 API コールです。このトークン cookie は、必要に応じてページで使用できます。

getToken を呼び出すと、次が実行されます。

  • 期限切れでないトークンが既に使用可能な場合、コールは直ちにそれを返します。

  • それ以外の場合、コールは トークンプロバイダーから新しいトークンを取得します。トークン取得ワークフローが完了するまで最大で 2 秒間の猶予があり、この待機期間が経過するとタイムアウトします。オペレーションがタイムアウトすると、呼び出しコードが処理しなければならないエラーがスローされます。

getToken オペレーションには付随する hasToken オペレーションがあり、aws-waf-token cookie が現在有効期限が切れていないトークンを保持しているかどうかを示します。

AwsWafIntegration.getToken() は有効なトークンを取得し、それを Cookie として保存します。ほとんどのクライアント呼び出しは、この Cookie を自動的にアタッチしますが、アタッチしないクライアント呼び出しもあります。例えば、ホストドメイン間で行われた呼び出しは Cookie にアタッチしません。以下の実施詳細では、両方のタイプのクライアント呼び出しを操作する方法を示します。

aws-waf-token Cookie にアタッチする呼び出しの基本的な getToken 実施

次のリストの例は、ログインリクエストで getToken オペレーションを実装するための標準コードを示しています。

const login_response = await AwsWafIntegration.getToken() .catch(e => { // Implement error handling logic for your use case }) // The getToken call returns the token, and doesn't typically require special handling .then(token => { return loginToMyPage() }) async function loginToMyPage() { // Your existing login code }
トークンが getToken から利用可能になった後にのみフォームを送信する

次のリストは、有効なトークンが使用可能になるまで、フォーム送信をインターセプトするイベントリスナーを登録する方法を示しています。

<body> <h1>Login</h1> <p></p> <form id="login-form" action="/web/login" method="POST" enctype="application/x-www-form-urlencoded"> <label for="input_username">USERNAME</label> <input type="text" name="input_username" id="input_username"><br> <label for="input_password">PASSWORD</label> <input type="password" name="input_password" id="input_password"><br> <button type="submit">Submit<button> </form> <script> const form = document.querySelector("#login-form"); // Register an event listener to intercept form submissions form.addEventListener("submit", (e) => { // Submit the form only after a token is available if (!AwsWafIntegration.hasToken()) { e.preventDefault(); AwsWafIntegration.getToken().then(() => { e.target.submit(); }, (reason) => { console.log("Error:"+reason) }); } }); </script> </body>
クライアントがデフォルトで aws-waf-token Cookie にアタッチしない場合のトークンとのアタッチ

AwsWafIntegration.getToken() は有効なトークンを取得し、それを Cookie として保存しますが、デフォルトの場合、すべてのクライアント呼び出しがこの Cookie にアタッチするわけではありません。例えば、ホストドメイン間で行われた呼び出しは Cookie にアタッチしません。

fetch ラッパーはこれらのケースを自動的に処理しますが、fetch ラッパーを使用できない場合は、カスタム x-aws-waf-token ヘッダーを使用して処理できます。AWS WAF は、aws-waf-token Cookie からトークンを読み取るだけでなく、このヘッダーからトークンを読み取ります。次のコードは、ヘッダーの設定例を示しています。

const token = await AwsWafIntegration.getToken(); const result = await fetch('/url', { headers: { 'x-aws-waf-token': token, }, });

デフォルトでは、AWS WAF はリクエストされたホストドメインと同じドメインを含むトークンのみを受け入れます。クロスドメイントークンには、ウェブ ACL トークンドメインリストの対応するエントリが必要です。詳細については、「AWS WAF ウェブ ACL トークンドメインリストの設定」を参照してください。

クロスドメイントークンの使用の詳細については、「aws-samples/aws-waf-bot-control-api-protection-with-captcha」を参照してください。