Webサイトでフォームの二重送信が発生する主な原因とメカニズム
山崎講師こんにちは。ゆうせいです。
新人研修中に受講者から以下の質問をいただきました。
フォームの二重送信はなぜ起こるのですか？
今回はこの質問に答えたいと思います。
Webサービスを利用している際に、注文ボタンを1回押したつもりでも、同じ内容の注文が2回送られてしまうことがあります。これをフォームの二重送信と呼びます。開発者が意図しないこの現象は、ユーザーの操作やブラウザの仕様、ネットワークの状況が組み合わさることで発生します。
二重送信が発生する主なケース
二重送信は、主にクライアント（利用者のブラウザ）からサーバー（Webサイトの管理システム）へデータが送られる過程で発生します。
送信ボタンの連続クリック
最も多い原因は、利用者が送信ボタンを短時間に2回以上クリックすることです。
これは、飲食店の注文ベルを何度も鳴らしてしまう状況に似ています。一度ベルを鳴らした後、店員が来るまでの間に不安を感じて再度鳴らしてしまうと、店員側には複数の呼び出しが届くことになります。
送信完了後のページ更新（F5キー）
データの送信が完了した後に、ブラウザの更新ボタンを押すと、直前に行った送信操作が再実行されます。
ブラウザは、直前の操作がデータの送信（HTTP POSTリクエスト）であった場合、同じデータをもう一度送る仕組みを持っています。これを知らずに画面をリフレッシュすると、意図せず同じ情報をサーバーに送ることになります。
ブラウザの「戻る」ボタンの利用
送信完了画面から「戻る」ボタンで入力画面に戻り、再度送信ボタンを押すことも二重送信に繋がります。
また、ブラウザの種類や設定によっては、戻る操作自体が直前の送信リクエストを再送するトリガーになる場合もあります。
ネットワーク遅延とシステム負荷の影響
ネットワークの速度が遅い場合、利用者が「ボタンが反応していない」と誤解しやすくなります。
サーバーが処理を開始してから応答を返すまでの時間をt1、利用者が我慢できる限界の時間をtwとしたとき、以下の条件を満たすと二重送信のリスクが高まります。
二重送信対策のメリットとデメリット
二重送信を防ぐための対策は、システムの種類に応じて適切に選択する必要があります。
JavaScriptによるボタンの無効化
送信ボタンが一度押された瞬間に、ボタンを操作不能（グレーアウト）にする方法です。
- メリット：利用者が視覚的に「送信中である」と認識でき、物理的な連続クリックを確実に防ぐことができます。
- デメリット：利用者のブラウザでJavaScriptの設定がオフになっている場合、この機能は動作しません。
トークン（合言葉）の発行による制御
送信画面を表示する際に、サーバーが一意の合言葉（トークン）を発行し、送信データと一緒に送り返させる方法です。
- メリット：サーバー側で一度受け取った合言葉を破棄するため、どのような経路で再送されても2回目以降の処理を確実に拒否できます。
- デメリット：サーバー側で合言葉を一時的に保存しておく必要があり、システムの設計がやや複雑になります。
PRG（Post-Redirect-Get）パターンの適用
データの送信（POST）が終わった直後に、別の確認ページへ強制的に移動（Redirect）させる設計手法です。
- メリット：送信完了後にページ更新（F5キー）をしても、再送されるのは「移動後のページ」の取得リクエストであるため、二重送信が発生しません。
- デメリット：画面遷移の回数が増えるため、システム全体の制御フローを正確に設計する必要があります。
学習のステップ
二重送信の理解を深め、対策を実装するためには、以下の順序で学習を進めてください。
- HTTPリクエストの仕組み：ブラウザとサーバーがどのようにデータをやり取りしているか、POSTとGETの違いを理解します。
- ブラウザの挙動確認：実際に簡単なフォームを作成し、送信後の「更新」や「戻る」がどのような通信を発生させるかツールで観察します。
- クライアント側対策の実装：HTMLやJavaScriptを用いて、ボタンの連続クリックを防止するコードを記述します。
- サーバー側対策の導入：セッション管理やトークンの概念を学び、サーバー側で二重送信を検知するプログラムを作成します。
これらの知識を段階的に習得することで、安全で信頼性の高いWebアプリケーションの開発が可能になります。
グループでは新人エンジニア研修のアシスタント講師を募集しています。
投稿者プロフィール
