Instantly share code, notes, and snippets.
Created
October 26, 2020 15:58
-
Star
0
(0)
You must be signed in to star a gist -
Fork
0
(0)
You must be signed in to fork a gist
-
Save gengue/e8bab4dcc5e0d7d047b364fef3a8d69f to your computer and use it in GitHub Desktop.
Set cross domain cookies with Single Page Applications
This file contains hidden or 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> | |
<base href="/webapp/" /> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width"> | |
<title>Cookies manager</title> | |
</head> | |
<body> | |
<h1> | |
Please wait... | |
</h1> | |
<script charset="utf-8"> | |
// this script should be placed in the master page. | |
// the purpuse of this demo is identify the company staff into the | |
// public websites using cookies with zero server code. | |
// so after login in the administration website the user will be | |
// redirected to here: `window.location.href = '/cookie-manager.html'` | |
// child pages to redirect. { domain : cookie url } | |
const WEBSITES_MAP = { | |
'mybrandpage.de': 'https://mybrandpage.de/set-cookie.html', | |
'myotherbrandpage.com': 'https://mybrandpage.com/set-cookie.html', | |
}; | |
const WEBSITES_LIST = ['mybrandpage.de', 'myotherbrandpage.com']; | |
const LS_PENDING_KEY = 'set_cookies_pending'; | |
const LS_STATUS_KEY = 'v_xcookies_status'; | |
// status | |
const PENDING = 'pending'; | |
const IN_PROGRESS = 'in_progress'; | |
const DONE = 'done'; | |
(function init() { | |
const params = new URLSearchParams(document.location.search); | |
// execute redirection workflow only for logged users | |
const token = localStorage.getItem('token'); | |
if(!token) { | |
console.error('User not authtorizathed'); | |
return false; | |
} | |
// initialize status if it's the first request | |
// undefined => PENDING | |
let cookieStatus = localStorage.getItem(LS_STATUS_KEY); | |
if(!cookieStatus) { | |
cookieStatus = PENDING; | |
localStorage.setItem(LS_STATUS_KEY, cookieStatus); | |
} | |
// if all workflow are done then redirect to the index page | |
// DONE => welcome | |
if(cookieStatus === DONE) { | |
window.location = '/webapp/'; | |
} | |
// redirection workflow will start, create a queue with all target pages to set the cookie | |
// PENDING => IN PROGRESS | |
if(cookieStatus === PENDING) { | |
localStorage.setItem(LS_PENDING_KEY, JSON.stringify(WEBSITES_LIST)) | |
cookieStatus = IN_PROGRESS; | |
localStorage.setItem(LS_STATUS_KEY, cookieStatus); | |
} | |
// check the callback URL param to remove the domain from the pending list. | |
let pendingWebsites = JSON.parse(localStorage.getItem(LS_PENDING_KEY) || '[]'); | |
const from = params.get('from'); | |
if( cookieStatus === IN_PROGRESS && from) { | |
pendingWebsites = pendingWebsites.filter(i => i !== from); | |
localStorage.setItem(LS_PENDING_KEY, JSON.stringify(pendingWebsites)) | |
} | |
// perform the redirect to the next target page with some url params to indicate where to redirect afterwards | |
if(pendingWebsites.length > 0 && cookieStatus !== DONE) { | |
const next = pendingWebsites[pendingWebsites.length - 1]; | |
const redirectTo = `${WEBSITES_MAP[next]}?redirect_to=${location.protocol}//${location.host}${location.pathname}&d=${next}`; | |
console.info('redirect to', redirectTo); | |
setTimeout(() => { | |
window.location = redirectTo; | |
}, 200); | |
} else { | |
// process is DONE, go to index page | |
localStorage.setItem(LS_STATUS_KEY, DONE); | |
console.info('go to dashboard!') | |
window.location = '/webapp/'; | |
} | |
})(); | |
</script> | |
</body> | |
</html> |
This file contains hidden or 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> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width" /> | |
<meta name="robots" content="noindex, nofollow"> | |
<title>Set cookie</title> | |
</head> | |
<body> | |
<h1>Please wait...</h1> | |
<script charset="utf-8"> | |
// this file should be placed on the child websites when you want to set the cookie | |
// the callback url is required to register this and go on with the next website | |
(function init() { | |
console.log('setting cookie...') | |
document.cookie = 'is_staff=true'; | |
const params = new URLSearchParams(document.location.search) | |
const redirectTo = params.get('redirect_to'); | |
if(!redirectTo) { | |
console.error('redirect url is missing') | |
return false; | |
} | |
const self = params.get('d') || location.hostname; | |
const url = redirectTo+'?from='+self; | |
console.log('redirect back to', url) | |
setTimeout(() => { | |
window.location = url; | |
}, 200); | |
})(); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment