Detect multiple tabs or windows of the same session in a web application
This is from a previous stack overflow post:
if (+Cookies.get('tabs') > 0)
alert('Already open!');
else
Cookies.set('tabs', 0);
Cookies.set('tabs', +Cookies.get('tabs') + 1);
window.onunload = function () {
Cookies.set('tabs', +Cookies.get('tabs') - 1);
};
URL:
How to know if browser tab is already open using Javascript?
This should be useful to you!
*This is not my code, just passing on information!
Multiple Tab Detection
It is only possible to keep track of how many times your site has been opened. Keep a cookie with the number of active tabs open. onload
, increment the number in the cookie. onunload
, decrement it. The server should then be able to read this cookie, and know how many instances are open.
Stop people having my website loaded on multiple tabs
EDIT2:
It's the exact thing which is mentioned at this answer, You need 2 IDs:
- One random one
- One consistent one (this will be our SSID actually, since you limit tabs of a single browser, it's better to get generated form browser's unique parameters)
You can generate consistent one from browser's user-agent or get it from server-side. store both of them server-side.
Store the random one in window.name
property which is tab-specific.
Send a heartbeat every 1~2 seconds to your server containing both consistent ID and random one. if server fails to receive the heartbeat, it cleans up database and de-register dead clients.
on every browser's request, check window.name
for the value. if it were missing, check with the server-side whether if the previous tab is closed or not (cleaned from database).
If yes, generate a new pair for client if no, reject them.
Two suggestions on top of my mind:
- Server-side (better): provide all your clients, a user name and password. request them on their first visit of your site to enter with their credentials. then on every other request, check for whether user with said credentials is already logged in or not.
Client *
|
|
Server ---> Check whether
Already logged
or not?
______________
| |
yes no
| |
permit reject
them them
- Client-side: If you really need a strong check of this, use evercookie to store an
already-logged-in
cookie on client's machine.
Side-note: Do know that every attempt in client side is not secure at all! client-side should help server-side, it shouldn't be used as the one and only source of security. even evercookies can be deleted so, give my first suggestion a go.
**EDIT:**
Evercookie is really doing a good job at storing most secure zombie cookies ever but since the library itself is a little bit heavy for browsers (storing a cookie takes more than 100ms each time) it's not really recommended for using in real-world web app.
use these instead if you went with server-side solution:
- Way around ASP.NET session being shared across multiple tab windows
- Kiranvj's answer
Related Topics
Cannot Read Property of Undefined @Viewchild Not Working Angular 5
How to Sort Data in Ascending or Descending Order in Reactjs
Preventing Page from Scrolling on Focus Switching
React Component Not Re-Rendering When State Changes
Access a Variable Outside of .Then Function
How to Disable Button After (Click) in Angular
How to Parse Xml File in React
Escaping Apostrophe (Single Quote) Character in JavaScript and HTML
Label and Input Fields on the Same Line
Javascript, Viewing [Object Htmlinputelement]
How Insert JavaScript into Vue File
Alphanumeric, Dash and Underscore But No Spaces Regular Expression Check JavaScript
Syntaxerror: Unexpected Token O in Json At Position 1
Check Whether a String Contains Only Special Characters
Split String in JavaScript and Detect Line Break
Destroy Chart.Js Bar Graph to Redraw Other Graph in Same <Canvas>