APIとは 画面の裏の入り口

このレッスンで学ぶこと

APIは、画面の裏でブラウザがサーバーと話すときの相手です。この回は、その相手を画面ごしではなく攻撃面として見る目を作ります。

読み終えるころには、画面の操作一つひとつが裏でどのAPIを呼んでいるかを、Networkから書き出せるようになります。

画面はAPIの入口の一つでしかない

練習用のショップでtanakaとしてログインし、注文履歴の画面を開きます。DevToolsのNetworkを見ると、画面の裏でこんなリクエストが飛んでいます。

GET /api/orders?user=tanaka
  → 200  [{"id":1043,"item":"...","price":3000}, ...]

画面に並ぶ注文は、このAPIが返したJSONを整えて表示しているだけです。ボタンやフォーム、色や並び順は、ブラウザの中の飾りにすぎません。サーバーから見えているのは、届いたHTTPリクエストだけです。

画面の制約は、APIの制約ではない

ここが多くの穴の出発点です。画面には「自分の注文しか出さない」「金額は変更できない」「数量は1から10まで」といった制約が書かれています。しかしそれらは、ほとんどがブラウザ側のJavaScriptやHTMLで作られた見せ方です。

サーバーは、画面を経由したリクエストと、プロキシから直接送られたリクエストを区別できません。 入門編で使ったプロキシとRepeaterを使えば、画面を一切開かずに同じ/api/orders/1043を送れます。画面が他人の注文を出さない作りでも、サーバーがそのリクエストに対して持ち主を確かめていなければ、他人の1043がそのまま返ります。

どう直すか

考え方は、届いたリクエストごとにサーバーが判断することです。誰から来たか、その人にこの注文を見せてよいか、を毎回サーバーが確かめます。この「誰に何を許すか」の判定は、この章の後半で枠組みを、続くAPI認可の章で具体を扱います。

手を動かすときは、必ず自分が権限を持つ練習用の環境だけで行ってください。まずはNetworkで、画面の操作一つひとつがどのAPIを呼んでいるかを書き出すところから始めます。

まとめ