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

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

AWS WAF JavaScript 整合

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

  • 智慧型威脅 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>