Dynamische JSON-Konfiguration in React sicher parsen
2025-04-03
Feature-Flags und CMS-Blocs kommen oft als JSON. Untrusted JSON ist riskant, wenn Validierung fehlt oder Strings direkt als HTML ausgegeben werden.
Bedrohungsmodell
Auf __proto__-Pollution achten, kein eval(config), kein unkontrolliertes dangerouslySetInnerHTML.
Sicherer Ablauf
fetch -> JSON.parse -> zod/Schema -> Mapping auf Props mit Defaults.
const ConfigSchema = z.object({ theme: z.enum(["light", "dark"]) });
const config = ConfigSchema.parse(JSON.parse(raw));Speicherung
Auch localStorage-JSON validieren und mit Versionsfeld fuer Migrationen versehen.
TypeScript
Compile-time-Typen genuegen nicht; Runtime-Validierung fuer externe Daten bleibt Pflicht.