├── index.php
├── js.cookie.min.js
├── readme.md
├── sessionbox.js
├── start.sh
└── user.php


/index.php:
--------------------------------------------------------------------------------
1 | <?php
2 | 	session_name('COOKIE1');
3 | 	$newid = session_create_id();
4 | 	session_id($newid);
5 | 	session_start();
6 | 	$_SESSION['login'] = true;
7 | 	header('Location: user.php');
8 | ?>
9 | 


--------------------------------------------------------------------------------
/js.cookie.min.js:
--------------------------------------------------------------------------------
1 | /**
2 |  * Minified by jsDelivr using Terser v3.14.1.
3 |  * Original file: /npm/js-cookie@2.2.1/src/js.cookie.js
4 |  * 
5 |  * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
6 |  */
7 | !function(e){var n;if("function"==typeof define&&define.amd&&(define(e),n=!0),"object"==typeof exports&&(module.exports=e(),n=!0),!n){var t=window.Cookies,o=window.Cookies=e();o.noConflict=function(){return window.Cookies=t,o}}}(function(){function e(){for(var e=0,n={};e<arguments.length;e++){var t=arguments[e];for(var o in t)n[o]=t[o]}return n}function n(e){return e.replace(/(%[0-9A-Z]{2})+/g,decodeURIComponent)}return function t(o){function r(){}function i(n,t,i){if("undefined"!=typeof document){"number"==typeof(i=e({path:"/"},r.defaults,i)).expires&&(i.expires=new Date(1*new Date+864e5*i.expires)),i.expires=i.expires?i.expires.toUTCString():"";try{var c=JSON.stringify(t);/^[\{\[]/.test(c)&&(t=c)}catch(e){}t=o.write?o.write(t,n):encodeURIComponent(String(t)).replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g,decodeURIComponent),n=encodeURIComponent(String(n)).replace(/%(23|24|26|2B|5E|60|7C)/g,decodeURIComponent).replace(/[\(\)]/g,escape);var f="";for(var u in i)i[u]&&(f+="; "+u,!0!==i[u]&&(f+="="+i[u].split(";")[0]));return document.cookie=n+"="+t+f}}function c(e,t){if("undefined"!=typeof document){for(var r={},i=document.cookie?document.cookie.split("; "):[],c=0;c<i.length;c++){var f=i[c].split("="),u=f.slice(1).join("=");t||'"'!==u.charAt(0)||(u=u.slice(1,-1));try{var a=n(f[0]);if(u=(o.read||o)(u,a)||n(u),t)try{u=JSON.parse(u)}catch(e){}if(r[a]=u,e===a)break}catch(e){}}return e?r[e]:r}}return r.set=i,r.get=function(e){return c(e,!1)},r.getJSON=function(e){return c(e,!0)},r.remove=function(n,t){i(n,"",e(t,{expires:-1}))},r.defaults={},r.withConverter=t,r}(function(){})});
8 | //# sourceMappingURL=/sm/b0ce608ffc029736e9ac80a8dd6a7db2da8e1d45d2dcfc92043deb2214aa30d8.map


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
  1 | # SessionBox / MultiLogin
  2 | 
  3 | Multi login to website - Cookie Site Isolation with JavaScript.
  4 | 
  5 | Log into multiple accounts on the same site simultaneously.
  6 | 
  7 | ## English
  8 | 
  9 | Websites generally use cookies to record the user's unique identifier. 
 10 | without having to ask for his login/password again at each request.
 11 | 
 12 | Cookies belong to a domain name.
 13 | 
 14 | In a classic browser (without private mode activated), you cannot connect with the same browser 
 15 | on several user accounts of the same website.
 16 | 
 17 | To allow multiple user accounts to be logged on, there is a workaround by isolating cookies by browser tab.
 18 | 
 19 | The idea is to save cookies in the [sessionStorage](https://developer.mozilla.org/fr/docs/Web/API/Window/sessionStorage) 
 20 | and restore them automatically when the tab is displayed or before changing web pages.
 21 | 
 22 | The constraint is that you cannot log out of a user account without using the `SessionBox.close()` function.
 23 | 
 24 | ### Server side
 25 | 
 26 | Make sure that a new user id is created when the user is logged in (even if a cookie already exists).
 27 | 
 28 | An example in PHP : 
 29 | 
 30 | ```PHP
 31 | session_name('COOKIE1');
 32 | $newid = session_create_id();
 33 | session_id($newid);
 34 | session_start();
 35 | ```
 36 | 
 37 | ### Client side
 38 | 
 39 | #### Init
 40 | 
 41 | The project depends on [js-cookie](https://github.com/js-cookie/js-cookie) for cookie management.
 42 | 
 43 | ```html
 44 | <script src="js.cookie.min.js"></script>
 45 | <script src="sessionbox.js"></script>
 46 | ```
 47 | 
 48 | The list of all names of cookies used for the user session must be indicated.
 49 | Cookies existing from the first connection are indicated by the value `true`.
 50 | 
 51 | ```javascript
 52 | var sessionbox = new SessionBox({
 53 | 		'COOKIE1': true,
 54 | 		'COOKIE2': false
 55 | 	});
 56 | ```
 57 | 
 58 | #### Update and iFrame
 59 | 
 60 | A cookie can be saved afterwards (in case of a later connection via iFrame), but must have been declared beforehand (see above):
 61 | 
 62 | ```javascript
 63 | sessionbox.save('COOKIE2');
 64 | ```
 65 | 
 66 | #### Logout
 67 | 
 68 | Logging out, i.e. deleting cookies, can only be done from SessionBox :
 69 | 
 70 | ```javascript
 71 | sessionbox.close();
 72 | ```
 73 | 
 74 | ### Démo
 75 | 
 76 | ```sh
 77 | ./start.sh
 78 | ```
 79 | 
 80 | http://localhost:8000
 81 | 
 82 | ## Contact
 83 | 
 84 | [Emmanuel ROECKER](https://www.rymetemmanuel.fr/emmanuel-roecker.html)
 85 | 
 86 | ## Français
 87 | 
 88 | Les sites internet utilisent généralement les cookies pour enregistrer l'id unique de l'utilisateur qui permet de l'identifier 
 89 | sans devoir lui redemander son login/password à chaque requête.
 90 | 
 91 | Les cookies appartiennent à un nom de domaine.
 92 | 
 93 | Dans un navigateur classique (sans mode privé activé), on ne peut se connecter avec le même navigateur 
 94 | sur plusieurs comptes utilisateurs d'un même site internet.
 95 | 
 96 | Pour permettre de se connecter sur plusieurs comptes utilisateurs, il existe une solution de contournement
 97 | en isolant les cookies par onglet du navigateur.
 98 | 
 99 | Le principe est de sauvegarder les cookies dans le [sessionStorage](https://developer.mozilla.org/fr/docs/Web/API/Window/sessionStorage) 
100 | et de les restorer automatiquement lorsque l'onglet est affiché ou avant de changer de page web.
101 | 
102 | La contrainte est que l'on ne peut se déconnecter d'un compte utilisateur sans utiliser la fonction `SessionBox.close()`.
103 | 
104 | ### Côté serveur
105 | 
106 | Il faut s'assurer qu'un nouvel id utilisateur est créé lors de l'identification de l'utilisateur (même si un cookie existe déjà)
107 | 
108 | Un exemple en PHP : 
109 | 
110 | ```PHP
111 | session_name('COOKIE1');
112 | $newid = session_create_id();
113 | session_id($newid);
114 | session_start();
115 | ```
116 | 
117 | ### Côté client
118 | 
119 | #### Initialisation
120 | 
121 | Le projet dépand de [js-cookie](https://github.com/js-cookie/js-cookie) pour la gestion des cookies.
122 | 
123 | ```html
124 | <script src="js.cookie.min.js"></script>
125 | <script src="sessionbox.js"></script>
126 | ```
127 | 
128 | La liste de tous les noms des cookies utilisés pour la session utilisateur doivent être indiqués.
129 | Les cookies existant dès la première connexion sont indiqués par la valeur `true`.
130 | 
131 | ```javascript
132 | var sessionbox = new SessionBox({
133 | 		'COOKIE1': true,
134 | 		'COOKIE2': false
135 | 	});
136 | ```
137 | 
138 | #### Mise à jour et iFrame
139 | 
140 | Un cookie peut être par la suite sauvegardé (cas d'une connexion ultérieure par iFrame), mais doit avoir été déclaré auparavant (voir ci-dessus) :
141 | 
142 | ```javascript
143 | sessionbox.save('COOKIE2');
144 | ```
145 | 
146 | #### Déconnexion
147 | 
148 | La déconnexion, c'est à dire la suppression des cookies ne peut être effectués qu'à partir de SessionBox :
149 | 
150 | ```javascript
151 | sessionbox.close();
152 | ```
153 | 
154 | ### Démo
155 | 
156 | ```sh
157 | ./start.sh
158 | ```
159 | 
160 | http://localhost:8000
161 | 
162 | ## Contact
163 | 
164 | [Emmanuel ROECKER](https://www.rymetemmanuel.fr/emmanuel-roecker.html)
165 | 
166 | 


--------------------------------------------------------------------------------
/sessionbox.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * SessionBox
  3 |  *
  4 |  * Javascript
  5 |  *
  6 |  * @author    Emmanuel ROECKER
  7 |  * @license   MIT
  8 |  *
  9 |  * Created : 18/01/2021
 10 |  * File : sessionbox.js
 11 |  *
 12 |  */
 13 | 
 14 | var SessionBox = (function () {
 15 | 	function SessionBox(cookies) {
 16 | 		if ((cookies === null) || (typeof cookies !== 'object')) {
 17 | 			console.error("Parameters must be an object (Example : {'cookie1':true,'cookie2':false})");
 18 | 			return;
 19 | 		}
 20 | 
 21 | 		var hidden, visibilityChange;
 22 | 		if (typeof document.hidden !== "undefined") {
 23 | 			hidden = "hidden";
 24 | 			visibilityChange = "visibilitychange";
 25 | 		} else if (typeof document.msHidden !== "undefined") {
 26 | 			hidden = "msHidden";
 27 | 			visibilityChange = "msvisibilitychange";
 28 | 		} else if (typeof document.webkitHidden !== "undefined") {
 29 | 			hidden = "webkitHidden";
 30 | 			visibilityChange = "webkitvisibilitychange";
 31 | 		}
 32 | 
 33 | 		if (typeof document.addEventListener === "undefined" ||
 34 | 			typeof document.hidden === "undefined" ||
 35 | 			typeof sessionStorage === "undefined") {
 36 | 			console.error("Requires a browser that supports Session Storage and Page Visibility API.");
 37 | 			return;
 38 | 		}
 39 | 
 40 | 		if (Cookies === null) {
 41 | 			console.error('Javacript Cookie library dependancy (https://github.com/js-cookie/js-cookie)');
 42 | 			return;
 43 | 		}
 44 | 
 45 | 		this.prefix = "sessionbox-";
 46 | 		this.cookies = cookies;
 47 | 
 48 | 		if (sessionStorage.getItem(this.prefix + 'closed')) { // a tab cannot be reused if logout
 49 | 			this.restore();
 50 | 			document.location.reload();
 51 | 		}
 52 | 
 53 | 		for (var cookiename in cookies) {
 54 | 			if (cookies[cookiename])
 55 | 				this.save(cookiename);
 56 | 		}
 57 | 
 58 | 		var _this = this;
 59 | 		window.onbeforeunload = function () { // for cookies deleted or expired
 60 | 			_this.restore();
 61 | 		};
 62 | 		document.addEventListener("visibilitychange", function () { // for ajax requests
 63 | 			if (!document.hidden) {
 64 | 				_this.restore();
 65 | 			}
 66 | 		}, false);
 67 | 		this.restore(); // deleted unused cookies
 68 | 	}
 69 | 
 70 | 	SessionBox.prototype.save = function (cookiename) {
 71 | 		if (!(cookiename in this.cookies)) {
 72 | 			console.error(cookiename + " not exist");
 73 | 			return;
 74 | 		}
 75 | 		var sessionid = Cookies.get(cookiename);
 76 | 		if (sessionid)
 77 | 			sessionStorage.setItem(this.prefix + cookiename, sessionid);
 78 | 	};
 79 | 
 80 | 	SessionBox.prototype.close = function () {
 81 | 		sessionStorage.setItem(this.prefix + 'closed', 'true');
 82 | 		for (var cookiename in this.cookies) {
 83 | 			sessionStorage.removeItem(this.prefix + cookiename);
 84 | 		};
 85 | 		this.restore();
 86 | 	};
 87 | 
 88 | 	SessionBox.prototype.restore = function () {
 89 | 		for (var cookiename in this.cookies) {
 90 | 			var sessionid = sessionStorage.getItem(this.prefix + cookiename);
 91 | 			if (sessionid) {
 92 | 				Cookies.set(cookiename, sessionid);
 93 | 			} else {
 94 | 				Cookies.remove(cookiename);
 95 | 			}
 96 | 		};
 97 | 	};
 98 | 
 99 | 	return SessionBox;
100 | })();


--------------------------------------------------------------------------------
/start.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 | php -S localhost:8000
3 | 


--------------------------------------------------------------------------------
/user.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | session_name('COOKIE1');
 3 | session_start();
 4 | if ((!isset($_SESSION['login'])) || (!$_SESSION['login'])) {
 5 | 	header("HTTP/1.0 403 Forbidden");
 6 | 	exit;
 7 | }
 8 | ?>
 9 | 
10 | <!DOCTYPE html>
11 | <html lang="fr">
12 | 
13 | <head>
14 | 	<script src="js.cookie.min.js"></script>
15 | 	<script src="sessionbox.js"></script>
16 | </head>
17 | 
18 | <body>
19 | 	<script>
20 | 		var sessionbox = new SessionBox({
21 | 			'COOKIE1': true,
22 | 			'COOKIE2': false
23 | 		});
24 | 	</script>
25 | 
26 | 	<?php
27 | 	echo "PHP Session id : " . session_id();
28 | 	?>
29 | 	<div id="cookie2">
30 | 	</div>
31 | 	<script>
32 | 		document.getElementById('cookie2').innerHTML = Cookies.get('COOKIE2');
33 | 	</script>
34 | 
35 | 	<button id="cookie2Create">Create Cookie2</button>
36 | 	<script>
37 | 		document.getElementById("cookie2Create").onclick = function() {
38 | 			Cookies.set('COOKIE2', '_' + Math.random().toString(36).substr(2, 9));
39 | 			sessionbox.save('COOKIE2');
40 | 			document.getElementById('cookie2').innerHTML = Cookies.get('COOKIE2');
41 | 		};
42 | 	</script>
43 | 
44 | 	<button id="logout">Logout</button>
45 | 	<script>
46 | 		document.getElementById("logout").onclick = function() {
47 | 			sessionbox.close();
48 | 		};
49 | 	</script>
50 | </body>
51 | 
52 | </html>


--------------------------------------------------------------------------------