---
title: "APIキー直書きを含むHTMLを共有するときのリスクと対策"
description: "APIキー直書きHTMLを共有する際の具体的なリスクと、漏えいを防ぐための設計・運用上の対策を解説。リスクの大きさを把握して判断したいWeb担当者・開発者向け。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/hardcoded-api-key-risk-countermeasure"
markdown: "https://giga-site.com/articles/hardcoded-api-key-risk-countermeasure/index.md"
category: "セキュリティ"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# APIキー直書きを含むHTMLを共有するときのリスクと対策

APIキーがHTMLのソースに直書きされた状態でプレビューURLを共有すると、URLを受け取った全員がキーを取得できる状態になります。共有相手が信頼できる社内メンバーだけでも、URLがSlackの検索でヒットしたりメール転送されたりすれば意図せず流出するリスクがあります。リスクの範囲を正しく理解したうえで対策を取ることが重要です。

> Source HTML: https://giga-site.com/articles/hardcoded-api-key-risk-countermeasure
> Article index: https://giga-site.com/articles/index.md

## なぜ危ないのか

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」ページで日時・モデル・トークン数が確認でき、通常より多い呼び出しがあれば不正利用の疑いがあります。まずキーを失効させてからログを精査してください。

## 関連記事

- [AI生成HTMLにAPIキー直書きが残っていないか確認する方法](https://giga-site.com/articles/hardcoded-api-key-check/index.md)
- [社外レビュー前にAPIキー直書きを検出するチェックリスト](https://giga-site.com/articles/hardcoded-api-key-external-review-checklist/index.md)
- [APIキー直書きを防ぐAIプロンプトと公開前スキャン](https://giga-site.com/articles/hardcoded-api-key-prompt-scan/index.md)
- [Supabase anon keyを含むHTMLを共有するときのリスクと対策](https://giga-site.com/articles/supabase-anon-key-risk-countermeasure/index.md)
- [Stripeキーを含むHTMLを共有するときのリスクと対策](https://giga-site.com/articles/stripe-key-risk-countermeasure/index.md)
- [クリックジャッキングを含むHTMLを共有するときのリスクと対策](https://giga-site.com/articles/clickjacking-risk-risk-countermeasure/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "APIキー直書きを含むHTMLを共有するときのリスクと対策",
  "description": "APIキー直書きHTMLを共有する際の具体的なリスクと、漏えいを防ぐための設計・運用上の対策を解説。リスクの大きさを把握して判断したいWeb担当者・開発者向け。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/hardcoded-api-key-risk-countermeasure",
  "url": "https://giga-site.com/articles/hardcoded-api-key-risk-countermeasure",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "セキュリティ",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "パスワード保護されたプレビューURLならAPIキーが含まれていても安全ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "パスワード保護は不特定多数からのアクセスを防ぎますが、パスワードを知っている人全員がキーを取得できます。パスワードが転送・共有・メモされるリスクを考えると、根本的にはAPIキーをHTML外に出す対応が必要です。"
      }
    },
    {
      "@type": "Question",
      "name": "制限付きAPIキー（読み取り専用など）なら直書きしても問題ないですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "リスクは下がりますが、完全に安全とは言えません。読み取り専用でも個人データや非公開情報を取得できるAPIの場合は情報漏えいになります。また読み取り権限で利用量が増えれば料金超過にもつながるため、制限付きでも直書きは原則避けてください。"
      }
    },
    {
      "@type": "Question",
      "name": "既に共有したHTMLにAPIキーが含まれていたことに気づいた場合、閲覧ログで被害を確認できますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "APIプロバイダーのダッシュボードでキーの使用ログを確認できます。OpenAIなら「Usage」ページで日時・モデル・トークン数が確認でき、通常より多い呼び出しがあれば不正利用の疑いがあります。まずキーを失効させてからログを精査してください。"
      }
    }
  ]
}
```