Page History

...

访问 Web 前端，打开浏览器开发者模式。可以看到，页面在初始化后自动与 WAF 后台进行交互，获取了jsapi.js 并进行静默计算得到 token。在发起 query 请求后，会自动在 cookie header 中带上 aws-waf-token。WAF 后台的 Bot control Rule 进行 token 校验成功后，流量被发送到 ALB。Echo-Server 会把发送的请求原样返回，可以看到请求中包含了 token 信息。

Image RemovedImage Added

2、增加根据 Token 判断阻断的 WAF Rule

...

增加 Custom Rule，如果请求中包含上述 Label，则 Block

Image Modified

增加 Custom Rule，如果请求的 token 无效，则 Block。以下是等效配置的 JSON 描述：

Image Modified

现在有三条 Rule 作用在 WAF ACL 上：

Image Modified

3、观察不带 Token 的请求访问业务后端的情况

...

修改 Web 前端，使用 JS 原生 fetch()，不带 token 发送请求给业务后端。

Code Block

theme	RDark

<html><!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <h1>Login Page</h1><meta charset="UTF-8">
    <p>Click<title>Waf on the below button to login</p>
    <button onclick="login()">Login</button>

    <script>
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">
	const apiURL = 'http://api001.bosicloud.one/waf/query';

    function showMyCaptcha() {
        const container = document.getElementById('container');
        AwsWafCaptcha.renderCaptcha(container, {
          apiKey: 'XXXXIIjdUYC7iqJbIcvhB5W21s/w9s3oAGcPai9tKFpadOUctVCXTZ0KndUbGATzSVqLx7s5dzl4MKwudqYWIEeyv0gnYZuSPchyf1mgZAXjRveATBmosCj2h3LEC2jAsagSWpzQGofjBvhFlC8CMnSmapPY8kekeIABcCyycj4rGUPVIX/iRAlGyZEFat68AfMJmsvoxRYiSIQQt1cJZnTNFlg/Uam3fQW9hFy/n6HJnO3nxs+kFwjotKnzMbHGOJXpbZlakYivF6t6mFoEea5PftXxszvDEdjJ6sUZI4aQbrJTfIcRF/9cM2L2WjNs0sVCj9fqu1lI75k2txelIrwoHOBxgJlSo8P23e5CShd1fBkYJgGdj8BobiIoMEqWgtIUN8s54EcaRzGUAZqinqsEONpBn8SBViBpl5I+RuiiEYsRBXpfHUzb5mbo/lzgO5YRCezY+B2LFAHmLzy6xeq390ig6xKmPRNXItxTDIudPELhIVO8rJ5vrYm+yf8wV1ppyJXuNP9pq9ifS2+jFfCt5kCNrjunTF0Hzbt08qHgPE1OZb9c2dSyXK8pvDGyaIbjROLgcCcJ7mRKqk2BvzSTCkY34SC98upXGUkMn1o36aOrbZoM15GcBGKPnQ0E0PmQrnfGGaIDJFZJRH8Hv/Q2s/o1GrluRmGEN39eeGXXXXuyYEs=_0_1',
           async function login(){onSuccess: successFunction,
           let user = {onError: errorFunction,
        });
    }

   name: 'username', function successFunction() {
      const container = document.getElementById('container');
      container.innerHTML surname:= 'surname'
  ;
      AwsWafIntegration.fetch(apiURL, {}).then(response => };{
           const responseresponse.json().then(myJson => await{ fetch('https://yourdomain.com/waf/query',{renderResponse(myJson) });
      });
    }

     method: 'POST',
function errorFunction(error) {
       console.log(error);
    }

     headers:function renderResponse(json) {
        if (json) {
          'Content-Type': 'application/json'
         container.innerHTML = "Result: The request resulted is Success.";
        }, else {
            container.innerHTML = "Result: body: JSON.stringify(user)
   The request resulted is Error.";
        });
    }

    function   userAction() {
		const responseTextcontainer = await responsedocument.textgetElementById('container');
		container.innerHTML = '';
          document.getElementById("display").innerText = responseText
           console.log(responseText)
     
		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='displaycontainer'></div>

</body>
</html>

通过 Chrome 浏览器开发者模式可以看到，由于请求不带 token，请求被 WAF 所拒绝。

Image RemovedImage Added

Page tree

Versions Compared

Old Version 8

New Version 9

Key

2、增加根据 Token 判断阻断的 WAF Rule

3、观察不带 Token 的请求访问业务后端的情况