Investigation and Resolution of Cross-Origin Errors Caused by WAF XSS Filtering in a Front‑End/Back‑End Separated System

The article describes a real‑world incident in which a form submission triggered a cross‑origin error. The error was initially observed as an HTTP request failure (status 418) when submitting a JSON‑encoded POST request from a front‑end domain to a back‑end service.

It first outlines the typical HTTP request flow: DNS resolution, Nginx reverse proxy, and the web server. The investigation confirms that the request body size (≈2 MB) is far below the limits set at the Nginx (50 MB) and Tomcat (unlimited) layers, and the LVS layer is also ruled out because the returned status code is 418, not 502.

Further analysis involves the operations team and reveals that the ingress layer imposes a 3072 MB limit, which is also not the cause. Security personnel point out that the company’s XSS protection may reject certain requests, leading to the hypothesis that the Web Application Firewall (WAF) is responsible.

Packet captures show that the request passes through the WAF (identified by its IP) and is intercepted there. The problematic payload is identified in the module.exports.items.properties.configs.config.validator field, which contains JavaScript code that matches a high‑risk XSS rule in the WAF.

The article then explains the browser same‑origin policy, common cross‑origin solutions (IFRAME, JSONP, CORS), and details of the CORS protocol. It also provides an overview of XSS attacks, including example payloads and typical defense mechanisms such as HTTPOnly cookies and character escaping.

Finally, after the security team adjusts the WAF rules, the issue is resolved. The post‑mortem emphasizes the importance of systematic debugging (control‑variable method) and thorough knowledge of each network component (DNS, LVS, Nginx, ingress, Tomcat, WAF) to quickly locate and fix similar problems.

Key code snippet that triggered the WAF:

module.exports = {
"labelWidth": 80,
"schema": {
"title": "XXX",
"type": "array",
"items":{
"type":"object",
"required":["key","value"],
"properties":{
"conf":{
"title":"XXX",
"type":"string"
},
"configs":{
"title":"XXX",
"type":"array",
"items":{
...
config: {
...
validator: function(value, callback) {
// 至少填写一项
if(!value || !Object.keys(value).length) {
return callback(new Error('至少填写一项'))
}
callback()
}
}
...
}
}
}
}
}
};