popup checks for parent existence and origin

fix #35

src/core/utils.js

@@ -586,3 +586,22 @@ export function getDateKeyOfTs(ts) {
   const year = date.getUTCFullYear();
   return `${year}${month}${day}`;
 }
+
+/*
+ * check if parent window exists and
+ * is accessible
+ */
+export function parentExists() {
+  try {
+    if (!window.opener
+      || window.opener.closed
+      || !window.opener.location
+      || window.opener.location.origin !== window.location.origin
+    ) {
+      return false;
+    }
+    return true;
+  } catch {
+    return false;
+  }
+}

src/popup.js

@@ -4,6 +4,7 @@
 
 import { persistStore } from 'redux-persist';
 
+import { parentExists } from './core/utils';
 import store from './store/storePopUp';
 import {
   urlChange,
@@ -66,7 +67,7 @@ persistStore(store, {}, () => {
     store.dispatch(addChatChannel(channel));
   });
 
-  if (!window.opener || window.opener.closed) {
+  if (!parentExists()) {
     store.dispatch(fetchMe());
     SocketClient.connect();
   }

src/store/middleware/parent.js

@@ -4,12 +4,13 @@
 
 /* eslint-disable no-console */
 
+import { parentExists } from '../../core/utils';
 import { load, unload } from '../actions';
 
 const { origin } = window.location;
 
 window.addEventListener('beforeunload', () => {
-  if (window.opener && !window.opener.closed) {
+  if (parentExists()) {
     window.opener.postMessage(unload(), origin);
   }
 });
@@ -24,43 +25,39 @@ export default (store) => (next) => (action) => {
     }
     if (action.data.type === 't/UNLOAD') {
       setTimeout(() => {
-        if (!window.opener || window.opener.closed) {
-          console.log('Parent window closed');
-          store.dispatch({ type: 't/PARENT_CLOSED' });
-        } else {
+        if (parentExists()) {
           console.log('Parent window refreshed');
-          /*
-           * hook to event and also send message to catch more
-           * possibilities
-           */
-          try {
+          const parentReady = window.opener.document.readyState;
+          if (parentReady !== 'complete'
+            && parentReady !== 'loaded'
+            && parentReady !== 'interactive'
+          ) {
+            // DOMContent no loaded yet
             const sendLoad = () => {
               window.opener.postMessage({ type: 't/LOAD' }, origin);
               window.opener.removeEventListener('DOMContentLoaded', sendLoad);
             };
             window.opener.addEventListener('DOMContentLoaded', sendLoad, false);
-          } catch {
-            console.log('Could not hook to parent window');
           }
           window.opener.postMessage({ type: 't/LOAD' }, origin);
+        } else {
+          console.log('Parent window closed');
+          store.dispatch({ type: 't/PARENT_CLOSED' });
         }
       }, 3000);
     }
     return next(action.data);
   }
 
-  if (window.opener
-    && !window.opener.closed
-    && action.type
-  ) {
-    if (action.type === 'HYDRATED') {
-      window.opener.postMessage(load(), origin);
-    } else if (action.type.startsWith('s/')) {
-      try {
+  if (window.opener && action.type) {
+    try {
+      if (action.type === 'HYDRATED') {
+        window.opener.postMessage(load(), origin);
+      } else if (action.type.startsWith('s/')) {
         window.opener.postMessage(action, origin);
-      } catch {
-        // nothing
       }
+    } catch {
+      // nothing
     }
   }