Como parsear configuracion JSON dinamica de forma segura en React
2025-04-03
Banderas de funciones y bloques CMS suelen venir como JSON remoto. Si el origen no es confiable, tratarlo sin validacion puede abrir riesgos serios.
Modelo de amenazas
Riesgos tipicos: pollution por __proto__, inyeccion HTML y uso de eval sobre datos de configuracion.
Pipeline seguro
Flujo recomendado: fetch -> JSON.parse -> validar con zod/JSON Schema -> mapear a props con defaults.
const ConfigSchema = z.object({ theme: z.enum(["light", "dark"]) });
const config = ConfigSchema.parse(JSON.parse(raw));Almacenamiento
Tambien valida JSON de localStorage y agrega version para migraciones de schema.
TypeScript no basta
Los tipos son de compilacion; datos remotos siguen necesitando validacion en runtime.