Amazon WAF JavaScript 集成 - Amazon WAFAmazon Firewall Manager、和 Amazon Shield Advanced
Amazon Web Services 文档中描述的 Amazon Web Services 服务或功能可能因区域而异。要查看适用于中国区域的差异，请参阅 中国的 Amazon Web Services 服务入门 (PDF)。

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

Amazon WAF JavaScript 集成

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

  • 智能威胁 API 允许您通过静默的客户端浏览器质询来管理令牌授权，并在发送到受保护资源的请求中包含令牌。

  • 验证码集成 API 增加了智能威胁 API，允许您自定义验证码拼图在客户端应用程序中的位置和特征。此 API 利用智能威胁 API 获取 Amazon WAF 令牌，以便在最终用户成功完成验证码拼图后在页面中使用。

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

下表显示了 Web 应用程序页面中智能威胁 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>

验证码集成 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>
主题