【入門編】クライアントサイドにおける機密情報のハードコーディングと漏洩リスク – アプリケーションセキュリティ & 安全な開発防御ガイド

こんにちは。セキュリティの世界へようこそ。
日々、コードを書いていると「このAPIキー、どこに書けばいいんだろう？とりあえずJSファイルに書いて動かしてしまえ！」という誘惑に駆られること、ありますよね。

でも、それは「家の玄関の鍵を、誰でも見えるように表札の横にぶら下げておく」のと同じくらい危険な行為なんです。今日は、なぜそれがダメなのか、そしてどうやって「スマートに」鍵を守るのか、一緒に一歩ずつ学んでいきましょう。

—

まず、想像してみてください。あなたはウェブサイトという「家」を作っています。その家の中に、外部サービス（天気予報や決済機能など）と通信するための「合い鍵（APIキー）」を置くことにしました。

開発者がよくやってしまうのは、この合い鍵を「家の壁（JavaScriptファイル）」に直接刻み込んでしまうことです。

ウェブサイトのブラウザにある「開発者ツール（F12キー）」を開いたことはありますか？攻撃者は、そこからあなたのWebサイトのソースコードを、まるでレントゲン写真のように隅々まで透視します。

あなたが「隠したつもり」のAPIキーは、攻撃者からすれば「道端に落ちている宝の地図」です。一度漏洩すれば、攻撃者はそのキーを悪用し、あなたの名義で高額なAPI利用料を請求させたり、ユーザーの個人情報を盗み出したりします。これ、実は一瞬で起きてしまうんです。

—

では、どうすればいいのでしょうか？答えはシンプル。「クライアント（ブラウザ）に鍵を渡さない」ことです。

ソースコードに直接書く代わりに、「環境変数」を使います。これは、コードと設定を切り離すための仕組みです。

// 悪い例：直接書いちゃダメ！
const apiKey = “AIzaSyD-1234567890abcdefg”;

// 良い例：環境変数から読み込む
// プロセス環境から値を取得することで、ソースコードには直接書かずに済みます
const apiKey = process.env.REACT_APP_API_KEY;

※ただし、React等のフロントエンドフレームワークで REACT_APP_ を使う場合、実はビルド時にコードへ埋め込まれてしまいます。これでも「Gitに公開しない」という点ではマシですが、根本解決ではありません。

一番のおすすめは、「直接APIを叩かせない」こと。
ブラウザから直接APIを呼ぶのではなく、一度あなたの「自前サーバー」を通すのです。

1. フロント（ブラウザ）：「データちょうだい！」と自分のサーバーにリクエスト。
2. あなたのサーバー：「APIキーは俺が持ってるから、代わりに取ってきてやるよ」と通信。
3. あなたのサーバー：「はい、データだよ」とブラウザへ。

こうすれば、ブラウザ側にキーが存在することはありません。まさに、「受付係（サーバー）が奥の金庫から書類を持ってきてくれる」ような安心感ですね。

—

鍵を隠すだけでなく、万が一のために「侵入を許さない壁」を強化しておくことも大切です。ここで登場するのが「セキュリティヘッダー」です。

初心者の方がまず設定すべきは Content-Security-Policy (CSP) です。これは、「このサイトは、信頼できるサイト（ドメイン）としか通信しません！」と宣言するルールブックです。

サーバーのレスポンスヘッダーに以下を追加するイメージ
Content-Security-Policy: default-src ‘self’; connect-src ‘self’ api.trusted-service.com;

これを入れておくだけで、万が一どこかに悪意あるコードが紛れ込んでも、攻撃者は外部の悪徳サーバーへデータを送信できなくなります。まさに、「泥棒が家に入っても、外と電話が繋がらないようにする」ような防犯対策です。

—

セキュリティに「絶対」はありません。しかし、「昨日より今日、少しだけ鍵を頑丈にする」という意識の積み重ねが、あなた自身と、あなたの作ったサイトを守る最高の盾になります。

まずはこの3つから、今日の実務で意識してみてください。最初は難しく感じるかもしれませんが、大丈夫。誰もが最初はそこからスタートです。また何か困ったことがあれば、いつでも聞きに来てくださいね。

皆さんの開発ライフが、安全でワクワクするものになりますように！