AWS WAF JavaScript 集成 - AWS WAF、AWS Firewall Manager、AWS Shield Advanced 和 AWS Shield 网络安全分析器

介绍 AWS WAF 的全新控制台体验

现在，您可以使用更新后的体验访问控制台中任意位置的 AWS WAF 功能。有关更多详细信息，请参阅 使用更新的控制台体验。

AWS WAF JavaScript 集成

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

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

只有当浏览器访问 HTTPS 端点时，才能运行验证码拼图和静默质询。浏览器客户端必须在安全环境中运行才能获取令牌。

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

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

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

智能威胁 API 的实现示例

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

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

下表显示了 web 应用程序页面中验证码 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>
主题