セキュリティ

AI生成HTMLにiframe埋め込みが残っていないか確認する方法

AIが生成したHTMLには、開発者が意図しないiframe要素が紛れ込む場合があります。外部サービスのウィジェットや地図の埋め込みコードがそのまま残っていると、公開後に情報が外部サーバーへ送信されます。確認方法を具体的に解説します。

なぜ危ないのか

iframeは外部URLのコンテンツをページ内に読み込む要素であり、読み込み先のサーバーにはアクセス元のIPアドレス・ユーザーエージェント・リファラが送信されます。Googleマップ・YouTube・Twitterウィジェットなどのiframeは、企業のイントラネット向けHTMLや内部ドキュメントに埋め込まれた場合、閲覧者の情報が外部に漏れる経路になります。

AIは「地図を表示して」「動画を埋め込んで」という指示にiframeで応えるのが一般的です。プレースホルダとして残ったiframeが本番の外部URLを指している場合、レビュアーがそのページを開いた瞬間から外部サーバーへのリクエストが発生します。

  • 相手がログインなしで開ける状態か確認する
  • PCとスマホで最低1回ずつ表示を確認する
  • 内部情報・個人情報・不要な外部送信が残っていないか見る
  • レビュー期限と修正時の差し替え方を決めておく

ソースで見る場所

HTMLファイルで`<iframe`を全文検索します。`src`属性を確認し、相対パス以外の`https://`または`http://`から始まるURLが含まれていれば外部iframeです。特に`google.com/maps/embed`・`youtube.com/embed`・`platform.twitter.com`・`player.vimeo.com`などのドメインが含まれるsrcは要注意です。

動的に生成されるiframeも確認が必要です。`document.createElement('iframe')`や`innerHTML`でiframeタグを生成するJavaScriptコードを検索します。`src`に変数が渡されている場合はその変数の値まで追跡し、外部URLが設定されていないか確認してください。

  • HTML内の外部script・form action・iframeを確認する
  • APIキーやトークンらしき文字列がないか検索する
  • 画像・CSS・JSのパスが公開後も解決できるか見る
  • noindexと認証を混同せず、必要なら両方設定する

安全に共有する設定

社外共有版では外部iframeをすべて削除またはコメントアウトし、代わりにスタティックな画像やプレースホルダ画像(`<img src='map-placeholder.png'>`)に差し替えます。地図や動画が確認内容の本質でなければ、削除してもレビューは成立します。

どうしてもiframeが必要なレビューの場合は、ギガサイト便でパスワードと有効期限を設定した上で、レビュアーに「このページは外部サービス(Googleマップなど)に接続します」と事前に周知します。レビュアーが社内ポリシーを確認した上でアクセスできる状態にしてから共有します。

  • HTML内の外部script・form action・iframeを確認する
  • APIキーやトークンらしき文字列がないか検索する
  • 画像・CSS・JSのパスが公開後も解決できるか見る
  • noindexと認証を混同せず、必要なら両方設定する

再発防止ルール

AIへのプロンプトに「iframeを使った外部サービスの埋め込みは禁止。地図・動画が必要な場合はプレースホルダ画像で代替し、コメントに差し替え方を記載すること」と追記します。この制約でiframeを使わないHTML設計をAIが選択するようになります。

HTMLのlintルールに`iframe[src^='http']`のような外部iframeを検出するカスタムルールを追加します。HTMLhintやcustom eslint-plugin-htmlのルールで設定できます。CIに組み込むとマージ時に自動チェックが走り、担当者の見落としを補完できます。

  • HTML内の外部script・form action・iframeを確認する
  • APIキーやトークンらしき文字列がないか検索する
  • 画像・CSS・JSのパスが公開後も解決できるか見る
  • noindexと認証を混同せず、必要なら両方設定する

よくある質問

iframeのsrcが相対パス(`/embed/map`など)の場合は安全ですか?

相対パスは同一オリジン内のコンテンツを指すため、外部サーバーへの情報送信は発生しません。ただし参照先のパスが実際に存在するコンテンツを指しているかは別途確認してください。

iframeを削除したら画面レイアウトが崩れました。最小限の修正で対処できますか?

iframeの位置にdivを置き、同じwidthとheightを指定して背景色でプレースホルダを作ると、レイアウトを維持したまま外部接続なしで表示できます。`<div style='width:100%;height:400px;background:#eee;display:flex;align-items:center;justify-content:center'>地図表示エリア</div>`のような代替が有効です。

Googleマップのiframeは個人情報を漏らしますか?

Googleマップのiframeを読み込むとGoogleのサーバーに閲覧者のIPアドレスが送信され、Googleアカウントでログイン中のユーザーとひもづく可能性があります。GDPRや社内のプライバシーポリシーによっては同意取得が必要なケースもあります。

関連記事

「セキュリティ」の記事をもっと見る →