

**の新しいコンソールエクスペリエンスの紹介 AWS WAF**

更新されたエクスペリエンスを使用して、コンソールの任意の場所で AWS WAF 機能にアクセスできるようになりました。詳細については、[「コンソールの使用](https://docs.aws.amazon.com/waf/latest/developerguide/working-with-console.html)」を参照してください。

翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

# AWS WAF JavaScript 統合
<a name="waf-javascript-api"></a>

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

JavaScript 統合 APIs を使用して、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="{{protection pack (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>
```

**Topics**
+ [トークンで使用するドメインの提供](waf-js-challenge-api-set-token-domain.md)
+ [コンテンツセキュリティポリシーでの JavaScript API の使用](waf-javascript-api-csp.md)
+ [インテリジェントな脅威に対応した JavaScript API の使用](waf-js-challenge-api.md)
+ [CAPTCHA JavaScript API を使用する](waf-js-captcha-api.md)