19

I've done a booking application done using CakePHP which involves a few steps before the checkout page. In between these steps I store the information in the session.

How it works is that Step 1 requires them to fill in their information. When going to Step 2, the information in Step 1 will be saved into the session object. As they proceed in the other steps, the process repeats. At the end when they checkout, all the data is then saved to the database.

Everything works great if the user opens one instance of the application in the browser. But once they have another page or another tab opened for the same application in the same browser, problem happens.

Let's say they have two instance of the application open in Tab A and Tab B. In Tab A they entered the details in Step 1 and proceed to Step 2. Then the user does the same thing in Tab B.

At the last step when the user does a checkout, information in Tab A is the same as in Tab B.

Right now, I can only think the best way is to prevent the user from opening the same application in two browser instance.

Is there a way to detect and prompt the user to complete the booking form in Tab A first when they try to open another instance in Tab B?

darnpunk
  • 415
  • 1
  • 5
  • 13

4 Answers4

9

1.The same problem (and solution) : https://sites.google.com/site/sarittechworld/track-client-windows

2.You can send information by POST or GET

AsgarAli
  • 2,201
  • 1
  • 20
  • 32
pufos
  • 2,890
  • 8
  • 34
  • 38
  • On March 21, 2023 the page is unavailable. Please use Internet Archive cashed version: https://web.archive.org/web/20201010125653/https://sites.google.com/site/sarittechworld/track-client-windows – Rikijs Mar 21 '23 at 20:41
2

Sure, you can achieve this with a client-side poller script. In JavaScript, you can generate a window ID that can be anything as long as its guaranteed to be unique. Have the JS make Ajax callers to an endpoint on the server that does nothing but compare IDs and session. At any point if you have two different "windowID" values, you know they have to have to windows open for the same session.

You could store this on the server side as an array in the session or you could even store it entirely on the client side in a cookie. If you chose to do that, your client side poller would just look at the cookie value and if it contains two different values, something is amiss. Cookies are a little less ideal though because they add weight to the request/response cycle and you'd have to setup an mechanism to clear the value of the current page when the user unloads the page.

For the server-side implementation, you would just need to send the current windowID along with link or post so that the server can clear the windowID from the session. None of this would protect against the user having a Firefox session and a Chrome session open at once though.

BenMorel
  • 34,448
  • 50
  • 182
  • 322
Jackson Gabbard
  • 124
  • 7
2

You could mark a session as started when step 1 is first started. Make sure server-side that they follow the right steps (i.e. they don't return to step 1 after step 1 has been completed unless they specifically click a link to do so.) Basically, track their current step on the server and update it as needed. In the event the user does something unexpected, you could give them the option to start over.

I'm wondering if hidden fields with timestamps on your forms might help. Kinda the same idea though.

Caveat: this process might break the essence of your browser's back button. I hate myself for letting that happen in one of my projects.

For cross-browser support, you'd need to have it associated with a user account or something that persists.

Guttsy
  • 2,130
  • 1
  • 18
  • 29
0

As Benjamin pointed out, you can do this by coming up with a per-window ID which you then report to the server with each request. If you want to enable the multiple window use case, I think this is the most reasonable approach.

I don't think you need to poll the server via ajax to do this though. As long as every request to the server includes the window ID, you can disambiguate what session on the server side to associate the request with. That will mean that your server-side code has to change to include the window ID as part of the session.

However, that approach has serious drawbacks. For instance, if the user closes both Tab A and Tab B, and then opens up a new Tab C... what happens? Which set of data should they reconnect with?

The approach of restricting the user to a single tab sounds pretty reasonable if you need to prevent the intermingling of multiple tabs worth of state.

You can do this via Local Storage, btw. If you generate a random ID on the client and push it into Local Storage via a call like window.localStorage.setItem('window_id', <my_random_id_here>); then you can check for this value on page load. If the value exists when the page loads, you've got a pretty clear indicator that at least one other window is open. You'll have to make sure to remove this value on page unload, otherwise dead sessions might trigger false positives.

Jackson Gabbard
  • 124
  • 7