tencent cloud

All product documents
Web Application Firewall
DocumentationWeb Application FirewallPractical TutorialProtection ConfigurationConnecting Frontend-Backend Separated Site to WAF CAPTCHA
Connecting Frontend-Backend Separated Site to WAF CAPTCHA
Download PDF
Last updated: 2023-12-29 14:55:13
Connecting Frontend-Backend Separated Site to WAF CAPTCHA
Last updated: 2023-12-29 14:55:13
Download PDF
You can connect WAF CAPTCHA to frontend-backend separated sites or app sites to dynamically send CAPTCHAs from such sites.
You can connect a frontend-backend separated site to the WAF CAPTCHA process to dynamically verify human operations for the site in various scenarios, including custom rule hit, CC attack protection, and bot traffic management. Both iOS and Android apps are connected through web frontend HTML5.

Prerequisites

You have purchased WAF (Premium or higher) and connected to it.

How to Detect

This feature dynamically checks whether the packets returned from the server contain the CAPTCHA fields delivered by WAF, and if so, it will render the CAPTCHA at the top floating layer to connect the frontend-backend separated site or app to WAF CAPTCHA.

Directions

Below is the sample code for WAF CAPTCHA connection (with Axios as an example). You can refer to the following to connect a frontend-backend separated site to WAF CAPTCHA based on your actual use case:
1. Add interceptors to the Axios response.
  // Regexes related to WAF CAPTCHA `seqid`
const sig_data = /seqid\s=\s"(\w+)"/g
const waf_id_data = /TencentCaptcha\((\'\d+\')/g

const service = axios.create({ 
 baseURL: '/api',
 timeout: 10000, 
 withCredentials: true
});

service.interceptors.response.use((response)=>{
 const res = response.data;
 if(res.code === 0){
   return res;
 }else{
   // Capture the error and render the CAPTCHA
   const matches = sig_data.exec(res);
   if(matches){
     // Display the CAPTCHA
     let seqid = matches[1];      
       const wid_matches = waf_id_data.exec(res);
     let wid = wid_matches[1]
     var captcha = new TencentCaptcha(wid, function(res){
       var captchaResult = []
       captchaResult.push(res.ret)
       if(res.ret === 0){
           captchaResult.push(res.ticket)
           captchaResult.push(res.randstr)
           captchaResult.push(seqid)
       }
       var content = captchaResult.join('\n')
       axios.post(
         "/WafCaptcha",content
       ).then().catch();
     });
     captcha.show()
   }else{
     return res;
   }   
 }
},()=>{});
export default service;


Vue.prototype.$axios = service;
2. Add the Axios response with added interceptors during API call.
getTopic:function(){
this.$axios.get("/api.php").then(res => {
 this.topic = res
});
}
3. Import the CAPTCHA script globally by adding <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script> to public/index.html.
<!DOCTYPE html>
<html lang="">
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width,initial-scale=1.0">
 <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
 <noscript>
 <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
 </noscript>
 <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
 <div id="app"></div>
 <!-- built files will be auto injected -->
</body>
</html>
4. After entering the above code, compile and deploy it on the server.
5. Configure a custom rule in WAF and use an async request to check whether the current page pops up the CAPTCHA window.


Was this page helpful?
You can also Contact Sales or Submit a Ticket for help.
Yes
No

Feedback

Contact Us

Contact our sales team or business advisors to help your business.

Contact Us
Technical Support

Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

Submit a Ticket
7x24 Phone Support
Hong Kong, China
+852 800 906 020 (Toll Free)
United States
+1 844 606 0804 (Toll Free)
United Kingdom
+44 808 196 4551 (Toll Free)
Canada
+1 888 605 7930 (Toll Free)
Australia
+61 1300 986 386 (Toll Free)
EdgeOne hotline
+852 300 80699
More local hotlines coming soon