...
https://docs.aws.amazon.com/waf/latest/developerguide/waf-js-challenge-api.html
二、客户端集成WAFClientSDK二、客户端集成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集成-Intelligent threat integration
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 托管规则
3、WEB集成客户端测试
第一步，创建WebACL和配置BotControl托管规则
添加 AWSManagedRulesBotControlRuleSet 托管规则到 ACL 中，并把 Rule 级别设置为 Target，可以实现客户端请求的 token 验证。如果请求中不包含 token 或者 token 无效，这条托管规则会触发 Challenge rule action，从而触发 Client SDK 在后台静默完成 Challenge 计算任务得到 token。
...
选择 Bot Control inspection level 为 Targeted
Rule action 选择 Challenge
...
第二步，下载WAF CLIENT SDK
从 WAF 的控制台中进入 Application integration，选择 Intelligent threat integration 选项，这里会显示已经开启 AWSManagedRulesBotControlRuleSet 规则的 ACL。
...
需要把 ACL 所对应的 JavaScript Integration URL 复制到 Web 应用的前端代码的<head></head>之间。
3.3、步骤三：集成和部署前端代码
...
第三步，集成和部署前端代码
WAF Client JavaScript API 提供了 AwsWafIntegration.fetch()方法，内部逻辑封装了 token 的请求和计算，并在业务 http 请求中自动加上了 token。
WAF Client API 向后端发起Post 请求，后端使用 AWS EC2 部署 Echo-Server 做为测试用的 Web 服务器，实现返回 http response，并通过 ALB 提供对外访问。ALB 被刚才配置的 WEB ACL 所保护。
| Code Block | ||
|---|---|---|
| ||
<html> <head> <script type="text/javascript" src="https://xxxxxxxxxxxx.us-west-2.sdk.awswaf.com/xxxxxxxxxxxx/xxxxxxxxxxxx/challenge.js" defer></script> </head> <body> <h1>Login Page</h1> <p>Click on the button below button to login</p> <button onclick="login()">Login</button> <script> async function login() { let user// = { 获取用户输入（用户名和姓氏），这里的 'username' 和 'surname' 可以替换为实际输入的变量 name: 'username', let user = { surname name: 'surnameusername', }; surname: 'surname' const response = await AwsWafIntegration.fetch('https://yourdomain.com/waf/query',{ }; method: 'POST',try { headers: { // 发起一个 POST 请求到 WAF 查询 API 'Content-Type': 'application/json' const response = await fetch('https://yourdomain.com/waf/query', { method: 'POST', headers: { 'Content-Type': 'application/json' // 设置请求头为 JSON 格式 }, body: JSON.stringify(user) // 将用户对象转换为 JSON 字符串并作为请求体发送 }); // 处理服务器的响应 const responseText = await response.text(); // 获取响应文本 document.getElementById("display").innerText = responseText; // 显示响应内容 console.log(responseText); // },在控制台输出响应内容 } catch body: JSON.stringify(user)(error) { }); console.error("Error during login:", error); // 捕获和处理错误 const responseText = await response.text() document.getElementById("display").innerText = responseText"Login failed"; // 显示错误信息 console.log(responseText) } } </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里面，呈现为客户端可访问的网页如下：
...
通过 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。
...
需要把 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() {
const container = document.getElementById('container');
AwsWafCaptcha.renderCaptcha(container, {
apiKey: 'xxxxUYC7iqJbIcvhB5W21s/w9s3oAGcPai9tKFpadOUctVCXTZ0KndUbGATzSVqLx7s5dzl4MKwudqYWIEeyv0gnYZuSPchyf1mgZAXjRveATBmosCj2h3LEC2jAsagSWpzQGofjBvhFlC8CMnSmapPY8kekeIABcCyycj4rGUPVIX/iRAlGyZEFat68AfMJmsvoxRYiSIQQt1cJZnTNFlg/Uam3fQW9hFy/n6HJnO3nxs+kFwjotKnzMbHGOJXpbZlakYivF6t6mFoEea5PftXxszvDEdjJ6sUZI4aQbrJTfIcRF/9cM2L2WjNs0sVCj9fqu1lI75k2txelIrwoHOBxgJlSo8P23e5CShd1fBkYJgGdj8BobiIoMEqWgtIUN8s54EcaRzGUAZqinqsEONpBn8SBViBpl5I+RuiiEYsRBXpfHUzb5mbo/lzgO5YRCezY+B2LFAHmLzy6xeq390ig6xKmPRNXItxTDIudPELhIVO8rJ5vrYm+yf8wV1ppyJXuNP9pq9ifS2+jFfCt5kCNrjunTF0Hzbt08qHgPE1OZb9c2dSyXK8pvDGyaIbjROLgcCcJ7mRKqk2BvzSTCkY34SC98upXGUkMn1o36aOrbZoM15GcBGKPnQ0E0PmQrnfGGaIDJFZJRH8Hv/Q2s/o1GrluRmGEN39eeGuyYEs=_0_1xxxx',
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) {
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) {
showMyCaptcha();
} else {
response.json().then(myJson => { renderResponse(myJson) });
}
});
}
</script>
<p>Hello WAF!</p>
<div id='container'></div>
</body>
</html> |
...