Vue + webedge-db security lab
Hands-on security labs for Vue 3 + webedge-db, solved by real exploits.
Dev-storyChallenge
Security training usually marks a lab done from a writeup, so you can "solve" it without ever landing the exploit — and generic academies do not cover Vue/webedge-db-specific sinks.
What we did
A local academy for the Vue 3 + webedge-db + Tailwind stack where a lab only counts when the exploit actually fires: XSS and `javascript:` URLs really execute in the browser (a beacon catches alert/print and `window.__hackbox.fire()`), SSRF runs through a mock internal network with a real URL resolver and egress allowlist, and IDOR, over-posting, JWT alg=none, prototype pollution and more are auto-detected from the real request outcome; attempts, sessions and hints are recorded in webedge-db, with Vitest covering the detectors.
Result
Every OWASP Top 10 (2021) category has at least one lab verified by a real, reproducible exploit rather than keyword-matching a report — with the stack's own Vue and webedge-db sinks as the target.
Dev-story article
Vue + webedge-db security lab: how the project was built
Most security training marks a lab done from a writeup, so you can pass by describing an exploit you never actually landed. And generic academies teach against generic apps, not the exact stack we build on. Hackbox is a security academy for the Vue 3 + webedge-db stack where a lab only counts when the exploit really fires.
Sections
05
Modules
05
Stack
Vue 3 + webedge-db
Why the project exists
Security training usually marks a lab done from a writeup, so you can "solve" it without ever landing the exploit — and generic academies do not cover Vue/webedge-db-specific sinks.
Most security training marks a lab done from a writeup, so you can pass by describing an exploit you never actually landed. And generic academies teach against generic apps, not the exact stack we build on. Hackbox is a security academy for the Vue 3 + webedge-db stack where a lab only counts when the exploit really fires.
What was built
A local academy for the Vue 3 + webedge-db + Tailwind stack where a lab only counts when the exploit actually fires: XSS and `javascript:` URLs really execute in the browser (a beacon catches alert/print and `window.__hackbox.fire()`), SSRF runs through a mock internal network with a real URL resolver and egress allowlist, and IDOR, over-posting, JWT alg=none, prototype pollution and more are auto-detected from the real request outcome; attempts, sessions and hints are recorded in webedge-db, with Vitest covering the detectors.
A local academy modelled on the best hands-on courses: learning paths, a topic map, lab briefs, a session timer, hints, a notebook, markdown report export, a mystery mode, a practice exam and a Hall of Fame. But the core idea is solved-by-exploit: XSS and javascript: URLs really execute in the browser (a beacon catches alert/print and window.__hackbox.fire()), SSRF runs through a mock internal network with a real URL resolver and an egress allowlist re-checked on every hop, and IDOR, over-posting, JWT alg=none, prototype pollution and the rest are auto-detected from the real outcome of a request.
Main modules and user path
A lab is marked solved by a recorded fact (the attempt outcome is solved), not by keyword-matching a writeup — the writeup stays optional material for the report.
The exploits are real and deterministic: JWT alg=none does an actual decode and verify, a weak reset token is a real LCG, webhook signatures are actually HMAC-verified, and prototype pollution really pollutes Object.prototype through an unsafe deep-merge and then cleans it up.
SSRF is not faked with string checks: a mock internal network has a real URL resolver, internal endpoints holding secrets, redirect-following, and an egress allowlist that re-validates every hop.
Coverage is honest: every OWASP Top 10 (2021) category has at least one lab with a real exploit and auto-detection — and where a category cannot be modelled truthfully in a browser sandbox (outdated components / SCA), the repo says so plainly instead of faking it.
The whole thing is stack-specific by design: the sinks are Vue DOM, navigation and state (v-html, router redirects, dynamic components, localStorage auth gates) and webedge-db public functions, actions, storage and scheduler — the exact places our own apps could go wrong.
Architecture and technology decisions
Built with Vue 3, webedge-db, Security labs.
Vue 3 (script setup) + webedge-db + Tailwind v4; a schema for lab attempts, sessions and learner progress; some labs ship bespoke target apps while others share a renderer with the same real auto-detect; Vitest covers the security helpers, checkers, catalog integrity, the exploit auto-detect engine, the SSRF mock network and e2e target runs; deployed on Cloudflare Pages with our own backend.
Result and lessons
Every OWASP Top 10 (2021) category has at least one lab verified by a real, reproducible exploit rather than keyword-matching a report — with the stack's own Vue and webedge-db sinks as the target.
A security academy where you cannot pass a lab you did not actually break, aimed squarely at the Vue + webedge-db stack we ship — so the practice is against our own real weak spots, not a textbook.
Related articles
Read next
Related project stories
These projects share nearby technical or product decisions, so they show how the same principle behaves in another context.
Dev-storyCMS
A dynamic headless CMS on webedge-db — content types, media, roles, and the public read API behind our sites and their articles.
Dev-storyCalendar booking platform
Scheduling on Vue 3 — availability, bookings, confirmations and one-click Meet video links.
Dev-storyFableVita
FableVita — an AI fitness coach with leagues, quests and a fraud-safe rewards economy.
Have a similar idea?
Discuss your project