AIを使ってWebアプリを作ると、途中で「APIキーを入力してください」と求められることがあります。APIキーは、外部サービスを利用するための秘密の認証情報です。漏えいすると、第三者にAPIを使われ、予期しない請求や利用停止につながる可能性があります。
特に注意したいのは、アプリが自分のパソコンで動いた直後です。完成を急いでAPIキーをHTMLやJavaScriptへ直接書き、そのまま公開すると、画面上に表示されていなくても閲覧者が取得できる場合があります。
この記事では、プログラミング初心者向けに、APIキーをブラウザへ渡さない構成、環境変数の使い方、GitHubへ誤って登録した場合の対応、公開前チェックを順番に解説します。
目次
結論：APIキーはブラウザではなくサーバー側に置く
最初に覚える原則は1つです。
秘密にする必要があるAPIキーを、HTML、CSS、ブラウザ用JavaScript、公開リポジトリへ入れてはいけません。
ブラウザへ送られた情報は、開発者ツール、通信履歴、配信されたJavaScriptなどから確認できます。画面にキーを表示していなくても安全とは限りません。文字列を分割したり、Base64で変換したり、変数名を分かりにくくしたりしても、秘密を守る仕組みにはなりません。
安全な基本構成は次のとおりです。
- ブラウザから自分のサーバーへ必要な内容だけ送る
- サーバーが環境変数からAPIキーを読み込む
- サーバーから外部APIを呼び出す
- 必要な結果だけをブラウザへ返す
つまり、利用者のブラウザと外部APIの間に、自分が管理するサーバー処理を置きます。
APIキーとは何か
APIキーは、アプリが外部サービスへアクセスするときに「どの契約者からのリクエストか」を識別する認証情報です。生成AI、地図、決済、メール送信、画像変換など、多くのサービスで使われます。
パスワードと用途は異なりますが、漏らしてはいけない点は同じです。サービスによっては、APIキーを使った回数に応じて料金が発生します。第三者に使われると、自分が操作していないリクエストでも請求対象になる可能性があります。
一方、すべてのキーが秘密とは限りません。公開利用を前提とした識別子もあります。ただし、自分で判断せず、必ず利用サービスの公式ドキュメントで「ブラウザへ置けるキーか」「公開を禁止している認証情報か」を確認してください。
初心者が避けるべき4つの置き場所
1. HTMLやJavaScriptへの直書き
次のようなコードを公開ページへ含めるのは危険です。
const API_KEY = "ここに本物のキー";ソースコードの表示や開発者ツールから確認できます。ビルドツールで1ファイルに圧縮しても、ブラウザへ配信される以上、秘密にはできません。
2. フロントエンド用の環境変数
環境変数という名前でも、ビルド時にブラウザ用コードへ埋め込まれる設定があります。たとえば、フロントエンドフレームワークには「公開してよい変数」を示す接頭辞があります。公開用として扱われる変数へ秘密鍵を設定してはいけません。
重要なのは、ファイル名ではなく最終的にブラウザへ送られるかどうかです。
3. GitHubなどの公開リポジトリ
一度コミットした秘密情報は、現在のファイルから削除しても過去の履歴に残る場合があります。後から非公開リポジトリへ変更するだけでは、すでに取得されたキーを無効にできません。
.envを使う場合は、作成直後に.gitignoreへ追加します。
.env
.env.local
.env.production共有用には値を入れず、必要な変数名だけを書いた.env.exampleを用意します。
AI_API_KEY=4. AIとのチャットやスクリーンショット
エラー相談のためにコードを貼るときも、APIキー、パスワード、接続文字列、個人情報を除いてください。ターミナル画面や管理画面のスクリーンショットにキーが写り込むこともあります。
AIへ渡す前に、実際の値をYOUR_API_KEYやREDACTEDへ置き換えます。
環境変数を使う基本手順
環境変数は、プログラム本体と設定値を分ける仕組みです。ローカル開発では.env、公開先ではホスティングサービスのSecretsやEnvironment Variables機能を利用するのが一般的です。
手順1：ローカル用ファイルへ保存する
プロジェクト直下に.envを作り、実際のキーを設定します。
AI_API_KEY=実際のキーキーの前後に不要な空白を入れません。利用している言語やフレームワークの公式手順に従って読み込みます。
手順2：サーバー側だけで読み込む
以下は考え方を示す簡略例です。
const apiKey = process.env.AI_API_KEY;
if (!apiKey) {
throw new Error("AI_API_KEY is not configured");
}この処理は、サーバー関数、APIルート、バックエンドなど、ブラウザへ配信されない場所に置きます。キーそのものをログへ出力しないでください。
手順3：公開先の管理画面へ登録する
デプロイ先の設定画面で、同じ変数名AI_API_KEYを登録します。値をリポジトリへ保存する必要はありません。
環境変数を追加した後は、再デプロイが必要なサービスもあります。プレビュー環境と本番環境で別のキーを使うと、テスト中の誤課金や影響範囲を抑えやすくなります。
サーバー側APIを作るときの最低限の対策
キーをサーバーへ移しただけでは、対策は完了しません。自分のAPIが誰からでも無制限に呼べる状態なら、結果として費用を悪用される可能性があります。
最低限、次を検討します。
- 1分あたり・1日あたりの利用回数を制限する
- 入力できる文字数やファイルサイズを制限する
- 不要なAPI機能やモデルを許可しない
- エラー画面やログへ秘密情報を出さない
- 予算上限や使用量アラートを設定する
- 管理機能にはログインを必須にする
- 利用者の入力をそのまま別の命令やSQLとして実行しない
APIキーは万能なセキュリティ対策ではありません。OWASPも、高価値なリソースの保護をAPIキーだけに依存しないよう案内しています。
AIへ安全な構成を依頼するプロンプト
AIコーディングツールへ、次のように依頼できます。
このWebアプリで外部APIを利用します。
秘密のAPIキーをHTML、ブラウザ用JavaScript、公開リポジトリへ含めないでください。
要件:
- APIキーはサーバー側の環境変数 AI_API_KEY から読む
- ブラウザは自分のサーバーAPIだけを呼ぶ
- キーや認証ヘッダーをログとエラー応答へ出さない
- 入力文字数とリクエスト回数を制限する
- .envを.gitignoreへ追加する
- 値を空にした.env.exampleを作る
- ローカルと公開先での設定手順を説明する
最初に、採用する構成と秘密情報がブラウザへ渡らない理由を説明してください。生成されたコードは、「AIが安全と言ったから」ではなく、自分でもブラウザの開発者ツールと公開リポジトリを確認します。
APIキーを漏らしたときの対応
本物のキーをGitHubへpushした、チャットへ貼った、公開ページへ含めた可能性がある場合は、見つからないことを期待して放置してはいけません。
次の順番で対応します。
- 提供元の管理画面で漏えいしたキーを失効・削除する
- 新しいキーを発行する
- 公開先の環境変数を新しい値へ更新する
- 再デプロイして動作確認する
- 使用履歴と請求額に不審な増加がないか確認する
- コードとGit履歴から秘密情報を除去する
- 同じキーを使っている別アプリも更新する
最優先は、古いキーを使えない状態にすることです。リポジトリから文字列を消すだけでは、漏えい対応として不十分です。
Git履歴の書き換えは共同作業者へ影響します。公式ドキュメントを確認し、必要なら詳しい人へ相談してください。
公開前のAPIキーチェックリスト
- □ HTMLとブラウザ用JavaScriptに本物のキーがない
- □
.envと本番用環境変数ファイルが.gitignore対象になっている - □ 公開リポジトリの履歴にもキーを登録していない
- □ サーバー側コードだけが環境変数を読む
- □ ブラウザの通信内容に外部APIの認証ヘッダーが出ていない
- □ ログとエラー応答にキーを出していない
- □ 入力サイズとリクエスト回数に上限がある
- □ API側の権限を必要最小限にしている
- □ 使用量アラートまたは予算上限を設定した
- □ 漏えい時にキーを失効・再発行する場所が分かる
1項目でも判断できない場合は、実データを入れず、テスト用環境で確認してから公開します。
公式資料で確認する
サービスごとの設定方法は変わるため、公開前に公式情報を確認してください。
- OpenAI「APIキーの安全性に関するベストプラクティス」
- GitHub「ファイルを無視する」
- OWASP Secrets Management Cheat Sheet
- OWASP REST Security Cheat Sheet
次に読む記事
これから初めてアプリを作る場合は、AIコーディング初心者の始め方で題材選び、実装、テストの流れを確認してください。
全体の制作手順はAIでWebアプリを作る方法、AIへの指示を改善したい場合はAIでWebサイトを作るプロンプトで解説しています。公開後の費用も含めて判断したい場合は、AIホームページ作成でかかる費用も参考になります。
まとめ
APIキーを安全に扱う最重要ポイントは、秘密をブラウザへ送らないことです。サーバー側の環境変数へ保存し、必要最小限の権限、利用制限、監視、定期的な更新を組み合わせます。
もし漏えいした可能性があるなら、先にキーを失効し、新しいキーへ交換してください。公開前チェックを作業手順へ組み込めば、AIで開発速度を上げながら、初心者でも重大な事故を減らせます。
関連記事
