なぜ危ないのか
社外レビューでは「フォームに仮のデータを入力して動作確認する」ケースが多く、受信者が誤って実際の氏名やメールアドレスを入力することがあります。action属性に外部サービスのURLが残っていれば、そのデータは制作者の管理外のサーバーに保存されます。社外の個人情報が流出した場合、GDPR違反や個人情報保護法の報告義務が発生する可能性があります。
社外レビュー後にファイルを修正して本番公開する場合、action属性の書き換え忘れが起きやすくなります。レビュー段階で無害化しておけば、その状態を本番に近い形に維持でき、修正漏れのリスクも下がります。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
ソースで見る場所
送付前にHTMLをVS Codeなどで開き、`<form`タグを全件検索します。各formのaction属性値を書き出し、自社ドメインまたは空文字以外が含まれていないか確認します。また、`fetch(`・`$.ajax(`・`axios.`をキーワードにJavaScript送信処理も合わせてリストアップします。
ブラウザでファイルを開いてNetworkタブをオンにした状態でフォームを送信し、どのURLへPOSTリクエストが飛ぶかをリアルタイムで確認します。ソース上では気づかなかった動的なURL生成も、このネットワーク確認でほぼ捕捉できます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
安全に共有する設定
社外送付用のファイルは、フォームaction属性を一律で`#`に置き換えた「レビュー用コピー」を別途作成することを推奨します。元ファイルに手を加えないことで、レビュー後の本番化作業がシンプルになります。レビュー用コピーにはファイル名に`_review`を付けて区別します。
パスワード保護共有URLで渡す場合でも、同一のパスワードを複数の相手に送ると事実上オープンURLに近い状態になります。相手ごとに異なるパスワードを設定するか、アクセスログを確認できるサービスを使い、誰がいつ開いたかを記録しておきます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
再発防止ルール
社外レビュー送付フローをNotionや社内Wikiのドキュメントとして整備し、「フォームaction属性の確認」「APIキーの確認」「個人情報の削除」を必須チェック項目として組み込みます。誰が担当しても同じ品質で送付できる仕組みを作ることが再発防止の基本です。
GitHubを使っている場合、Pull Requestのテンプレートに「社外送付チェックリスト」セクションを追加し、マージ前に全項目にチェックが入っているか確認する運用にします。コードレビューとセキュリティチェックを同じフローで管理できるため、確認作業が定着しやすくなります。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
よくある質問
フォームのaction属性を#にすると送信時にどうなりますか？
ページ内の先頭にスクロールされますが、データは送信されません。見た目のレビューには問題ありません。送信ボタン押下後の挙動も確認させたい場合はonsubmitでalertを表示するなど代替演出を入れてください。
複数のHTMLファイルがある場合、全ファイルを一括確認する方法はありますか？
ターミナルで`grep -rn 'action="http'` をプロジェクトディレクトリに対して実行すると、外部URLのaction属性を持つファイルと行番号を一覧できます。
レビュー用コピーを本番に使ってしまった場合の影響は？
action属性が#になっているため、フォーム送信が一切動作しません。問合せや申し込みが届かなくなる業務影響が出るため、本番リリース前に必ず正式なエンドポイントに差し替えてください。