「APIキーは.envに書いておけばいいんでしょ？」──その認識、危険です

はじめに

最近、ChatGPTやGeminiなどのAPIを触る機会が増えています。
APIを使うと、自分のアプリに地図やAIなどの機能を簡単に組み込むことができます。

AIが生成するコードにも、よくこんな記述が出てきますよね。

.env

API_KEY=sk-×××××××

そして多くの人がこう思うはずです。

「.envにキーを書けば安全なんでしょ？」

かくいう私も、最初はそう思っていました。
しかし調べてみると、フロントエンドでは全く安全じゃありませんでした。

⚠️.envはただの設定ファイル

.envは秘密を守るための箱ではなく、ビルド時に設定を注入する仕組みです。
特にViteでは、VITE_プレフィックスをつけた関数がimport.meta.envを通じてそのままブラウザに埋め込まれます。

.env

VITE_API_KEY=abcdef123

main.js

console.log(import.meta.env.VITE_API_KEY); //出力: "abcdef123"

つまり、ビルド後のコードを開けば誰でも見られる。
F12（開発者ツール）を押せばAPIキーは丸見えです。

「VITE_をつけなければいい」は解決策ではない

VITE_をつけなければクライアントから参照できませんが、Vite単体(フロントエンドのみ)ではAPIキーを隠したまま使うことは不可能です。
つまり、.envの工夫だけでは守れないんです。

安全な方法➡︎サーバーを挟む

APIキーを守る唯一の方法はサーバーで代理リクエストを行うことです。

/api/proxy.js

//Next.jsやExpress
import 'dotenv/config';
export default async (req, res) => {
  const r = await fetch('https://external.api', {
    headers: { Authorization: `Bearer ${process.env.API_KEY}` },
  });
  res.json(await r.json());
};

フロントからはこの/api/proxyを叩くだけ。
ブラウザーにAPIキーが送られることはありません。

サーバーが盾のような役割を果たしてくれます。
クライアントはサーバーにリクエストを送り、サーバーが代わりに外部APIへアクセスしてくれるため、ユーザーからはバックエンドの内部構造やキーを直接たどることができません。

まとめ

• .envは「秘密を守る」ものではなく「設定を注入する」仕組み
• VITE_変数はクライアントに公開される
• Viteだけではキーを隠せない
• サーバー側でAPIキーを使う設計が必要
• 「動く＝安全」ではない。AI生成コードも構造を理解して使うこと

参考