なぜ危ないのか
HTMLにAPIキーが含まれている場合、そのプレビューURLにアクセスしたブラウザは自動的にHTMLとすべてのJSを取得します。ユーザーがDevToolsを開かなくても、ブラウザの拡張機能や中間プロキシがキーを読み取る可能性があります。また、Slack・Notion・Teamsなどのリンクプレビュー生成処理がURL先のHTMLを読み取る際にキーが外部サーバーのログに残ることもあります。
APIキーは発行されたAPIの権限を持ちます。たとえばStripeのAPIキーが漏れれば決済処理の呼び出しが可能になり、SendGridのキーなら任意のメール送信ができます。AI系APIキー（OpenAI・Anthropicなど）は高額請求に直結します。キーの権限スコープによっては、流出後の被害が非常に大きくなります。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
ソースで見る場所
共有前の確認では、テキストエディタでHTMLを開き`Ctrl+F`で`key`・`token`・`secret`・`password`を検索するのが最速です。`<script>`ブロック全体と`fetch()`の引数、`Authorization`ヘッダーを組み立てている箇所を重点的に確認してください。`fetch('https://api.openai.com/v1/chat/completions', { headers: { 'Authorization': 'Bearer sk-...' } })`のようなパターンが典型的な直書きです。
外部からCDNで読み込んでいるJSファイルがある場合（例：`<script src="https://cdn.example.com/app.js">`）も確認が必要です。そのURLをブラウザで直接開いてソースを確認するか、`curl -L <URL> | grep -i key`で内容を検索してください。AIがバンドルしたJSファイルをCDN代わりのURLで読み込む構成を出力することがあります。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
安全に共有する設定
どうしてもAPI呼び出しが必要なHTMLをレビュー共有したい場合は、プレビューURLにアクセス制限を設けてください。ギガサイト便のような認証付き共有サービスを使えば、特定のメールアドレスだけがURLを開けるように設定できます。これにより不特定多数への漏えいリスクを大幅に下げられます。
APIキーをモックデータやFetch差し替えで動作確認するアプローチも有効です。`fetch()`を`mockFetch()`にオーバーライドして固定レスポンスを返すシム（モックサービスワーカー）を使えば、本物のAPIキーなしでUIの動作確認ができます。「見た目の確認」と「機能の確認」を切り分けることで、デザインレビュー段階ではAPIキーなしのHTMLを共有する運用を実現できます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
再発防止ルール
APIキーを絶対にHTMLに書かないというルールをチームで合意してください。「開発中は一時的に書いてよい」という例外を作ると、その「一時的」なファイルが共有・コミット・デプロイされる事故が繰り返されます。ローカル開発でもAPIキーはブラウザのHTMLには含めず、ローカルプロキシサーバー（`localhost:3001/api/openai`など）経由でアクセスする設計を最初から採用してください。
APIキーが漏れていないかを定期的にスキャンする習慣も重要です。GitHubは秘密情報スキャン機能をデフォルトで有効にしており、コミットやプッシュ時にAPIキーと思われる文字列を検出してアラートを送ります。GitHubを使っていない場合はgit-secretsやTruffleHogをCIに組み込むことでコミット時の自動検出が可能です。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
よくある質問
パスワード保護されたプレビューURLならAPIキーが含まれていても安全ですか？
パスワード保護は不特定多数からのアクセスを防ぎますが、パスワードを知っている人全員がキーを取得できます。パスワードが転送・共有・メモされるリスクを考えると、根本的にはAPIキーをHTML外に出す対応が必要です。
制限付きAPIキー（読み取り専用など）なら直書きしても問題ないですか？
リスクは下がりますが、完全に安全とは言えません。読み取り専用でも個人データや非公開情報を取得できるAPIの場合は情報漏えいになります。また読み取り権限で利用量が増えれば料金超過にもつながるため、制限付きでも直書きは原則避けてください。
既に共有したHTMLにAPIキーが含まれていたことに気づいた場合、閲覧ログで被害を確認できますか？
APIプロバイダーのダッシュボードでキーの使用ログを確認できます。OpenAIなら「Usage」ページで日時・モデル・トークン数が確認でき、通常より多い呼び出しがあれば不正利用の疑いがあります。まずキーを失効させてからログを精査してください。