プログラム関係の備忘録。技術系記事1000記事以上を目指すブログ

フォームの二重送信やブラウザバックによる操作を考慮する場合の考え方

  • 2019年8月30日
  • 2019年8月30日
  • その他
  • 6197view
  • 0件

例えばこんなとき

フォームの二重送信(または多重送信)

ユーザーがフォームになにかしらのデータを入力し、送信。
送信完了ページでブラウザの再読み込みをすると、直前のPOSTが再び実行されてしまう。

または、なにかしらのミスや、電波が悪い状況下で送信ボタンを連打してしまった場合など。

ブラウザバックによる操作

ブラウザ操作で前の画面に戻る操作を禁止したいとき(スマホなどで特に多い)

対策

送信完了ページでの再読み込みでPOSTされるのを防ぐ

①トークンを利用

ユーザーがフォーム入力画面に行き着いたときに、トークンを保存しておく。送信完了時にトークンを破棄することで、送信完了画面で再読み込みをされた場合の処理の切り分けができる。ブラウザバックによる対応もこの方法でよさそう。

②セッションを利用

expressでいうとres.renderに変数などを渡してviewを描画するため、この場合も送信完了メッセージ等をviewに渡す、といった処理にしたいところだが、res.redirectで別ページを返すようにする。そうすると、完了ページで再読み込みしても、別ページのGET処理が走るだけなので対応ができる。ただし、完了メッセージ等は一時的にセッションに保存し、 別ページをGETしたときに読み込み、その後削除するという流れになる。

セッションを利用するだけでは、ブラウザバックには対応できないので、①と②を両方考慮しておいたほうがよさそう。
さらに、送信ボタンの連打を防ぐために、ボタンが押されたときにボタンを非活性にする処理もスクリプトでしこんでおく。