

**推出 的新主控台體驗 AWS WAF**

您現在可以使用更新後的體驗，在主控台的任何位置存取 AWS WAF 功能。如需詳細資訊，請參閱[使用 主控台](https://docs.aws.amazon.com/waf/latest/developerguide/working-with-console.html)。

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

# AWS WAF JavaScript 整合
<a name="waf-javascript-api"></a>

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

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

CAPTCHA 拼圖和無提示挑戰只能在瀏覽器存取 HTTPS 端點時執行。瀏覽器用戶端必須在安全的內容中執行，才能取得字符。
+ 智慧型威脅 APIs 可讓您透過無提示的用戶端瀏覽器挑戰來管理權杖授權，並在您傳送至受保護資源的請求中包含權杖。
+ CAPTCHA 整合 API 會新增至智慧型威脅 APIs，並可讓您自訂用戶端應用程式中 CAPTCHA 拼圖的位置和特性。此 API 利用智慧型威脅 APIs 來取得 AWS WAF 權杖，以便在最終使用者成功完成 CAPTCHA 拼圖後，用於 頁面。

透過使用這些整合，您可以確保用戶端的遠端程序呼叫包含有效的字符。當您的應用程式頁面上有這些整合 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>
```

**CAPTCHA JavaScript API 的範例實作**  
CAPTCHA 整合 API 可讓您自訂最終使用者的 CAPTCHA 拼圖體驗。CAPTCHA 整合利用 JavaScript 智慧型威脅整合進行瀏覽器驗證和權杖管理，並新增用於設定和轉譯 CAPTCHA 拼圖的函數。

下列清單顯示 CAPTCHA JavaScript API 在 Web 應用程式頁面中典型實作的基本元件。

```
<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)
+ [使用 CAPTCHA JavaScript API](waf-js-captcha-api.md)