なぜ危ないのか
hidden inputに個人情報が入り込むパターンとして代表的なのは、AIがモックアップ用フォームを生成する際に「サンプルの顧客データ」として実在しそうな氏名・メールアドレス・電話番号をvalue属性に埋め込むケースです。AIは説得力のあるサンプルデータを作ろうとするため、現実に近い形式の値を生成します。これがそのまま公開されると個人情報保護法上の問題になり得ます。
また、内部管理システムのプロトタイプをAIで作る際に、実際のユーザーIDやセッショントークンをプロンプトに貼り付けてしまい、それが出力のhidden inputに転写されるケースもあります。特にセッショントークンは有効期限内であれば認証に使用される可能性があるため、非常に高いリスクに分類されます。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
ソースで見る場所
リスクの高い箇所を優先して確認する順番を示します。まず`<form>`タグを見つけ、その中にある`input[type='hidden']`を全件洗い出します。次にvalue属性の中身を以下の観点で分類します:数字のみ(IDや番号の可能性)、@を含む(メールの可能性)、長い英数字文字列(トークンの可能性)、日本語を含む(氏名や住所の可能性)。
フォームが複数ある場合や、JavaScriptで動的にhidden inputを追加するコードがある場合は、静的なHTMLソースだけでなくブラウザでページを描画した後にDevToolsで実際のDOMを確認する必要があります。`document.forms`でフォーム一覧を取得し、各フォームのelements配列を確認する方法が確実です。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
安全に共有する設定
共有前の最低限の対処として、hidden inputのvalue属性を空文字列にします。`sed -i 's/\(type=["']hidden["'].*value=\)"[^"]*"/\1""/g' index.html`のような置換コマンドで一括処理できますが、値の形式によっては正規表現を調整する必要があります。確実を期すなら手動でvalue属性を確認しながら削除するほうが安全です。
さらに踏み込んだ対策として、デザインレビュー専用のHTMLを用意し、全フォーム要素を`<div>`に置き換えてフォームとしての機能を排除する方法があります。見た目のデザインは変わらず、送信機能や隠し値が完全に除去されるため、デザインフィードバックを得る用途に最適です。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
再発防止ルール
フォームを含むHTMLをAIに生成させる場合のプロンプトルールとして「hidden inputには必ず空のvalue属性を使う」「モックデータには架空のダミーデータを使い、実在する形式(有効なメールアドレス形式など)は避ける」の二点を明文化します。
社内のHTMLレビューフローにhidden inputの確認を正式なステップとして追加します。コードレビューツール(GitHub PRなど)を使っている場合は、HTML変更のdiffでhidden inputのvalue属性を重点的に確認する旨をレビューガイドラインに記載してください。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
よくある質問
hidden inputのvalue属性に個人情報が含まれているかどうか、判断が難しい場合はどうすればよいですか?
判断に迷う場合は「空にする」方針を取ることを推奨します。デモ用途では値がなくても通常は問題なく、万一個人情報だった場合のリスクと比べればコストが低いです。
hidden inputを使わずに同じ機能を実現できますか?
JavaScriptのカスタムdata属性(`data-*`)やJSの変数として保持する方法があります。ただしこれらもHTMLソースやJSから参照できるため、秘密情報の保存に適した方法ではなく、根本的にはサーバーサイドで管理するべきです。
フォームのaction属性に内部APIのURLが書かれている場合も問題ですか?
はい。内部APIのURLが露出すると攻撃の標的になります。共有用HTMLではaction属性を`#`に変更し、内部エンドポイントが推測されないようにしてください。