

**引入全新的主机体验 Amazon WAF**

现在，您可以使用更新的体验访问控制台中任意位置的 Amazon WAF 功能。有关更多详细信息，请参阅[使用控制台](https://docs.amazonaws.cn/waf/latest/developerguide/working-with-console.html)。

本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

# Amazon WAF JavaScript 集成
<a name="waf-javascript-api"></a>

本节介绍如何使用集 Amazon WAF JavaScript 成。

您可以使用该 JavaScript 集成 APIs 在浏览器和其他执行设备中实现 Amazon WAF 应用程序集成。 JavaScript

只有当浏览器访问 HTTPS 端点时，才能运行验证码拼图和静默质询。浏览器客户端必须在安全环境中运行才能获取令牌。
+ 智能威胁 APIs 允许您通过静默的客户端浏览器挑战来管理令牌授权，并在发送到受保护资源的请求中包含令牌。
+ CAPTCHA 集成 API 增加了智能威胁 APIs，允许您自定义验证码拼图在客户端应用程序中的位置和特征。在最终用户成功完成验证码拼图后，此 API 利用智能威胁获取 Amazon WAF 令牌 APIs 以在页面中使用。

通过使用这些集成，可以确保客户端的远程过程调用包含有效的令牌。在应用程序页面上进行 APIs 这些集成后，您可以在保护包 (Web ACL) 中实施缓解规则，例如阻止不包含有效令牌的请求。您还可以通过在规则中使用 Challenge 或 CAPTCHA 操作来实施强制使用客户端应用程序获取的令牌的规则。

**智能威胁的实施示例 APIs**  
以下列表显示了 Web 应用程序页面 APIs 中智能威胁的典型实现的基本组件。

```
<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>
```

**验证码 AP JavaScript I 的实现示例**  
验证码集成 API 可让您自定义最终用户的验证码拼图体验。CAPTCHA 集成利用 JavaScript 智能威胁集成进行浏览器验证和令牌管理，并添加了配置和呈现 CAPTCHA 拼图的功能。

以下列表显示了 Web 应用程序页面中典型的 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)
+ [使用验证码 API JavaScript](waf-js-captcha-api.md)