コンテンツにスキップ
非エンジニアのためのVibeCoding入門

APIキーをフロントに置く危険性

この章でわかること: 「APIキー」のような秘密情報を画面側(フロント)に置くと、 なぜ盗まれるのか。これは VibeCoding で最も起きやすい事故の一つです。

APIキーとは「あなた名義の鍵」

Section titled “APIキーとは「あなた名義の鍵」”

外部サービス(地図、決済、AIなど)のAPIを使うとき、「この利用は誰のもの」かを 示す鍵=APIキーが要ります。これはあなたのアカウントの合鍵です。

なぜフロントに置くと危険なのか

Section titled “なぜフロントに置くと危険なのか”

フロントエンド(ブラウザに送られるコード)は、利用者の誰もが中身を見られます。 ブラウザの開発者ツールを開けば、書かれた文字列はそのまま読めてしまうのです。

// 🚫 こういうコードがフロントにあると…
const apiKey = "sk-1234_本物の秘密キー";  // → 閲覧者に丸見え

正しい置き場所:サーバー(裏側)

Section titled “正しい置き場所:サーバー(裏側)”

秘密の鍵は、利用者に渡らない**サーバー側(バックエンド)**で扱います。Next.js なら、サーバーで動く部分(API ルートやサーバーアクション)で鍵を使い、結果だけを フロントに返します。鍵そのものはブラウザに出しません。

  • 鍵は 環境変数(.env など、コードに直書きしない場所)に入れる
  • 環境変数を GitHubに上げない(.gitignore で除外)
  • 公開設定(Vercel等)には、管理画面から秘密として登録する

なぜ大事か

Section titled “なぜ大事か”

プロトタイプでも、外部APIや決済が絡むと現実のリスクが発生します。「秘密はフロントに 置かない」——この一線だけは、知識ゼロでも必ず守ってください。

参考リンク(情報ソース)

Section titled “参考リンク(情報ソース)”