AWS WAF JavaScript 統合 - AWS WAF、AWS Firewall Manager、および AWS Shield Advanced

AWS WAF JavaScript 統合

このセクションでは、AWS WAF JavaScript 統合を使用する方法について説明します。

JavaScript 統合 API を使用して、JavaScript を実行するブラウザやその他のデバイスに AWS WAF アプリケーション統合を実装できます。

CAPTCHA パズルとサイレントチャレンジは、ブラウザが HTTPS エンドポイントにアクセスしている場合にのみ実行できます。トークンを取得するには、ブラウザクライアントが安全なコンテキストで実行されている必要があります。

  • インテリジェントな脅威に対応した API を使用すると、クライアント側のサイレントブラウザのチャレンジを通じてトークン認可を管理し、保護されたリソースに送信するリクエストにトークンを含めることができます。

  • CAPTCHA 統合 API にインテリジェントな脅威に対応した API が追加され、クライアントアプリケーションでの CAPTCHA パズルの配置と特性をカスタマイズすることができるようになりました。この API は、インテリジェントな脅威に対応した API を活用し、エンドユーザーが CAPTCHA パズルの完成に成功した後にページで使用する AWS WAF トークンを取得します。

これらの統合を使用すると、クライアントによるリモートプロシージャコールに有効なトークンが含まれていることを確認できます。これらの統合 API がアプリケーションのページで実行されている場合、有効なトークンを含まないリクエストをブロックするなどの緩和ルールをウェブ ACL で実装できます。ルール内の Challenge または CAPTCHA アクションを使用して、クライアントアプリケーションが取得したトークンの使用を強制するルールを実装することもできます。

インテリジェントな脅威 API の実施例

次のリストは、ウェブアプリケーションページでのインテリジェントな脅威に対応した API の一般的な実装の基本コンポーネントを示しています。

<head>
<script type="text/javascript" src="Web ACL integration URL/challenge.js" defer></script>
</head>
<script>
const login_response = await AwsWafIntegration.fetch(login_url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: login_body
  });
</script>
CAPTCHA JavaScript API の実施例

CAPTCHA 統合 API を使用すると、エンドユーザーの CAPTCHA パズルエクスペリエンスをカスタマイズできます。CAPTCHA 統合では、ブラウザの検証とトークン管理用に JavaScript のインテリジェントな脅威に対応した統合が活用されているだけでなく、CAPTCHA パズルの設定とレンダリング用の機能も追加されています。

次のリストは、ウェブアプリケーションページでの CAPTCHA JavaScript API の一般的な実装の基本コンポーネントを示しています。

<head>
    <script type="text/javascript" src="<Integration URL>/jsapi.js" defer></script>
</head>

<script type="text/javascript">
    function showMyCaptcha() {
        var container = document.querySelector("#my-captcha-container");
        
        AwsWafCaptcha.renderCaptcha(container, {
            apiKey: "...API key goes here...",
            onSuccess: captchaExampleSuccessFunction,
            onError: captchaExampleErrorFunction,
            ...other configuration parameters as needed...
        });
    }
    
    function captchaExampleSuccessFunction(wafToken) {
        // Use WAF token to access protected resources
        AwsWafIntegration.fetch("...WAF-protected URL...", {
            method: "POST",
            ...
        });
    }
    
    function captchaExampleErrorFunction(error) {
        /* Do something with the error */
    }
</script>

<div id="my-captcha-container">
    <!-- The contents of this container will be replaced by the captcha widget -->
</div>
トピック