はじめに
開発者ツールを開く
- Chrome / Edge：F12、または Mac なら ⌘+⌥+I。ページ上で右クリック →「検証」でも開けます。
- Safari：先に「設定 → 詳細 →『Web開発者用の機能を表示』」をオンにしてから ⌘+⌥+I。
- 上部のタブで見る場所を切り替えます。Elements（要素）・Sources（ソース）・Network（ネットワーク）の3つを使います。
左上の「ショップを別タブで開く」からショップを開き、そのページで開発者ツールを使います。答えはこのページに入力してください。
COMPLETE
全ミッションクリア
見つけた情報は、どれも画面には表示されていなかったのに、ブラウザには届いていました。 ブラウザに渡したものは、利用者が確認できます。
最後にもうひとつ。このミッションシートも普通のWebページです。開発者ツールで mission.js を開いてみてください。
答え合わせに使っている正解も、実は最初から丸見えでした。
まとめ
では、どう守ればいいのか
見つけた秘密は、どれも「画面で隠す」だけで守ろうとしていました。正しい守り方はこうです。
- 秘密の鍵はサーバーに置く。APIキーは、ブラウザに渡すプログラムに書きません。サーバー側で保管し、サーバーから外部サービスを呼び出します。（ミッション4）
- 見せないデータは、そもそも送らない。原価や個人情報は、画面で非表示にするのではなく、通信データに含めないようにします。（ミッション5・6）
- 操作の許可はサーバーで確認する。削除などの重要な操作は、「誰が操作しているか」「その人に許可があるか」をサーバーが毎回確認します。ボタンやリンクを隠すのは見た目の整理で、守りにはなりません。（ミッション1・2・7）