Access the top window in a safe manner (#550)

Fixes Uncaught DOMException: Failed to read a named property
'addEventListener' from 'Window': Blocked a frame with origin
"xxx" from accessing a cross-origin frame.

packages/miew/demo/scripts/ui/Menu.js

@@ -2039,7 +2039,7 @@ Menu.prototype._onTerminalOff = function () {
 };
 
 Menu.prototype._fixKeyboard = function () {
-  // do IFRAME related hack
+  // do IFRAME related hack // NOTE: embedding the demo is not recommended/supported anymore
   if (window !== window.top) {
     const parentDocument = window.top.document;
     let button = parentDocument.querySelector('button');

packages/miew/src/Miew.js

@@ -43,6 +43,7 @@ import capabilities from './gfx/capabilities';
 import WebVRPoC from './gfx/vr/WebVRPoC';
 import vertexScreenQuadShader from './gfx/shaders/ScreenQuad.vert';
 import fragmentScreenQuadFromDistTex from './gfx/shaders/ScreenQuadFromDistortionTex.frag';
+import getTopWindow from './utils/getTopWindow';
 
 const {
   selectors,
@@ -298,11 +299,12 @@ Miew.prototype.init = function () {
       zIndex: 700,
     });
 
-    window.top.addEventListener('keydown', (event) => {
+    const target = getTopWindow();
+    target.addEventListener('keydown', (event) => {
       self._onKeyDown(event);
     });
 
-    window.top.addEventListener('keyup', (event) => {
+    target.addEventListener('keyup', (event) => {
       self._onKeyUp(event);
     });
 

packages/miew/src/ui/ObjectControls.js

@@ -2,6 +2,7 @@ import * as THREE from 'three';
 import Timer from '../Timer';
 import settings from '../settings';
 import EventDispatcher from '../utils/EventDispatcher';
+import getTopWindow from '../utils/getTopWindow';
 
 const VK_LEFT = 37;
 const VK_UP = 38;
@@ -806,7 +807,7 @@ ObjectControls.prototype.keydownup = function (event) {
 };
 
 ObjectControls.prototype.getKeyBindObject = function () {
-  return window.top;
+  return getTopWindow();
 };
 
 ObjectControls.prototype.dispose = function () {

packages/miew/src/utils/getTopWindow.js

@@ -0,0 +1,11 @@
+export default function getTopWindow() {
+  // intercept the exception if we have cross-origin iframe
+  try {
+    if (window.top.location.href !== undefined) {
+      return window.top;
+    }
+  } catch (e) {
+    // provide fallback
+  }
+  return window;
+}

packages/miew/src/utils/getTopWindow.test.js

@@ -0,0 +1,31 @@
+import { expect } from 'chai';
+import getTopWindow from './getTopWindow';
+
+describe('utils/getTopWindow()', () => {
+  it('returns top window if no iframe', () => {
+    const window = { location: { href: 'http://example.com' } };
+    window.top = window;
+
+    global.window = window;
+    expect(getTopWindow()).to.equal(window.top);
+    delete global.window;
+  });
+
+  it('returns top window if no cross-origin iframe', () => {
+    const window = { location: { href: 'http://example.com/viewer.html' } };
+    window.top = { location: { href: 'http://example.com/index.html' } };
+
+    global.window = window;
+    expect(getTopWindow()).to.equal(window.top);
+    delete global.window;
+  });
+
+  it('returns window if called inside cross-origin iframe', () => {
+    const window = { location: { href: 'http://example.com:8000' } };
+    window.top = { locationRestricted: { href: 'http://example.com:8001' } };
+
+    global.window = window;
+    expect(getTopWindow()).to.equal(window);
+    delete global.window;
+  });
+});