Help us understand the problem. What is going on with this article?

ブラウザのタブ別にセッションを分ける方法を考えてみた

Webサイトによくある導線として、「入力画面→確認画面→完了画面」というのがあると思います。

  1. 入力画面で入力された内容をセッションに入れて、
  2. 入力内容を確認画面で表示して、
  3. 完了画面でセッションの情報を登録する

という処理が想像できます。

ここでたまに起きる問題として、別タブで同じ画面を開き、タブ同士を行ったり来たりしながら完了画面に行くと確認画面と違う内容が登録されてしまうというもの。

なぜ?

セッションの仕組みはcookieにセッションIDを保存して成り立っているので、通常「1ブラウザ = 1cookie = 1セッション」となります。
だから、ブラウザのタブを複数開いていた場合でも、セッションはタブ毎ではなく全タブで共通となる。

つまり、同じキーでセッションに値を格納したら後勝ち(上書き保存)になるのです。

手順 タブ 操作内容 備考 セッションの中身
タブ1 入力画面を開く - -
タブ1 入力して確認画面に遷移する ここでセッションに入力内容を格納する 入力内容1
タブ2 新しいタブで入力画面を開く - 入力内容1
タブ2 タブ1の時とは違う内容を入力して確認画面に遷移する ここでセッションに入力内容を格納する 入力内容2
タブ1 タブ1に戻って完了画面に遷移する セッションにある入力内容2の情報を登録する 入力内容2

このような手順で操作をした場合、ユーザー的には「タブ1」の確認画面で入力した内容(入力情報1)が表示されているので、当然それが登録されると思うが、実際は「手順4」でセッション内容が「入力内容2」に上書きされているので、最終的には「入力内容2」が登録されている。

対策

そこで、セッションの中身をちょっと工夫してみます。
セッションに格納する時のキーをタブ毎に用意して、その中でさらにkey:valueにしてデータを格納します。

イメージはこんな感じ。

セッションのイメージ.
[
    タブ1のセッションキー => [
     'name' => 'やまだたろう',
     'email' =>'yamada@example.com',
    ],
    タブ2のセッションキー => [
     'name' => 'たなかいちろう',
     'email' =>'tanaka@example.com',
    ],
]

ポイント

  • タブ毎のセッションキーは、ミリ秒単位のタイムスタンプとかUUIDとか絶対に被らないIDを生成する
  • タブ毎に生成したセッションキーを画面に隠し持たせる。<hidden name="tab_session_key" value="【生成したセッションID】">
  • ビジネスロジックでセッションを使うときはリクエストの生成したセンションキーを使ってデータを取得する。(セッションに値を追加する時も)

さらに

  • セキュリティー的には、生成したセッションキーは画面遷移毎とか一定時間毎に生成しなおすと良いかも
  • セッションタイムアウト機能を持たせておいて、一定時間過ぎたタブのセッションは削除する様にするとcookieを圧迫しないで済むかも
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away