なぜ危ないのか
HTMLファイルはJavaScriptを含めてブラウザが解釈するテキストファイルです。`<script>`ブロックや外部JSファイルに`const apiKey = 'sk-xxxxxxxxxxxx'`と書かれていれば、ページにアクセスしたすべてのユーザーがキーを取得できます。Googleがページをクロールすれば検索インデックスに載る可能性もあり、キーが流出する経路は公開と同時に生まれます。
APIキーの不正利用は経済的な損害と直結します。OpenAIのAPIキーが漏れた場合、他人がそのキーで大量のリクエストを送って請求が跳ね上がるリスクがあります。Google Maps APIキーは不正利用されると超過料金が発生します。どちらも「キーを無効化すれば止まる」とはいえ、気づくまでの間の損害は取り返せないため、予防が最も重要です。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
ソースで見る場所
ブラウザで「ページのソースを表示」（Ctrl+U / ⌘+U）を開き、Ctrl+FでAPIキーらしい文字列パターンを検索してください。確認すべきキーワードは`api_key`・`apiKey`・`token`・`secret`・`Bearer`・`sk-`（OpenAI）・`AIzaSy`（Google）などです。どれかにヒットした場合は前後の文字列を確認し、テスト用ダミー値か実際のキーかを判断します。
外部JSファイルの読み込みがある場合はそのファイルも確認が必要です。ブラウザの開発者ツール（F12）→「Sources」タブ→`<script src="...">`で指定されたJSファイルを開き、同様のキーワード検索を行います。AIが複数ファイルを生成した場合はすべてのファイルに対して検索してください。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
安全に共有する設定
APIキーをHTMLに含めること自体が設計上の誤りです。正しくはサーバーサイドでAPIを呼び出してフロントエンドにはレスポンスのみ返す構成にします。Cloudflare WorkersやVercelのサーバーレス関数をプロキシとして使い、APIキーは環境変数（`env.OPENAI_API_KEY`）として保持して絶対にHTMLに書かないことが原則です。
一時的なレビュー目的でどうしてもフロントエンドからAPIを呼ぶ必要がある場合は、APIプロバイダーのダッシュボードでキーの使用制限を設定してください。OpenAIならUsage Limitsで月額上限を設定でき、Google Maps APIなら参照元ドメインを制限できます。加えて共有後にキーを失効させてすぐ新しいキーに差し替える運用を徹底してください。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
再発防止ルール
AIにHTMLを生成させるプロンプトに「APIキー・認証トークン・パスワードをソースに含めないでください。環境変数やサーバーサイドで処理してください」と明記することで、多くのケースでキーの直書きを防げます。生成結果のレビュー時には必ず上記のキーワード検索を行うことをチェックリストに加えてください。
GitHubに保存する予定のHTMLファイルでは、`.gitignore`に`*.env`を追加するだけでなく、`git-secrets`や`truffleHog`のような秘密情報スキャンツールをコミット前フックに設定することを検討してください。コミットの瞬間にキーが検出されれば、公開前にブロックできます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
よくある質問
テスト用のダミーAPIキーと実際のキーを見分けるにはどうすればよいですか？
実際のAPIキーはAPIプロバイダーのダッシュボードで発行されたキーと文字列を照合してください。`sk-test-`や`pk-test_`のように「test」が含まれる場合はテスト用です。確認が難しい場合はそのキーをダッシュボードで検索し、存在すれば本物と判断できます。
minifyされたJSにAPIキーが埋め込まれている場合も見つけられますか？
はい。ブラウザ開発者ツールのSourcesタブで対象JSを開き、左下の`{}`ボタン（Pretty-print）を押すと整形表示されます。その状態でCtrl+Fキーワード検索をすれば埋め込まれたキーを見つけられます。
既に公開してしまったHTMLにAPIキーが含まれていた場合、最初にすべきことは何ですか？
まずそのAPIキーをプロバイダーのダッシュボードで即座に失効・削除してください。新しいキーに差し替えた後で、公開中のHTMLからキーを除去したバージョンを再アップロードします。失効前の利用履歴をログで確認し、不審な使用がないか確かめてください。