【Web開発】「戻る」操作について

Webアプリの「戻る」には2種類の操作があります。

• ブラウザの戻るボタン
• アプリに用意された戻るボタン

ブラウザの戻るボタン

お手軽だが細かい挙動がブラウザ任せになってしまうので簡易的なアプリでしか使われないです。(Webブラウザによって仕様が異なっており、また利用者の操作を細かく制御するということが難しいため）

大規模アプリとかを作る場合はアプリ内に戻るボタンを用意するようにしてブラウザの戻るボタンは押せないようにしましょう。

対策

操作には下記のようにブラウザの戻るボタン以外にもたくさんあるので注意です。

• ブラウザの戻るボタン
• Backspaceキー
• Alt + 左キー
• 右クリックから「戻る。」

そもそも押せないようにする対策

• ツールバーは非表示にする。
• キーを抑制する。
• ブラウザの履歴を無効化する。

ただ、完全に対策するのはなかなか難しかったりします。

押されたとしても二重リクエストを防ぐ対策

• RPGパターンを使う。
• 二重送信を抑制する。
• セッションオブジェクトを適切なタイミングで消す。
• 登録時に2重登録されていないかチェックする方法

RPGパターン

通常のPOSTによる画面遷移ではなく、画面遷移を「POSTとR(リダイレクト）とGET」に分けることです。なので最初のPOSTリクエストが遷移履歴に記録されなくなり二重リクエストが行われなくなります。デメリットとしては、POSTとGETそれぞれに処理を分けなければならないので実装が大変になることです。

二重送信の抑制

サーバー側が画面を表示させる場合にトークンを発行します。その表示させた画面のトークンIDとリクエストに使われたトークンが一致しなければ登録をさせないという方式になります。CSRF対策としても使われていたりしますが、二重送信の防止にも役に立ちます。

セッションオブジェクトを消す。

これは登録時にセッションの中身を見て登録している場合は使える方法です。

「キャッシュのあるなし」で遷移先が変わる。

キャッシュがある場合

前の画面をそのまま表示できます。

キャッシュがない場合

「no-cache」のシステムでなります。戻るボタンを押した際にキャッシュがないので「有効期限切れ」のダイアログが出ます。誤ってフォームデータの再送信とかをしてしまうと二重リクエストとかになってしまい二重にデータが登録されたりするので注意です。

アプリに用意された戻るボタン

色々な場面に対応できるが作り込みが発生します。