なぜ危ないのか
社外レビューの相手は自社のセキュリティポリシーを知りません。iframeが外部サービスのトラッキングコードを含んでいた場合、レビュアーのブラウザ情報がサードパーティに収集されます。相手が社内ポリシーの厳しい大企業だった場合、こうした挙動がコンプライアンス問題になり取引に影響するケースがあります。
またiframeのsrcが変更されないまま公開段階まで持ち込まれると、ステージング環境やQA環境の内部URLが本番のHTMLに露出する問題も起きます。AIが生成コードに開発URLをプレースホルダとして使っていた場合に特に発生しやすいパターンです。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
ソースで見る場所
チェック1:HTMLファイルで`<iframe`を検索し、見つかったものをリストアップします。チェック2:各iframeのsrc属性を確認し、外部URL(http/httpsから始まるもの)か内部URLか分類します。チェック3:JavaScriptで動的にiframeを生成しているコード(`createElement('iframe')`)があれば、srcに設定される値も追跡します。
チェック4:DevToolsのNetworkタブを開いた状態でHTMLをリロードし、ドメインが自社以外のdocumentリクエストが発生していないか確認します。チェック5:Consoleタブで`document.querySelectorAll('iframe').length`を実行し、HTMLから見えない動的iframeがないか件数で把握します。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
安全に共有する設定
外部iframeが1件でも見つかった場合は「削除・コメントアウト・プレースホルダ差し替え」のいずれかを選択してから共有します。どれを選ぶかはiframeの用途によって判断します。地図・動画・ウィジェットはプレースホルダで代替可能なことが多いです。
ギガサイト便にアップロードしたら、パスワードと有効期限を設定し、共有URLを発行します。共有メッセージには「プレビュー版のため一部コンテンツ(地図など)は省略しています」と明記します。レビュアーに余計な疑問を持たせず、意図的に省略したことを伝えることが重要です。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
再発防止ルール
社外共有の承認フローに「iframeチェック完了」のステータスを追加します。Notionのデータベースやスプレッドシートで管理している場合は、チェックボックス列を追加して担当者が記録するようにします。
AIプロンプトのテンプレートに「社外共有版を生成するとき」という条件付き指示を追加し、「外部iframeを除去し、すべてのプレースホルダを静的コンテンツで代替すること」と記載します。社内版と社外共有版で異なるプロンプトを使い分けることで、用途に適したHTMLを最初から生成できます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
よくある質問
iframeチェックを5件以上まとめて行う効率的な方法はありますか?
複数のHTMLファイルがある場合は`grep -rn '<iframe' ./`でまとめて検索すると件数と位置を一覧できます。外部iframeのみ抽出したい場合は`grep -rn 'iframe.*src=["']http' ./`と絞ります。
デザインのレビューが目的のときはiframeを完全に削除して問題ありませんか?
デザインの確認が目的であれば、iframeを削除してもレイアウト確認の妨げにならない場合がほとんどです。iframeの位置に同サイズのプレースホルダを置けばデザインの意図も伝わります。
社内向けと社外向けで別々のHTMLファイルを管理するのは手間がかかりすぎませんか?
ビルドスクリプトでフラグを切り替えてiframeのonとoffを制御する方法が効率的です。Makefileやnpm scriptで`build:internal`と`build:external`コマンドを定義し、社外共有時は外部iframeを自動除去するステップを組み込むと管理コストを下げられます。