| Table of Contents |
|---|
...
一、WAF Client SDK介绍
1. 集成SDK
通过在客户端集成亚马逊云科技 WAF Client SDK，可以高效方便地帮助业务抵御 7 层 DDoS 攻击。与传统通过 WAF 自定义规则进行 Token 过滤的方式相比，WAF 智能威胁检测仅需要在前端集成 SDK（支持 iOS/Android/Web），免去了开发和维护复杂的 Token 管理和分发流程。WAF SDK 与 WAF 后端自动实现了基于 Client Session 的 、的 Token 分发和校验机制，简化了安全管理的复杂度。
2. 静态Token
在互联网行业的客户端应用中，通常使用静态的 Token Header 来进行合法请求过滤。亚马逊云科技的高性能大容量 WAF 可以在源站之前进行精准的请求过滤，将 HTTP Flood 类型的 DDoS 攻击请求阻挡在靠近攻击源的位置，从而有效保护源站免受大规模攻击的影响。不同用户可能会采用不同的静态 Token 分发方法，但都可以依赖高容量的 WAF 来实现精准的源站保护。
3. 动态Token
对于需要动态分发 Token 到各种平台的海量客户端的场景，可以使用亚马逊云科技的 WAF Client SDK 来满足静态 Token 的需求。通过统一的开发 SDK，可以实现 Token 的动态分发和校验，简化了客户端的开发工作，并确保了系统的安全性。WAF Client SDK 能够自动处理基于 Client Session 的 Token 管理，极大地提升了安全防护的效率和可靠性。
4. 使用场景与优势
4.1 抵御7层DDoS攻击
通过 SDK 集成，客户端应用可以有效抵御 7 层 DDoS 攻击，保护 Web 应用的可用性和安全性。
4.2 简化Token管理
传统的 Token 过滤方式需要复杂的 Token 管理和分发流程，而 WAF Client SDK 自动处理这些操作，降低了开发和维护成本。
4.3 高效过滤恶意请求
静态 Token 和动态 Token 的结合使用，可以在靠近攻击源的位置阻挡恶意请求，减轻源站的压力，确保其稳定运行。
4.4 跨平台支持
WAF Client SDK 支持 iOS、Android 和 Web 平台，使开发者能够轻松在多种客户端环境中集成安全防护措施。
5、参考手册
https://docs.aws.amazon.com/waf/latest/developerguide/waf-js-challenge-api.html
...
二、客户端集成WAF Client SDK
1、集成介绍
WAF Client SDK 与应用程序客户端进行集成后，能自动与后台配置的 与应用程序客户端进行集成后，能够自动与后台配置的 WAF ACL Bot Control 规则进行联动，完成 token Token 获取。SDK 也会把应用程序发送的请求，自动带上 会将应用程序发送的请求自动附带 Token 信息发送给 WAF 后台进行校验，Token 刷新的功能也原生就支持了。 WAF 后台进行校验，并且原生支持 Token 刷新功能。WAF Client SDK 提供 iOS/Android Mobile SDK 和 Web JavaScript API。API，确保开发者能够在各种平台上实现安全防护。
下面分步骤介绍如何为 Web 应用集成 JavaScript API 并配置 WAF ACL 规则进行攻击流量防护，具体可参考AWS WAF JavaScript 集成接入文档。
...
2、部署架构图
3、WEB集成-
...
JavaScript集成-challenge SDK:
参考手册：https://docs.aws.amazon.com/waf/latest/developerguide/waf-js-challenge-api.html
3.1、步骤一：创建WebACL和配置BotControl
1、创建 WEB ACL，并添加 AWS WAF Bot Control 托管规则
添加 AWSManagedRulesBotControlRuleSet 托管规则到 ACL 中，并把 Rule 级别设置为 Target，可以实现客户端请求的 token 验证。如果请求中不包含 token 或者 token 无效，这条托管规则会触发 Challenge rule action，从而触发 Client SDK 在后台静默完成 Challenge 计算任务得到 token。
...
Captcha Integration
第1步：创建WebACL和添加BotControl托管规则
如果请求中不包含 token 或者 token 无效，这条托管规则会触发 Captcha rule action，从而触发 Client SDK 在后台静默完成 Captcha 计算任务得到 token。
创建托管规则到 ACL 中
把Rule 级别设置为 Target，以便实现客户端请求的 token 验证
选择 Bot Control inspection level 为 Targeted
Rule action 选择 Challenge
3.2、步骤二：下载WAF CLIENT SDK
从 WAF 的控制台中进入 Application integration，选择 Intelligent threat integration 选项，这里会显示已经开启 AWSManagedRulesBotControlRuleSet 规则的 ACL。
需要把 ACL 所对应的 JavaScript Integration URL 复制到 Web 应用的前端代码的<head></head>之间。
3.3、步骤三：集成和部署前端代码
1、WEB前端代码样例
添加具体的Bot Control的规则条件
Bot Control Rules 选择 CAPTCHA
AWSManagedRulesBotControlRuleSet规则如下：
| Code Block | ||
|---|---|---|
| ||
<html>{ <head> <script type="text/javascriptName": src="https://xxxxxxxxxxxx.us-west-2.sdk.awswaf.com/xxxxxxxxxxxx/xxxxxxxxxxxx/challenge.js" defer></script> </head> <body> <h1>Login Page</h1>"AWS-AWSManagedRulesBotControlRuleSet", "Priority": 0, "Statement": { "ManagedRuleGroupStatement": { <p>Click on the below button to login</p> "VendorName": "AWS", <button onclick="login()">Login</button> "Name": "AWSManagedRulesBotControlRuleSet", <script> "ScopeDownStatement": { async function login() "AndStatement": { let user = {"Statements": [ name: 'username',{ surname"ByteMatchStatement": 'surname'{ }; const response = await AwsWafIntegration.fetch('https://yourdomain.com/"SearchString": "/waf/query'",{ method: 'POST', "FieldToMatch": { headers "UriPath": {} }, 'Content-Type': 'application/json' "TextTransformations": [ }, body: JSON.stringify(user) { }); "Priority": 0, const responseText = await response.text() document.getElementById("display").innerText = responseText "Type": "LOWERCASE" } console.log(responseText) ], }"PositionalConstraint": "EXACTLY" </script> <p>Hello WAF!</p> <div id='display'></div> </body> </html> |
WAF Client JavaScript API 提供了 AwsWafIntegration.fetch()方法，是原生 JS fetch()方法的 Wrapper。与原生 fetch()方法相比，内部逻辑封装了 token 的请求和计算，并在业务 http 请求中自动加上了 token, 调用方法的参数与原生 JS fetch()相同。
样例代码使用 WAF client API 向后端发起了一个 Post 请求。后端使用 AWS EC2 部署 Echo-Server 做为测试用的 Web 服务器，实现返回 http response，并通过 ALB 提供对外访问。ALB 被刚才配置的 WEB ACL 所保护。
2、WEB前端代码部署
上传样例代码到EC2的NGINX里面，呈现为客户端可访问的网页如下：
3.4、步骤四：配置AWF
1、在WAF ACL关联ALB
2、配置Token Domain列表
当 WAF 从 web 请求中侦测 token 时，默认只会接受与 ACL 所关联资源的 host domain。当请求是通过 Cloudfront 到 ALB 时，需要把 Cloudfront 所对应的 custom host domain 配置到 Token domain 列表中。配置参考文档。
3.5、步骤五：场景测试
1、访问集成 SDK 的前端网页，观察WEB-API的响应
访问 Web 前端，打开浏览器开发者模式。可以看到，页面在初始化后自动与 WAF 后台进行交互，获取了 challenge.js 并进行静默计算得到 token。在发起 query 请求后，会自动在 cookie header 中带上 aws-waf-token。WAF 后台的 Bot control Rule 进行 token 校验成功后，流量被发送到 ALB。Echo-Server 会把发送的请求原样返回，可以看到请求中包含了 token 信息。
2、增加根据 Token 判断阻断的 WAF Rule
对于 Request 中不带有 token，或者 token 无效，我们希望 WAF 进行阻止的操作。需要做如下配置。
从流程上看，token 无效的请求，AWSManagedRuleBotControlRuleSet 会给这条 Request 加上 Label，用于表示 token 不存在或 token 无效。我们可以继续配置自定义规则，如果 request 包含特定 label，则说明请求来自非法客户端，进行阻断。
Awswaf:managed:token:absent，包含这个 label 说明 token 不存在
Awswaf:managed:token:rejected，包含这个 label 说明 token 无效
增加 Custom Rule，如果请求中包含上述 Label，则 Block
增加 Custom Rule，如果请求的 token 无效，则 Block。以下是等效配置的 JSON 描述：
现在有三条 Rule 作用在 WAF ACL 上：
3、观察不带 Token 的请求访问业务后端的情况
修改 Web 前端，使用 JS 原生 fetch()，不带 token 发送请求给业务后端。
| Code Block | ||
|---|---|---|
| ||
<html>
<head>
</head>
<body>
<h1>Login Page</h1>
<p>Click on the below button to login</p>
<button onclick="login()">Login</button>
<script>
async function login(){
let user = {
name: 'username',
surname: 'surname'
};
const response = await fetch('https://yourdomain.com/waf/query',{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(user)
});
const responseText = await response.text()
document.getElementById("display").innerText = responseText
console.log(responseText)
}
</script>
<p>Hello WAF!</p>
<div id='display'></div>
</body>
</html> |
通过 Chrome 浏览器开发者模式可以看到，由于请求不带 token，请求被 WAF 所拒绝。
4、WEB集成-CAPTCHA integration
JavaScript集成-captcha SDK:
参考手册：https://docs.aws.amazon.com/waf/latest/developerguide/waf-js-captcha-api.html
4.1、步骤一：创建WebACL和配置BotControl
1、创建 WEB ACL，并添加 AWS WAF Bot Control 托管规则
添加 AWSManagedRulesBotControlRuleSet 托管规则到 ACL 中，并把 Rule 级别设置为 Target，可以实现客户端请求的 token 验证。如果请求中不包含 token 或者 token 无效，这条托管规则会触发 Captcha rule action，从而触发 Client SDK 在后台静默完成 Captcha 计算任务得到 token。
选择 Bot Control inspection level 为 Targeted
Bot Control Rules 选择 CAPTCHA
webacl-alb-api-001默认规则：AWS-AWSManagedRulesBotControlRuleSet规则如下
| Code Block | ||
|---|---|---|
| ||
{ "Name": "AWS-AWSManagedRulesBotControlRuleSet", "Priority": 0, "Statement": { "ManagedRuleGroupStatement": {} "VendorName": "AWS", "Name": "AWSManagedRulesBotControlRuleSet" }, "ScopeDownStatement": { { "AndStatement": { "StatementsNotStatement": [{ "Statement": { "ByteMatchStatement": { "SearchString": "/waf/queryPOST", "FieldToMatch": { "UriPathMethod": {} }, "TextTransformations": [ { { "Priority": 0, "Type": "LOWERCASENONE" } ], "PositionalConstraint": "EXACTLY" } } }, {} "NotStatement": {} "Statement": {} ] "ByteMatchStatement": {} }, "SearchString"ManagedRuleGroupConfigs": "POST",[ { "FieldToMatchAWSManagedRulesBotControlRuleSet": { "InspectionLevel": "TARGETED", "MethodEnableMachineLearning": {}true } }, ], "RuleActionOverrides": [ "TextTransformations": [{ "Name": "SignalNonBrowserUserAgent", "ActionToUse": { "Captcha": {} } "Priority": 0, }, { "TypeName": "NONETGT_VolumetricIpTokenAbsent", "ActionToUse": { "Captcha": {} } ],} ] } }, "OverrideAction": { "PositionalConstraintNone": "EXACTLY"{} }, "VisibilityConfig": { }"SampledRequestsEnabled": true, "CloudWatchMetricsEnabled": true, "MetricName": "AWS-AWSManagedRulesBotControlRuleSet" }} } |
Block-Requests-With-Missing-Or-Rejected-Token-Label自定义规则如下：| Code Block | ||
|---|---|---|
| ||
{ "Name": "Block-Requests-With-Missing-Or-Rejected-Token-Label", "Priority": 1, }"Statement": { "AndStatement": { "Statements": }[ { ] "OrStatement": }{ }, "ManagedRuleGroupConfigsStatements": [ { { "AWSManagedRulesBotControlRuleSet": { "InspectionLevelLabelMatchStatement": "TARGETED",{ "EnableMachineLearning": true }"Scope": "LABEL", } ], "RuleActionOverridesKey": ["awswaf:managed:token:absent" { } "Name": "SignalNonBrowserUserAgent", "ActionToUse": { }, "Captcha": {} } },"LabelMatchStatement": { { "NameScope": "TGT_VolumetricIpTokenAbsentLABEL", "ActionToUse": { "CaptchaKey": {}"awswaf:managed:token:rejected" } } } ] } }, "OverrideAction": { "None": {} }, "VisibilityConfig": {] "SampledRequestsEnabled": true, "CloudWatchMetricsEnabled": true, } "MetricName": "AWS-AWSManagedRulesBotControlRuleSet" } } |
Webacl-alb-api-001自定义规则：
| Code Block | ||
|---|---|---|
| ||
{ "Name": "Block-Requests-With-Missing-Or-Rejected-Token-Label", "Priority": 1, , { "NotStatement": { "Statement": { "AndStatement": { "StatementsByteMatchStatement": [{ { "SearchString": "OrStatement": { POST", "StatementsFieldToMatch": [{ "Method": {} "LabelMatchStatement": { }, "ScopeTextTransformations": "LABEL",[ "Key": "awswaf:managed:token:absent"{ } "Priority": 0, }, {"Type": "NONE" "LabelMatchStatement": { } "Scope": "LABEL" ], "KeyPositionalConstraint": "awswaf:managed:token:rejectedEXACTLY" } } } } } ] } }, }"Action": { "Block": {} }, "VisibilityConfig": { {"SampledRequestsEnabled": true, "CloudWatchMetricsEnabled": true, "NotStatementMetricName": { "Statement": { "ByteMatchStatement": { "SearchString": "POST", "FieldToMatch": { "Method": {} }, "TextTransformations": [ "Block-Requests-With-Missing-Or-Rejected-Token-Label" } } |
第2步：查看和复制JavaScript Integration URL地址
从 WAF 的控制台中进入Application integration，选择Captcha integration 选项，这里会显示已经开启 AWSManagedRulesBotControlRuleSet 规则的 ACL。
把ACL所对应的JavaScript Integration URL添加到前端代码的<head></head>之间。
第3步，集成和部署前端代码
WAF client API 向后端发起了Post的waf/query请求，后端使用 AWS EC2做为测试服务器部署了waf/query服务，实现返回http response，并通过 ALB 提供对外访问，ALB 被刚才配置的 WEB ACL 所保护。
1、WEB前端代码
| Code Block | ||
|---|---|---|
| ||
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Waf Captcha Test</title> <script type="text/javascript" src="https://73f53964xxxx.ap-southeast-1.captcha-sdk.awswaf.com/73f53964xxxx/jsapi.js" defer></script> </head> <body> <h1>Login Page</h1> <p>Click on the below button to login</p> <button onclick="userAction()">Login</button> <script type="text/javascript"> const apiURL { = 'http://api001.bosicloud.one/waf/query'; "Priority": 0,// 显示验证码 function showMyCaptcha() { "Type": "NONE" const container = document.getElementById('container'); AwsWafCaptcha.renderCaptcha(container, { } ]apiKey: 'xxxxUYC7iqJbIcvhB5W21s/w9s3oAGcPai9t_0_1xxxx', "PositionalConstraint": "EXACTLY" onSuccess: successFunction, } onError: }errorFunction, }); } ] // 验证码成功回调函数 } }, "Action":function successFunction() { "Block": {} }, "VisibilityConfig": { const container "SampledRequestsEnabled": true,= document.getElementById('container'); "CloudWatchMetricsEnabled": true, "MetricName": "Block-Requests-With-Missing-Or-Rejected-Token-Label" } } |
4.2、步骤二：下载WAF CLIENT SDK
从 WAF 的控制台中进入Application integration，选择Captcha integration 选项，这里会显示已经开启 AWSManagedRulesBotControlRuleSet 规则的 ACL。
需要把 ACL 所对应的 JavaScript Integration URL 复制到 Web 应用的前端代码的<head></head>之间。
4.3、步骤三：集成和部署前端代码
1、WEB前端代码样例
| Code Block | ||
|---|---|---|
| ||
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Waf Captcha Test</title> <script type="text/javascript" src="https://73f53964xxxx.ap-southeast-1.captcha-sdk.awswaf.com/73f53964xxxx/jsapi.js" defer></script> </head> <body> <h1>Login Page</h1> <p>Click on the below button to login</p> <button onclick="userAction()">Login</button> <script type="text/javascript"> const apiURL = 'http://api001.bosicloud.one/waf/query'; function showMyCaptcha( container.innerHTML = ''; AwsWafIntegration.fetch(apiURL, {}).then(response => { response.json().then(myJson => { renderResponse(myJson) }); }); } // 验证码错误回调函数 function errorFunction(error) { const container = documentconsole.getElementById('container');log(error); } AwsWafCaptcha.renderCaptcha(container, {// 渲染请求响应结果 function apiKey: 'xxxxUYC7iqJbIcvhB5W21s/w9s3oAGcPai9tKFpadOUctVCXTZ0KndUbGATzSVqLx7s5dzl4MKwudqYWIEeyv0gnYZuSPchyf1mgZAXjRveATBmosCj2h3LEC2jAsagSWpzQGofjBvhFlC8CMnSmapPY8kekeIABcCyycj4rGUPVIX/iRAlGyZEFat68AfMJmsvoxRYiSIQQt1cJZnTNFlg/Uam3fQW9hFy/n6HJnO3nxs+kFwjotKnzMbHGOJXpbZlakYivF6t6mFoEea5PftXxszvDEdjJ6sUZI4aQbrJTfIcRF/9cM2L2WjNs0sVCj9fqu1lI75k2txelIrwoHOBxgJlSo8P23e5CShd1fBkYJgGdj8BobiIoMEqWgtIUN8s54EcaRzGUAZqinqsEONpBn8SBViBpl5I+RuiiEYsRBXpfHUzb5mbo/lzgO5YRCezY+B2LFAHmLzy6xeq390ig6xKmPRNXItxTDIudPELhIVO8rJ5vrYm+yf8wV1ppyJXuNP9pq9ifS2+jFfCt5kCNrjunTF0Hzbt08qHgPE1OZb9c2dSyXK8pvDGyaIbjROLgcCcJ7mRKqk2BvzSTCkY34SC98upXGUkMn1o36aOrbZoM15GcBGKPnQ0E0PmQrnfGGaIDJFZJRH8Hv/Q2s/o1GrluRmGEN39eeGuyYEs=_0_1xxxx', renderResponse(json) { const container onSuccess: successFunction, = document.getElementById('container'); if onError: errorFunction,(json) { }); } function successFunction() { container.innerHTML = "Result: The request resulted in Success."; const container = document.getElementById('container'); container.innerHTML} =else '';{ AwsWafIntegration.fetch(apiURL, {}).then(response => { response.json().then(myJson => { renderResponse(myJson) })container.innerHTML = "Result: The request resulted in Error."; }); } function errorFunction(error) { } console.log(error);// 用户操作函数 } function renderResponse(json) { userAction() { const container if= (json) {document.getElementById('container'); container.innerHTML = "Result: The request resulted is Success."; ''; AwsWafIntegration.fetch(apiURL, { method: 'POST' } else).then(response => { container.innerHTML = "Result: The request resulted is Error.";if (response.status == 405) { } } function userAction() { const container = document.getElementById('container'showMyCaptcha(); container.innerHTML = ''; AwsWafIntegration.fetch(apiURL,{method: 'POST'}).then(response => else { if ( response.status == 405) { showMyCaptcha(); } else { response.json().then(myJson => { renderResponse(myJson) }); } }); } }); } } </script> <p>Hello WAF!</p> <div id='container'></div> </body> </html> |
WAF Client JavaScript API 提供了 AwsWafIntegration.fetch()方法，是原生 JS fetch()方法的 Wrapper。与原生 fetch()方法相比，内部逻辑封装了 token 的请求和计算，并在业务 http 请求中自动加上了 token, 调用方法的参数与原生 JS fetch()相同。
样例代码使用 WAF client API 向后端发起了一个 Post 请求。后端使用 AWS EC2 部署 Echo-Server 做为测试用的 Web 服务器，实现返回 http response，并通过 ALB 提供对外访问。ALB 被刚才配置的 WEB ACL 所保护。
2、WEB前端代码部署
...
</body>
</html> |
2、WEB前端代码部署
部署前端代码到EC2的NGINX里面，并访问web001.bosicloud.one的网页
NGINX的配置如下：
| Code Block | ||
|---|---|---|
| ||
server {
listen 80;
#listen [::]:80;
#server_name _;
root /usr/share/nginx/html;
index index.html index.htm
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
error_page 404 /404.html;
location = /404.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
} |
效果如下：
...
第4步：配置AWF、ALB和TokenDomain
1、在WAF ACL关联ALB
2、配置Token Domain列表
当 WAF 从 web 请求中侦测 token 时，默认只会接受与 ACL 所关联资源的 host domain。当请求是通过ALB 时，需要把custom host domain 配置到 Token domain 列表中。配置参考文档。列表中。
...
第5步：场景测试
1、访问集成 SDK 的前端网页，观察WEB-API的响应
访问 Web 前端，打开浏览器开发者模式。可以看到，页面在初始化后自动与 前端，打开浏览器开发者模式。
可以看到，页面在初始化后自动与 WAF 后台进行交互，获取了jsapi.js 并进行静默计算得到 token。在发起 token。
在发起 query 请求后，会自动在 cookie header 中带上 aws-waf-token。WAF token。
WAF 后台的 Bot control Rule 进行 token 校验成功后，流量被发送到 ALB。Echo-Server 会把发送的请求原样返回，可以看到请求中包含了 ALB。
EC2后台服务器，会把发送的请求原样返回，可以看到请求中包含了 token 信息。
效果如下：
请求头和报文
| Code Block | ||
|---|---|---|
| ||
POST http://api001.bosicloud.one/waf/query 状态 200 版本HTTP/1.1 传输485 字节（大小 98 字节） Referrer 策略strict-origin-when-cross-origin DNS 解析系统 POST /waf/query HTTP/1.1 Host: api001.bosicloud.one User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:126.0) Gecko/20100101 Firefox/126.0 Accept: */* Accept-Language: zh-CN,zh;q=0.8,zh-TW;q=0.7,zh-HK;q=0.5,en-US;q=0.3,en;q=0.2 Accept-Encoding: gzip, deflate Referer: http://web001.bosicloud.one/ Origin: http://web001.bosicloud.one Connection: keep-alive Priority: u=4 Content-Length: 0 |
...
| Code Block |
|---|
HTTP/1.1 200
Date: Thu, 13 Jun 2024 04:38:54 GMT
Content-Type: application/json;charset=UTF-8
Transfer-Encoding: chunked
Connection: keep-alive
Vary: Origin
Vary: Access-Control-Request-Method
Vary: Access-Control-Request-Headers
Access-Control-Allow-Origin: http://web001.bosicloud.one
Access-Control-Expose-Headers: X-Sms-Portal-Identity-Token
Access-Control-Allow-Credentials: true
{"msg":"success","code":0,"data":{"waf-query":"ok.","database":"ok.","redis{"waf-query":"ok.","statusdatabase":"ok"}} |
2、增加根据 Token 判断阻断的 WAF Rule
对于 Request 中不带有 token，或者 token 无效，我们希望 WAF 进行阻止的操作。需要做如下配置。
从流程上看，token 无效的请求，AWSManagedRuleBotControlRuleSet 会给这条 Request 加上 Label，用于表示 token 不存在或 token 无效。我们可以继续配置自定义规则，如果 request 包含特定 label，则说明请求来自非法客户端，进行阻断。
Awswaf:managed:token:absent，包含这个 label 说明 token 不存在
Awswaf:managed:token:rejected，包含这个 label 说明 token 无效
增加 Custom Rule，如果请求中包含上述 Label，则 Block
增加 Custom Rule，如果请求的 token 无效，则 Block。以下是等效配置的 JSON 描述：
现在有三条 Rule 作用在 WAF ACL 上：
...
.","redis":"ok.","status":"ok"}} |
2、观察不带 Token 的请求访问业务后端的情况
修改 Web 前端，使用 JS 原生 fetch()，不带 token 发送请求给业务后端。
| Code Block | ||
|---|---|---|
| ||
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8""> <head> <meta charset="UTF-8"> <title>WAF Captcha Test</title> <!-- 引入 AWS WAF 验证码 SDK --> <title>Waf Captcha Test</title> <script type="text/javascript" src="https://73f53964XXX.ap-southeast-1.captcha-sdk.awswaf.com/73f53964XXXX/jsapi.js" defer></script> </head> <body> <h1>Login Page</h1> <p>Click on the below button to login</p> <button onclick="userAction()">Login</button> <script type="text/javascript"> // 定义 API URL，指向后端的 WAF 查询接口 const apiURL = 'http://api001.bosicloud.one/waf/query'; // 显示验证码的函数 function showMyCaptcha() { function showMyCaptcha() {// 获取验证码容器 const container = document.getElementById('container'); // 渲染验证码 AwsWafCaptcha.renderCaptcha(container, { apiKey: 'XXXXIIjdUYC7iqJbIcvhB5W21s/w9s3oAGcPai9tKFpadOUctVCXTZ0KndUbGATzSVqLx7s5dzl4MKwudqYWIEeyv0gnYZuSPchyf1mgZAXjRveATBmosCj2h3LEC2jAsagSWpzQGofjBvhFlC8CMnSmapPY8kekeIABcCyycj4rGUPVIX/iRAlGyZEFat68AfMJmsvoxRYiSIQQt1cJZnTNFlg/Uam3fQW9hFy/n6HJnO3nxs+kFwjotKnzMbHGOJXpbZlakYivF6t6mFoEea5PftXxszvDEdjJ6sUZI4aQbrJTfIcRF/9cM2L2WjNs0sVCj9fqu1lI75k2txelIrwoHOBxgJlSo8P23e5CShd1fBkYJgGdj8BobiIoMEqWgtIUN8s54EcaRzGUAZqinqsEONpBn8SBViBpl5I+RuiiEYsRBXpfHUzb5mbo/lzgO5YRCezY+B2LFAHmLzy6xeq390ig6xKmPRNXItxTDIudPELhIVO8rJ5vrYm+yf8wV1ppyJXuNP9pq9ifS2+jFfCt5kCNrjunTF0Hzbt08qHgPE1OZb9c2dSyXK8pvDGyaIbjROLgcCcJ7mRKqk2BvzSTCkY34SC98upXGUkMn1o36aOrbZoM15GcBGKPnQ0E0PmQrnfGGaIDJFZJRH8Hv/Q2s/o1GrluRmGEN39eeGXXXXuyYEsXXXXIIjdUYC7iN39eeGXXXXuyYEs=_0_1', onSuccess: successFunction, // 验证成功时调用的函数 onError: errorFunction, // 验证失败时调用的函数 }); } } // 成功回调函数 function successFunction() { const container = document.getElementById('container'); container.innerHTML = ''; // 清空容器内容 AwsWafIntegration.fetch(apiURL, {}).then(response => { response.json().then(myJson => { renderResponse(myJson) }); }); } // 错误回调函数 function errorFunction(error) { console.log(error); // 输出错误信息到控制台 } // 渲染响应内容的函数 function renderResponse(json) { const container = document.getElementById('container'); if (json) { container.innerHTML = "Result: The request resulted is Success."; } else { container.innerHTML = "Result: The request resulted is Error."; } } // }用户操作处理函数 function userAction() { const container = document.getElementById('container'); container.innerHTML = ''; // 清空容器内容 AwsWafIntegration.fetch(apiURL, {method: 'POST'}).then(response => { if ( response.status == 405) { // 如果返回 405 状态码，显示验证码 showMyCaptcha(); } else { response.json().then(myJson => { renderResponse(myJson) }); } } }); } </script> <p>Hello WAF!</p> <div id='container'></div> <!-- 验证码和响应内容的容器 --> </body> </html> |
通过 Chrome 浏览器开发者模式可以看到，由于请求不带 token，请求被 WAF 所拒绝。
效果如下：
