ブラウザバックなどで POST 内容を再送信させない方法

Question

コメントフォームつきのページなどで、ブラウザバックをしようとすると、
再送信の警告がでます。そのまま続行すると、再送信されていまいます。

これは token で解決してきましたが、
複数タブを開くとエラーになると不便です。

ブラウザバックで POST内容の再送信を無効にする方法はないでしょうか。

Comments

[yambejp]

ブラウザバックではPOSTは送信されませんよね？
もう少し詳しく説明をお願いします

[pac894398]

言葉足らずで申し訳ありません。
フォーム付のページで投稿➡他のページで遷移➡ブラウザバック のように動くと、再POSTされてしまいます。
これで伝わりますでしょうか？

[K_3578]

特に回答とできるほどまとまってもないしサクッと調べただけだけど
https://m-app.jp/blog/?date=2021-01-21
こんなのありましたが見てみては。

[yambejp]

簡易的なものでいいので具体的にソースを提示できますか？
ブラウザバックでは再POSTはされませんけど
（ページの更新ではないですよね？）

[pac894398]

すみません、いただいた回答で解決しました！

[K_3578]

>いただいた回答
それで解決されたのならその回答をBAにして
クローズお願いします。

[退会済みユーザー]

解決できたのであればおめでとうかなぁ。
僕のではない気がするのだけども…時系列的にK_3578様のコメントのような？

[K_3578]

自分ので解決したなら回答する程の事でもないのでテキトーに名前だけでも挙げて自己解決してくれれば
良いですけどね。
私個人としてのBAならyambejpさんの回答ですが･･･。

[K_3578]

(クローズされてないので再掲)
>いただいた回答
それで解決されたのならその回答をBAにして
クローズお願いします。

Answer 1

POST処理の流れをきちん整理するとよいでしょう

POSTする
→バリデートして問題があれば再入力
→問題なければセッションに突っ込んで登録ページへheaderで飛ばす
→登録が完了したら登録完了ページへheaderで飛ばす

登録完了ページからバックしてもPOST前のページにいくので問題ない

Answer 2

昔から、2重サブミット問題とか重複投稿問題とかいわれるヤツですね。
質問にある以外にもいろいろパターンがあります。

今となっては少し古い資料になるのですが、ほどよくまとまった記事があるので紹介します。
さいきょうの二重サブミット対策

また、この手2重投稿抑止系の token は CSRF 対策用の token と性質が似ており、複数タブで使用したいという場合、以下が参考になるかと
より高度なCSRF対策 – URL/URI個別にバリデーションする方法

ただ、ホントに複数タブに対応する必要があるのか？とかちゃんと詰めた方が良い気がします。

Answer 3

送信後の画面でブラウザバックを禁止するとか。

history.pushState(null, null, location.href);
window.addEventListener('popstate', (e) => {
  history.go(1);
});

コードは拾い物です。

参考URL　PisukeCode – Web開発まとめ　JavaScriptでブラウザバックを “ほぼ完全禁止” する方法
https://pisuke-code.com/javascript-prohibit-browser-back/

以下蛇足です。
sessionで一度通したデータを弾くとか、
DBと照合して同一データであれば登録を弾くとか。

Comments

[pac894398]

回答ありがとうございます。
ブラウザバックの禁止も検討しましたが、ユーザーの利便性を保つために禁止はしたくないです。
セッションで弾くなどもいいのですが、ブラウザの再送信確認画面が邪魔という課題が残ります。
今のところ、フォームを ajax にするのが最適解だと考えていますが、
フォームが多すぎて実装が大変なので、他の方法がないか模索しています。

[K_3578]

再送信確認画面を消すとかだったら調べれば結構記事見つかりますけど一度見てみては。