なぜあなたのAPIキーはフロントエンドで安全ではないのか

今回は多くの Web開発者 がつい見過ごしがちな、でも本当に本当にクリティカルな セキュリティーリスク についてです。そう、 APIキー の フロントエンド での扱いについて、その怖さ、そしてどうすればいいのか一緒に見ていきましょう。 やったことありますよね。大事な APIキー をこんな風に .envファイル に書いておくこと。 環境変数 だからこれで 秘密は守られるって、そう思いますよね。 でも、あなたが ビルドのコマンドを叩いたその瞬間、一体何が起きるんでしょうか。その安心感、実はただの 幻想 だとしたら。さあ、その裏側で何が起きているのか覗いてみましょうか。 あなたが一生懸命書いたあの綺麗な コード たち、component.js も、そしてあの秘密のキーが書かれた .envファイル も、全部です。 ビルドプロセス はそれを 全部ごくっと飲み込んじゃうんです。 そしてそれを全部ごちゃ混ぜにしてぎゅーっと圧縮して、たった1つの巨大なファイルにして吐き出すんです。それが bundle.js。恐ろしいことに、このファイルはあなたのサイトを訪れる 全員のブラウザに送られる、完全にオープンなファイル なんです。 恐ろしいことに、このファイルはあなたのサイトを訪れる 全員のブラウザに送られる、完全にオープンなファイル なんです。誰でも見られるファイルなんですよ。 つまり、どういうことかというと、この ビルド という作業はそもそも ブラウザ で動かすためにやってるわけです。だから、その中身は 全部ブラウザから見れるのが大前提。隠せるもんなんて何1つないんです。 じゃあ実際にユーザーの ブラウザ では何が見えるんでしょうね。特別な ハッキングツール なんていりません。誰でも使える、あの 開発者ツール を開くだけで、さあ何が見えてくるか。 はい、ありました。見てくださいこれ。あなたのあの秘密のキーが、 何の暗号化もされずにただのテキストとしてここにさらけ出されてる んです。誰でも今すぐコピーして、好き放題に使えちゃう状態で。これこそが、まさに 「見える化」されてしまうことの恐怖 なんです。 このキーがたった1つ、たった1人にでも見つかったら、もうおしまいです。あなたの サービス が 悪用されてとんでもない額の請求が来たり、大切なユーザーの データ がごっそり盗まれたり。 考えただけでもゾッとしませんか。じゃあ一体どうすればいいんでしょうか。大切なキーを誰にも見せずに、安全に API とやり取りするにはどうしたらいいのか。それが問題ですよね。 大丈夫です。解決策はあります。ここにあなたの API への道が2つあると考えてみてください。1つは 危険な赤のルート、そしてもう1つが 安全な青のルート です。 まず、多くの人がやってしまいがちなこの 危険な赤のルート から見ていきましょう。あなたの Reactアプリ が APIキー を リクエスト に含めて外部の API に直接お願いしに行くと、 ネットワークタブ を開けば キーが丸見え。完全にアウト です。 それに対して、 安全な青のルート はどうでしょう。今度は外部 API に直接行くんじゃなくて、あなた自身が用意した信頼できる仲介役、つまり バックエンドサーバー にお願いするんです。 で、肝心の APIキー はこの 安全なサーバーの中だけに大切にしまってあります。ユーザーの ブラウザ からは絶対に見えません。そしてこのサーバーがあなたの代わりに外部 API と通信してデータを取ってきてくれる。 サーバーはキーとかの危ない情報は全部取り除いて、 安全なデータだけをあなたのReactアプリに返してあげる んです。この方法なら 漏洩のリスクはゼロ になるわけです。 つまり、これだけは絶対に覚えておいてください。 フロントエンド の .envファイル は 秘密の金庫じゃありません、ただのメモ帳です。そして フロントエンド に書いた コード は、 ビルドしたら全部世界中に公開される んです。 だから API を叩くときは 絶対に間にサーバーを挟むこと。 APIキー を 決して決してユーザーのブラウザに届けないこと。これがあなたの アプリ とユーザーを守るための 絶対的なルール です。 さて、ここまで聞いてどう思いましたか。今度ご自身のプロジェクトの コード を開いたときに、胸に手を当てて自分に問いかけてみてください。「うちのキー、本当に大丈夫かな？」って。