39119163c1a551a6631fbb39d8c13c9b7dbbde51
Critical: only the active wizard step is mounted, so on the Review step no
Form.Items are registered and form.validateFields() resolved to {}. Every
field was dropped and every submit failed validation server-side. Read the
preserved store with getFieldsValue(true) instead, and validate each step's
fields when leaving it so the required rules actually run.
Security: extractSrc matched src=" anywhere in the body with no scheme or
host check, so a data-src attribute or an earlier <img> could hijack the
match, and javascript:/data:/protocol-relative URLs passed through. Combined
with sandbox="allow-same-origin" a javascript: URL would have inherited the
app origin. It now anchors on the iframe tag and accepts only https URLs on
facebook.com/fbcdn.net, failing closed otherwise. Verified against 14 inputs
including both hijack shapes.
Also: memoise the creative object so PreviewStep does not refetch on every
parent render, type the form values, guard the preview effect against stale
responses, reset the wizard on close, and show an explicit message when no
placement renders.
Moving extractSrc to its own module removes the react-refresh lint
suppression rather than hiding it.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
MaskanX Frontend
Independent React, TypeScript, and Vite frontend for MaskanX.
Service Contract
- Default development URL:
http://127.0.0.1:5173 - Backend API: configured with
VITE_MASKANX_API_URL - Local proxy target: configured with
VITE_MASKANX_PROXY_TARGET - Database access: none; this service never receives PostgreSQL credentials
Local Setup
npm install
Copy-Item .env.local.example .env.local
npm run local
Start maskanx-backend on port 8088 before using the full UI.
Commands
| Command | Purpose |
|---|---|
npm run start |
Preview the production build on port 5173 |
npm run build |
Type-check and build dist/ |
npm run local |
Local Vite server using .env.local |
npm run dev |
Development server using .env.development |
npm run test |
Test-mode type-check and production build |
npm run lint |
ESLint checks |
npm run prod |
Production-mode preview |
Database migration and seed commands intentionally live in
maskanx-backend. A frontend must never own database credentials.
Production
Build the container with the browser-visible backend URL:
docker build `
--build-arg VITE_MASKANX_API_URL=https://api.example.com `
-t maskanx-frontend .
The backend must allow the deployed frontend origin through
MASKANX_CORS_ORIGINS.
Languages
TypeScript
85.5%
Less
12.9%
CSS
1%
JavaScript
0.5%