AWS WAF JavaScript 整合 - AWS WAF、 AWS Firewall Manager、和 AWS Shield Advanced

本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

AWS WAF JavaScript 整合

您可以使用 JavaScript 整合 API 在瀏覽器和其他執行的裝置中實作 AWS WAF 應用程式整合 JavaScript。

驗證碼謎題和無聲挑戰只能在瀏覽器訪問 HTTPS 端點時運行。瀏覽器客戶端必須在安全上下文中運行才能獲取令牌。

  • 智慧型威脅 API 可讓您透過無訊息的用戶端瀏覽器挑戰來管理 Token 授權，並將權杖包含在傳送至受保護資源的要求中。

  • CAPTCHA 整合 API 可新增至智慧型威脅 API，讓您自訂用戶端應用程式中 CAPTCHA 難題的位置和特性。該 API 利用智能威脅 API 獲取 AWS WAF 令牌，以便在最終用戶成功完成 CAPTCHA 難題後在頁面中使用。

通過使用這些集成，您可以確保客戶端的遠程過程調用包含有效的令牌。當這些整合 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 應用程序頁面中驗證碼 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>
主題