なぜ危ないのか
AIのトレーニングデータにはHTTPS普及前の古いコードが大量に含まれています。そのためCDN参照や外部APIのURLを生成するとき、モデルが学習した頻度の高いhttp://フォーマットをそのまま出力する場合があります。生成物をそのままデプロイすると、本番環境で初めて問題に気づくという典型的な失敗パターンに陥ります。
AIが生成するサンプルHTMLはデモ目的のため、画像URLにhttpで始まるプレースホルダー画像サービス（例: `http://placehold.it/300x200`）を使うことがあります。デモ確認には問題ないですが、そのまま社外に共有するとMixed Contentとして検出されます。生成物はそのままの状態では「完成品」ではなく「素材」として扱うのが適切です。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
ソースで見る場所
まず`<link rel="stylesheet" href="http://`と`<script src="http://`の2パターンを重点的に検索します。CSSとJavaScriptのhttp混在はブラウザが能動的にブロックするため、ページの見た目や機能が壊れる直接的な原因になります。imgやvideoのhttp混在は警告だけで表示されることもありますが、いずれも修正対象です。
JavaScriptコード内のAJAXリクエスト先URLも確認が必要です。`fetch('http://api.example.com')`や`axios.get('http://...')`のような記述がHTMLに埋め込まれたscriptブロックにあると、ページ表示後の非同期通信がMixed Contentとして拒否されます。`grep -n 'http://' *.html | grep -v '<!--'` でコメントアウト行を除外しながら検索してください。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
安全に共有する設定
スキャンで問題がなくなったHTMLをアップロードするサービス自身がHTTPSで配信していることを確認します。HTTPSに対応したホスティングサービスを使っていても、カスタムドメインの設定を誤るとHTTPでの配信になる場合があります。ブラウザのアドレスバーで鍵マークが表示されているか本番URL・プレビューURLの両方で確認してください。
レビュー用の共有URLは閲覧ログが取れるサービスを選択してください。誰がいつURLにアクセスしたかを記録することで、意図しない第三者のアクセスを事後検知できます。ギガサイト便のような認証付き共有サービスはこうした閲覧ログ機能も提供しており、万一の際の影響範囲の特定に役立ちます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
再発防止ルール
プロンプトに追加すべき具体的な制約文の例：「外部リソースはすべてhttps://で記述してください。http://のURLは一切使わないでください。プレースホルダー画像が必要な場合はhttps://placehold.co/を使用してください。」この3文を定型句としてスニペットツール（AlfredやClipyなど）に登録し、毎回ペーストする運用が最も続きます。
チームのGit管理HTMLリポジトリに`.github/workflows/mixed-content-check.yml`を作成し、pushのたびに `grep -rn 'http://' --include='*.html' .` を実行するGitHub Actionsワークフローを設定します。問題検出時にはPRにコメントを自動投稿する設定にすると、レビュアーが気づかないケースを防げます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
よくある質問
プロンプトに制約を追加してもAIがhttp://を出力することはありますか？
制約があっても例外的に出力されることがあります。プロンプトによる予防は第一防御層として機能しますが、生成後のスキャンを省略することはできません。両方を組み合わせることで信頼性が確保できます。
スキャンにLighthouseを使うメリットは何ですか？
LighthouseはMixed Contentだけでなくパフォーマンス・アクセシビリティ・SEOも同時にレポートします。公開前に一括で品質確認したい場合はLighthouse、Mixed Contentだけを素早く確認したい場合はgrepと使い分けるのが効率的です。
社内向けにHTTPサーバーでHTMLを公開する場合はプロンプトの制約は不要ですか？
社内HTTPサーバーでのみ使うなら当座の問題は出ませんが、後でHTTPS環境に移行する可能性があるなら最初からhttps://で統一しておくことを推奨します。移行時の修正コストをゼロにできます。