All projects

Vue + webedge-db security lab

Hands-on security labs for Vue 3 + webedge-db, solved by real exploits.

Vue 3webedge-dbSecurity labs
WebEdge Hackbox screenshotDev-story
01

Challenge

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.

02

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.

03

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

01

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.

02

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.

03

Main modules and user path

M01

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.

M02

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.

M03

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.

M04

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.

M05

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.

04

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.

05

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.

Read next

These projects share nearby technical or product decisions, so they show how the same principle behaves in another context.

Have a similar idea?

Discuss your project