← デモ一覧 / デモ02
DEMO 02

価格を書き換えて
100円で買う

画面に出ている価格は2,980円です。でも、ブラウザからサーバーに送る価格は、利用者が書き換えられます。 書き換えた価格で買えてしまうのか、開発者ツールで試してみましょう。

教材デモです。実際の購入・決済・送信は行いません。サーバーの動きも、このページの中で再現しています。

1. 価格を書き換えて買ってみる

購入画面

Tシャツ

Tシャツ（白）

2,980円

  1. 「購入する」ボタンを右クリック →「検証」を選びます。
  2. すぐ上にある <input type="hidden" name="price" value="2980"> を探します。
  3. 2980 の部分をダブルクリックして 100 に書き換え、Enter を押します。
  4. そのまま「購入する」を押します。
  5. 次に「対策後のサーバー」に切り替えて、同じことをしてみましょう。

サーバーで起きたこと

「購入する」を押すと、ここにサーバーの動きが表示されます。

2. 何が違ったのか

対策前

サーバーは、ブラウザから届いた価格をそのまま信じて決済していました。ブラウザから届くものは、利用者がいくらでも書き換えられます。

対策後

サーバーは、ブラウザから「どの商品か」だけを受け取り、価格は自分の商品台帳で決めました。書き換えられても、結果は変わりません。

3. ポイント

  1. ブラウザから届くものは、書き換えられる前提で考える。価格だけでなく、個数・会員ランク・「管理者かどうか」なども同じです。
  2. お金や権限にかかわることは、サーバーが決める。ブラウザから届いた値ではなく、サーバー側で持っている情報をもとに判断します。
  3. 「誰が操作しているか」もサーバーが確かめる。ワーク01のミッション7で会員を削除できてしまったのも同じ問題です。サーバーが「ログインしているのは誰か（認証）」「その人に削除の許可があるか（認可）」を確かめれば防げます。
  4. 画面のチェックは親切機能。入力欄の制限やボタンの無効化は使いやすくするためのもので、守りにはなりません。

教材用の安全なデモです。商品・価格はすべて架空で、購入や決済、外部への送信は一切行いません。 「サーバー」の動きは、説明のためにこのページの中で再現したものです。