在 React 项目中如何安全地解析动态 JSON 配置？

威胁模型

原型污染：__proto__、constructor.prototype 等键可能污染 Object 原型。

不要把 JSON 里的 HTML 字符串直接 dangerouslySetInnerHTML；链接 href 要白名单。

禁止 eval(config) 或 new Function(config) 执行「配置」。

安全 parse 流程

1. fetch 文本 → JSON.parse（或 response.json）。

2. zod / JSON Schema 校验形状与枚举。

3. 映射到组件 props，缺字段用默认值，忽略未知键。

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

存储与缓存

localStorage 里的 JSON 同样要校验后再用；版本号字段便于迁移 schema。

SSR 场景：服务端先校验，再注入 __NEXT_DATA__ 或 props，客户端勿盲信。

和 TypeScript 配合

类型只防开发阶段错误；runtime 仍要 zod.parse，尤其远程配置。

生成类型 + 校验 schema 同源维护，减少 drift。