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

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

AWS WAF JavaScript 整合

本節說明如何使用 AWS WAF JavaScript 整合。

您可以使用 JavaScript 集成APIs來實現 AWS WAF 瀏覽器和其他執行的設備中的應用程序集成 JavaScript。

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

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

  • CAPTCHA整合功能API增加了智慧型威脅APIs，並可讓您自訂用戶端應用程式中CAPTCHA難題的位置和特性。這API利用智能威脅APIs來獲取 AWS WAF 令牌在最終用戶成功完成CAPTCHA拼圖後在頁面中使用。

通過使用這些集成，您可以確保客戶端的遠程過程調用包含有效的令牌。當這APIs些集成在應用程序的頁面上時，您可以在 Web 中實現緩解規則ACL，例如阻止不包含有效令牌的請求。您也可以實作規則來強制使用用戶端應用程式取得的權杖，方法是使用 Challenge 或 CAPTCHA 規則中的動作。

智慧型威脅實作範例 APIs

下列清單顯示 Web 應用程式頁面中一般實作智慧型威脅APIs的基本元件。

<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>
實施示例 CAPTCHA JavaScript API

CAPTCHA整合API可讓您自訂最終使用者的CAPTCHA拼圖體驗。此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>
主題