wafsrv Config Builder

Standalone Config Builder + Pipeline Explorer for wafsrv — an open-source WAF / reverse proxy for JSON-RPC and HTTP APIs (Coraza WAF + OWASP CRS v4, rate limiting, IP intelligence, request signing, CAPTCHA, adaptive attack mode).

Extracted from wafsrv/internal/dashboard/web/builder (Alpine.js prototype) and rebuilt on the wafsrv Design System.

Pages

• / — Config Builder. Assemble a wafsrv TOML config through a form UI: 13 sections, 8 presets, live TOML preview with validation (client-side mirror of config.go), import of existing TOML, copy/download. State persists in localStorage.
• /pipeline.html — Pipeline Explorer. Interactive trace of a request through the 16-stage middleware pipeline (accessLog → … → proxy → backend). 18 scenario presets show every terminal outcome (403 block/captcha, 429, 413, 502, 503). Stage semantics verified against the Go sources (v0.0.4).

Stack

TypeScript 6 · React 19 · Vite 8 · ESLint 10 (flat config) · Prettier · Vitest 4 · Playwright. Node ≥ 24.

npm install
npm run dev        # vite dev server (builder on /, explorer on /pipeline.html)
npm run build      # typecheck + production build into dist/
npm test           # unit: preset round-trips, TOML gen/import, validators
npm run test:e2e   # playwright against `vite preview` (run `npm run build` first)
npm run lint       # eslint

Layout

src/
  components/   wafsrv Design System components (Section, Field, ChipsInput, …)
  lib/          framework-free core: config defaults + presets, TOML generator,
                TOML import parser, validators (mirrors internal/app/config.go)
  builder/      Config Builder page (sections + app shell)
  pipeline/     Pipeline Explorer (model + app)
  styles/       design tokens + component CSS (class names match the product 1:1)

Fidelity

• TOML output is byte-identical to the original prototype's generator for all 8 presets — enforced by src/lib/parity.test.ts (runs when the wafsrv repo is checked out nearby, skipped otherwise).
• Every generated config round-trips through the importer unchanged (src/lib/toml.test.ts).
• Only non-default values are emitted, so configs stay minimal.

Import from wafsrv

The wafsrv management dashboard opens the hosted builder with the current effective config in the URL fragment:

https://vmkteam.github.io/wafsrv-builder/#config=<payload>

<payload> is the TOML config text (UTF-8) encoded as base64url (RFC 4648 §5: +→-, /→_, = padding stripped). On startup the builder decodes the fragment, imports it like a pasted TOML config, and then removes the payload from the address bar and history via history.replaceState. Secrets (captcha keys, signing secrets, webhook URLs) are masked with empty strings on the wafsrv side before encoding. The codec lives in src/lib/hashImport.ts (decodeConfigHash / encodeConfigHash).

Deploy

.github/workflows/pages.yml builds dist/ and publishes it to GitHub Pages on push to master. The build uses relative asset paths (base: './'), so it also works from a subpath or embedded into the wafsrv management port.