Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Cross origin local storage sharing example (using an iframe and postMessage)
const CrossOriginLocalStorage = function(currentWindow, iframe, allowedOrigins, onMessage) {
this.allowedOrigins = allowedOrigins;
let childWindow;
// some browser (don't remember which one) throw exception when you try to access
// contentWindow for the first time, it works when you do that second time
try {
childWindow = iframe.contentWindow;
} catch(e) {
childWindow = iframe.contentWindow;
}
currentWindow.onmessage = (event) => {
if (!this.isAllowedOrigin(event.origin)) {
return;
}
return onMessage(JSON.parse(event.data), event);
};
this.isAllowedOrigin = (origin) => {
return this.allowedOrigins.includes(origin);
}
this.getData = (key) => {
const messageData = {
key: key,
method: 'get',
}
this.postMessage(messageData);
}
this.setData = (key, data) => {
const messageData = {
key: key,
method: 'set',
data: data,
}
this.postMessage(messageData);
}
this.postMessage = (messageData) => {
childWindow.postMessage(JSON.stringify(messageData), '*');
}
};
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Index</title>
<script src="/cross-origin-local-storage.js" charset="utf-8"></script>
</head>
<body>
<iframe src="http://localhost:4200/session-iframe.html" width="300px" height="300px"></iframe>
<script>
const allowedOrigins = [
'https://example.com',
'https://app.example.com',
'http://localhost:8000',
'http://localhost:4200'
];
window.onload = () => {
const onMessage = (payload, event) => {
const data = payload.data;
switch (payload.method) {
case 'storage#get':
console.log('message data', payload);
break;
default:
console.error('Unknown method "' + payload.method + '"', payload);
}
};
const iframe = document.getElementsByTagName('iframe')[0];
const cross = new CrossOriginLocalStorage(window, iframe, allowedOrigins, onMessage);
cross.setData('name', 'buren')
cross.getData('name')
};
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#222531">
</head>
<body>
<h1>Session Iframe</h1>
<script type="text/javascript">
const allowedOrigins = [
'https://example.com',
'https://app.example.com',
'http://localhost:8000',
'http://localhost:4200'
];
window.onmessage = (e) => {
if (!allowedOrigins.includes(e.origin)) {
return;
}
const payload = JSON.parse(e.data);
switch(payload.method) {
case 'set':
localStorage.setItem(payload.key, JSON.stringify(payload.data));
break;
case 'get':
const parent = window.parent;
const data = localStorage.getItem(payload.key);
const returnPayload = {
method: 'storage#get',
data: data
}
parent.postMessage(JSON.stringify(returnPayload), '*');
break;
case 'remove':
localStorage.removeItem(payload.key);
break;
}
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.