Created
January 17, 2018 04:35
-
-
Save aalfiann/3a17ebc6609870599d639888c40f9b74 to your computer and use it in GitHub Desktop.
Sharing sessionStorage between tabs for secure multi-tab authentication
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Sharing sessionStorage between tabs for secure multi-tab authentication</title> | |
| </head> | |
| <body> | |
| <h3><a href=''>sessionStorage</a></h3> | |
| <h3 id="stData"></h3> | |
| <button id="btnSet">Set session storage</button> | |
| | |
| <button id="btnClear">Clear session storage</button> | |
| <script type="text/javascript"> | |
| // Removed IE support in this demo for the sake of simplicity | |
| (function() { | |
| if (!sessionStorage.length) { | |
| // Ask other tabs for session storage | |
| localStorage.setItem('getSessionStorage', Date.now()); | |
| }; | |
| window.addEventListener('storage', function(event) { | |
| //console.log('storage event', event); | |
| if (event.key == 'getSessionStorage') { | |
| // Some tab asked for the sessionStorage -> send it | |
| localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage)); | |
| localStorage.removeItem('sessionStorage'); | |
| } else if (event.key == 'sessionStorage' && !sessionStorage.length) { | |
| // sessionStorage is empty -> fill it | |
| var data = JSON.parse(event.newValue), | |
| value; | |
| for (key in data) { | |
| sessionStorage.setItem(key, data[key]); | |
| } | |
| showSessionStorage(); | |
| } | |
| }); | |
| window.onbeforeunload = function() { | |
| //sessionStorage.clear(); | |
| }; | |
| /* This code is only for the UI in the demo, it's not part of the solution */ | |
| var el; | |
| function showSessionStorage() { | |
| el.innerHTML = sessionStorage.length ? JSON.stringify(sessionStorage) : 'sessionStorage is empty'; | |
| } | |
| window.addEventListener('load', function() { | |
| el = document.getElementById('stData'); | |
| showSessionStorage(); | |
| document.getElementById('btnSet').addEventListener('click', function() { | |
| sessionStorage.setItem('token', '123456789'); | |
| showSessionStorage(); | |
| }) | |
| document.getElementById('btnClear').addEventListener('click', function() { | |
| sessionStorage.clear(); | |
| showSessionStorage(); | |
| }) | |
| }) | |
| })(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment