React で動的 JSON 設定を安全に扱う方法
2025-04-03
CMS や feature flag の JSON は便利ですが、信頼できない入力をそのまま使うと UI だけでなくセキュリティにも影響します。
脅威モデル
__proto__ 汚染、危険な HTML 挿入、eval 実行を避ける前提で設計します。
安全な処理パイプライン
fetch -> JSON.parse -> zod/JSON Schema -> デフォルト付き props へマッピング。
const ConfigSchema = z.object({ theme: z.enum(["light", "dark"]) });
const config = ConfigSchema.parse(JSON.parse(raw));保存データ
localStorage の JSON も再検証し、schema version で移行可能にします。
TypeScript との関係
型定義は静的保証のみ。外部データは runtime parse 検証が必要です。