Comment parser en securite une configuration JSON dynamique dans React

2025-04-03

Feature flags et blocs CMS arrivent souvent en JSON distant. Sans validation runtime, des donnees non fiables peuvent introduire des risques reels.

Modele de menace

Risques frequents : pollution __proto__, injection HTML et usage de eval sur des donnees de config.

Pipeline sur

Flux recommande : fetch -> JSON.parse -> validation zod/JSON Schema -> mapping vers props avec valeurs par defaut.

const ConfigSchema = z.object({ theme: z.enum(["light", "dark"]) });
const config = ConfigSchema.parse(JSON.parse(raw));

Stockage

Validez aussi le JSON de localStorage et versionnez le schema pour les migrations.

TypeScript ne suffit pas

Les types sont statiques ; les donnees distantes exigent toujours une validation runtime.