なぜ危ないのか
社外のレビュアーは受け取ったHTMLのソースを確認することが多く、特にフロントエンド開発者やQA担当者は当然のようにDevToolsを開きます。コメントに残っていた社内のシステム名、未発表の機能名、テスト用ユーザーの認証情報などが第三者に見える状態は、秘密保持契約の範囲外であっても好ましくありません。
AIツールを使って素早くHTMLを生成する現場では、生成物を確認せずにそのまま共有するケースが増えています。AIはプロンプトに含まれていた情報をコメントとして出力したり、自分の処理の説明をコードコメントとして埋め込んだりすることがあるため、生成直後の状態は必ず確認が必要です。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
ソースで見る場所
チェックすべき場所を優先度順に並べると、(1)`<head>`内のメタ情報周辺のコメント、(2)フォームの`<input>`要素周辺のコメント（テスト値やバリデーション仕様が書かれやすい）、(3)`<script>`タグ内のJavaScriptコメント、(4)CSS内のコメント、の順になります。
コマンドラインが使える環境では`grep -n '<!--' index.html`で行番号付きで抽出し、一行ずつ目視確認するのが確実です。複数ファイルがある場合は`grep -rn '<!--' ./`でフォルダ全体を検索し、結果をファイルに保存して確認後に廃棄します。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
安全に共有する設定
レビュアーに渡す前の最終ステップとして、コメントを除去したファイルを複製して共有用ディレクトリに配置します。元のファイルはローカルリポジトリに保持し、共有用ディレクトリに置いたファイルのみをアップロードするルールを作ると、誤って元ファイルを送る事故を防げます。
ギガサイト便でプレビューURLを発行する場合、会社ドメイン認証やパスワード認証と組み合わせることで閲覧者を限定できます。ただしこれはアクセス制御であり、コメントの中身を隠すものではないため、認証と合わせてコメント除去も必ず実施してください。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
再発防止ルール
チームの共有フローにHTMLコメント確認のステップを明示的に追加します。Slackで共有URLを送る前に「コメント確認済み」のスタンプを押すルールを作るだけでも、抑止力になります。
より確実な方法は、HTMLをアップロードするスクリプトにコメント検出ステップを組み込むことです。`grep -c '<!--' $FILE`の結果が0以外であればアップロードを中断するシェルスクリプトを用意し、チーム全員が同じスクリプトを使って共有作業を行う体制を整えてください。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
よくある質問
コメントが多いHTMLファイルを効率よく確認するコツはありますか？
VS CodeのSearch機能で`<!--`を検索し、結果パネルに一覧表示させてから、秘密情報のキーワード（key、token、password、secret）でさらに絞り込むと短時間で確認できます。
レビュー後にコメントを復元する必要がある場合はどうすればよいですか？
Gitでコミットした状態から共有用ファイルを生成する手順にすれば、元ファイルはリポジトリの履歴から常に復元できます。共有のたびにブランチを切って共有用コミットを作る運用がおすすめです。
HTMLコメントではなくJavaScriptのコメントも同様に確認が必要ですか？
はい。インラインの`<script>`ブロック内の`//`や`/* */`コメントも同様にソースから確認できます。特にAPI呼び出しの周辺に設定値や認証情報のメモが残りやすいため重点的に確認してください。