Como fazer parse seguro de configuracao JSON dinamica no React
2025-04-03
Flags de recurso e blocos CMS costumam vir em JSON remoto. Tratar esses dados sem validacao runtime pode abrir brechas importantes.
Modelo de ameaca
Riscos comuns: pollution por __proto__, injecao HTML e uso de eval sobre dados de configuracao.
Pipeline seguro
Fluxo recomendado: fetch -> JSON.parse -> validar com zod/JSON Schema -> mapear para props com defaults.
const ConfigSchema = z.object({ theme: z.enum(["light", "dark"]) });
const config = ConfigSchema.parse(JSON.parse(raw));Armazenamento
Valide tambem JSON de localStorage e versione schema para migracoes.
TypeScript nao basta
Tipos sao estaticos; dados remotos continuam exigindo validacao em runtime.