mostafa6765/cross-origin-local-storage.js

## cross-origin-local-storage.js
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), '*');
  }
};

## current-origin-index.html
<!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>

## session-iframe.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>
	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>