...
1、WEB前端代码样例
| Code Block | ||
|---|---|---|
| ||
<html> <head> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Waf Captcha Test</title> <script type="text/javascript" src="https://xxxxxxxxxxxx73f53964xxxx.usap-westsoutheast-21.captcha-sdk.awswaf.com/xxxxxxxxxxxx73f53964xxxx/xxxxxxxxxxxx/jsapi.js" defer></script> </head> <body> <h1>Login Page</h1> <p>Click on the below button to login</p> <button onclick="loginuserAction()">Login</button> <script type="text/javascript"> const apiURL <script> = 'http://api001.bosicloud.one/waf/query'; async function loginshowMyCaptcha() { const container let user = { = document.getElementById('container'); AwsWafCaptcha.renderCaptcha(container, { nameapiKey: 'usernamexxxxUYC7iqJbIcvhB5W21s/w9s3oAGcPai9tKFpadOUctVCXTZ0KndUbGATzSVqLx7s5dzl4MKwudqYWIEeyv0gnYZuSPchyf1mgZAXjRveATBmosCj2h3LEC2jAsagSWpzQGofjBvhFlC8CMnSmapPY8kekeIABcCyycj4rGUPVIX/iRAlGyZEFat68AfMJmsvoxRYiSIQQt1cJZnTNFlg/Uam3fQW9hFy/n6HJnO3nxs+kFwjotKnzMbHGOJXpbZlakYivF6t6mFoEea5PftXxszvDEdjJ6sUZI4aQbrJTfIcRF/9cM2L2WjNs0sVCj9fqu1lI75k2txelIrwoHOBxgJlSo8P23e5CShd1fBkYJgGdj8BobiIoMEqWgtIUN8s54EcaRzGUAZqinqsEONpBn8SBViBpl5I+RuiiEYsRBXpfHUzb5mbo/lzgO5YRCezY+B2LFAHmLzy6xeq390ig6xKmPRNXItxTDIudPELhIVO8rJ5vrYm+yf8wV1ppyJXuNP9pq9ifS2+jFfCt5kCNrjunTF0Hzbt08qHgPE1OZb9c2dSyXK8pvDGyaIbjROLgcCcJ7mRKqk2BvzSTCkY34SC98upXGUkMn1o36aOrbZoM15GcBGKPnQ0E0PmQrnfGGaIDJFZJRH8Hv/Q2s/o1GrluRmGEN39eeGuyYEs=_0_1xxxx', onSuccess: successFunction, surnameonError: 'surname'errorFunction, }); }; function successFunction() { const responsecontainer = await AwsWafIntegrationdocument.fetchgetElementById('https://yourdomain.com/waf/query',{container'); container.innerHTML = ''; method: 'POST', AwsWafIntegration.fetch(apiURL, {}).then(response => { response.json().then(myJson => { headers: {renderResponse(myJson) }); }); } function 'Content-Type': 'application/json'errorFunction(error) { console.log(error); }, function renderResponse(json) { if body: JSON.stringify(user)(json) { }); const responseText = await response.text() container.innerHTML = "Result: The request resulted is Success."; } else { document.getElementById("display").innerText container.innerHTML = responseText "Result: The request resulted is Error."; 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前端代码部署
...
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> |
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( /usr/share/nginx/html )里面，呈现为客户端可访问的网页如下：
| 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.4、步骤四：配置AWF
1、在WAF ACL关联ALB
...