The Inspiration
In today's web application landscape, perimeter attacks are a constant threat. Many existing security solutions act as complex "black boxes" or require expensive enterprise licenses that are difficult to implement during early development phases. We were inspired by the need to democratize perimeter visibility: we wanted to build a dynamic shield that not only mitigates malicious vectors on the fly but also translates them into scannable, actionable visual metrics in real time for any development team. That is how ShieldFlow was born.
How We Built It
We designed ShieldFlow under a robust architecture divided into three main layers:
- Defensive Core (Backend): Developed using Node.js and Express. We implemented an autonomous perimeter middleware engine that intercepts each incoming PDU (Protocol Data Unit) at the application layer, sanitizing and scanning payloads via strict, sequentially ordered regular expression signatures to prevent false positives.
- Persistence Layer: Structured on MySQL. We designed an efficient relational model to log attack telemetry (vector type, source IP, affected route, and the captured malicious fragment) along with an automated blacklist system for reincidence blocking.
- Control Center (Frontend): Built natively with HTML5, Bootstrap 5, and Chart.js. It consumes asynchronous endpoints to render the real-time threat distribution doughnut chart, active geolocation flags via GeoIP, and live OS performance metrics (
uptimeand RAM).
Detection Algorithm & Computational Impact
To prevent heavy traffic analysis from degrading environment health, we optimized the scanning engine using a linear algorithmic priority filter. If we define the set of signatures as $S = {S_{path}, S_{xss}, S_{sqli}}$ and the input string as $T$, the evaluation halts immediately upon the first positive match to mitigate computational processing overhead:
$$\text{Result}(T) = \begin{cases} \text{Blocked (Path Traversal)} & \text{if } T \in S_{path} \ \text{Blocked (XSS)} & \text{if } T \notin S_{path} \land T \in S_{xss} \ \text{Blocked (SQLi)} & \text{if } T \notin (S_{path} \cup S_{xss}) \land T \in S_{sqli} \ \text{Allowed (Next)} & \text{otherwise} \end{cases}$$
Challenges We Faced
The biggest technical hurdle was signature overlapping and state collision. Initially, overly loose patterns in SQL injection rules (such as single quotes or residual dashes) accidentally caught payloads belonging to Path Traversal or XSS, corrupting the data fidelity of our Chart.js doughnut chart. We solved this by restructuring the middleware flow: decoupling signatures into atomically isolated constants and forcing the software to perform a selective, cascade-structured analytical scan before triggering blacklist bans.
Accomplishments & Key Learnings
This MVP provided invaluable lessons regarding network infrastructure resilience. We learned to interact at a lower level with network interfaces (Loopback and public IPs), handle automated geolocation, and link external webhooks to transform a simple database log into a live alert ecosystem (via Discord) that instantly notifies an Incident Response Team (SOC).
Built With
- axios
- bootstrap
- chart
- css3
- discord
- express.js
- geoiplite
- html5
- javascript
- mysql
- node.js
Log in or sign up for Devpost to join the conversation.