なぜ危ないのか
社外レビューではフロントエンドエンジニアやQA担当者がHTMLのソースを確認することが多く、`<input type="hidden">`の存在に気づくことは難しくありません。特にAI生成のHTMLはフォームのモックに具体的な値を入れていることが多く、それが実在の個人情報に見える場合は相手側でも扱いに困る状況が生まれます。
hidden inputに内部システムのIDやフラグが含まれていると、社外のレビュアーが内部システムの構造を推測できるようになります。例えば`<input type="hidden" name="role" value="admin">`というフィールドがあれば、権限管理の仕組みが外部から見えてしまいます。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
ソースで見る場所
チェックリストの形式で確認手順を示します。(1)HTMLファイルをエディタで開き、`type="hidden"`を全件検索する。(2)各hidden inputのname属性とvalue属性を書き出す。(3)value属性が空でないものを重点確認する。(4)数字のみ・@含む・長い英数字・日本語が含まれる値に対してリスク判定する。
ブラウザでページを開いてDevToolsのElementsパネルで確認する方法も有効です。Consoleで`[...document.querySelectorAll('input[type="hidden"]')].map(el => ({name: el.name, value: el.value}))`を実行すると、全hidden inputのname/valueのペアをオブジェクト配列として一覧表示できます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
安全に共有する設定
確認作業でリスクのある値が見つかった場合、value属性を`value=""`に変更するか、要素ごと削除します。フォームの動作デモが必要な場合は、ダミーのIDやフィクションのデータ（「example@example.com」や「9999999」など明らかに架空とわかる値）に置き換えてください。
ギガサイト便でURL共有する場合は、会社ドメイン認証を設定して閲覧者を自社のメンバーと認証済みのレビュアーのみに限定できます。ただし認証で制限しても、認証済みレビュアーにhidden inputの内容が見えることは変わらないため、値の修正は必須です。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
再発防止ルール
「社外共有前チェックリスト」ドキュメントに「hidden inputのvalue確認」を必須項目として追加します。Notionやconfluenceのページテンプレートとして作成しておくと、毎回一から作る手間が省けます。
AIへのHTMLフォーム生成プロンプトに「hidden inputのvalue属性は必ず空にする」というルールを追加し、プロンプトテンプレートとして保存しておきます。チームで同じテンプレートを使うことで、生成されるHTMLのクオリティを一定水準に保てます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
よくある質問
hidden inputを含むHTMLを誤って共有してしまった場合、まず何をすればよいですか？
まず共有URLを無効化するか、正しいファイルに差し替えてください。次に相手に連絡して旧URLへのアクセスをやめるよう依頼し、その後アクセスログを確認して閲覧の範囲を把握してください。
hidden inputにvalue値がないと、フォームのデモとして見栄えが悪くなりますか？
デザインレビューでは見た目のみが重要なのでhidden inputの値は画面に影響しません。動作デモが必要な場合は架空のダミー値を使い、実在する形式のデータは使わないことを徹底してください。
複数のHTMLファイルで構成されたプロトタイプの場合、全ファイルを確認する必要がありますか？
はい。hidden inputは任意のページに含まれる可能性があるため、全ファイルを対象にgrepなどで一括検索することを推奨します。ファイル数が多い場合はスクリプトで自動化すると効率的です。