JSONのAPIリクエストを読む

このレッスンで学ぶこと

JSONは、APIがリクエストと応答の本文を運ぶ形式で、DevToolsのNetworkで送信と応答を並べて読めます。この回は、注文を一つ作る通信を題材に、その二つを一行ずつ読みます。

読み終えるころには、応答の本文を、次に何を送って試すかの手掛かりとして読めるようになります。

送信と応答を並べて読む

練習用のショップで商品を一つ注文し、Networkでその通信を選びます。送信の本文はPayload、返ってきた本文はResponseで読めます。注文を作るPOST /api/ordersの送信本文はこうなっています。

{"item_id": 88, "quantity": 2}

画面のフォームにあるのは数量の欄だけなので、送っているのも商品のidと数量の二つです。これに対する応答はこうです。

{"id": 1043, "item_id": 88, "quantity": 2,
 "price": 3000, "status": "pending"}

応答は、受け口の手掛かりになる

応答をよく見ると、こちらが送っていないpriceとstatusが付いて返っています。金額と状態はサーバーが決めた値です。ここで一つ問いを立てます。サーバーが返すこれらのフィールドを、こちらから送ったらどうなるのか。

プロキシで送信の本文にpriceを足して送り直します。

{"item_id": 88, "quantity": 2, "price": 1}

受け取ったフィールドをサーバーがそのまま保存する作りだと、金額が1円の注文が通ります。画面のフォームに欄が無くても、リクエストには自由にフィールドを足せます。同じ理屈でroleのような欄を足せば、権限まで書き換えられることがあります。フォームは送れるフィールドを制限しません。制限しているように見えるのは画面だけです。

どう直すか

サーバーが受け付けるフィールドを、あらかじめ決めた一覧に絞ります。注文作成で読むのは商品のidと数量だけ、と決め、それ以外は無視します。金額や状態、権限のように利用者が決めてはいけない値は、リクエストから取らずサーバーが計算して入れます。

手を動かすときは、必ず自分が権限を持つ練習用の環境で行ってください。応答に出たフィールドを書き出し、その一つずつをリクエストに足して送り、保存されるかを見ます。

まとめ