このセクションで学ぶこと
このセクションからは、アプリケーションに含まれるセキュリティホール・脆弱性について解説していきます。Claude Codeを使って個人開発をしていると、アプリは作れても、それをそのまま外部に公開するのが怖いという方もいると思います。本セクションでセキュリティの基礎を理解し、実際に脆弱性のあるアプリケーションに対して攻撃を試してみることで、どこに危険性があるのかを体感していただき、皆さんの開発に役立てていただければと思います。
アプリの3層構造
Webアプリでもスマホアプリでも、たいてい基本的には次の3層構造に分かれています。
- フロントエンド
- バックエンド
- データベース
開発者はこれらをそれぞれコーディングしたり、サービスを用意したりしてアプリを動かしています。たとえばフロントエンドとバックエンドに Next.js を採用し、データベースに Turso を採用する、といったように自由に決められます。
この3層構造のうち、攻撃者が直接攻撃してくるのは主にフロントエンドとバックエンドです。今回はフロントエンドからの攻撃を見ていきます。
開発者ツールから中身が見える
フロントエンド（見た目の部分）は、開発者ツールで中身を見ることができます。たとえば任意のサイトで F12 を押すと開発者ツールが開き、どのようなコードでサイトを表示しているのかが基本的にすべて見えます。
そのため、HTMLやCSSに、見られてはいけないAPIキーや秘密鍵を直接記述（ハードコード）してしまうと、悪意のある人がそこから抜き取って悪用する可能性があります。秘密鍵を埋め込まないことは絶対に守ってほしいポイントです。
また、開発者ツールのネットワークタブからは、どのようなAPIリクエストをどのパスに送っているかといった情報も誰でも見られます。バックエンドで構築したAPIの中身自体は見えませんが、どんなAPIを叩いているかは見えるので、その点を意識してClaude Codeで開発するとよいでしょう。なお、これらが見えること自体は通常のことなので問題ありません。
XSS（クロスサイトスクリプティング）
フロントエンドからの攻撃の代表例として、XSS（Cross-Site Scripting）があります。フォームなどの入力欄に悪意のあるプログラムコードを書き込む攻撃です。
たとえば、ユーザーがログイン時にブラウザへ保存しているクッキーの情報を盗む JavaScriptコードを書き込み、投稿すると、それが実行されて情報が盗まれる、といったものです。
ただし、React や Next.js を使っている場合は、デフォルトでXSSが防がれているため、それほど意識する必要はありません。一方、過去のPHPや昔ながらの jQuery で開発する場合は、自前で文字列のエスケープ処理などを組み込まないと脆弱性になってしまうため注意が必要です。
CSRF など
ほかにも CSRF（クロスサイトリクエストフォージェリ）といった脆弱性もありますが、これも基本的に Next.js がデフォルトで守ってくれるため、それほど意識する必要はありません。
アプリを開発するとき、皆さんはおそらく React や Next.js を採用していると思いますし、Claude Codeもそれらを提案してくれるため、過度に気にする必要はありません。今回理解してほしいのは、フロントエンドからの攻撃にはさまざまな種類があるということです。続いての動画では、バックエンドにおける脆弱性を引き続き解説していきます。