diff options
| -rw-r--r-- | ext/bg/js/backend.js | 8 | ||||
| -rw-r--r-- | ext/bg/js/search.js | 1 | ||||
| -rw-r--r-- | ext/bg/settings-popup-preview.html | 1 | ||||
| -rw-r--r-- | ext/fg/float.html | 1 | ||||
| -rw-r--r-- | ext/fg/js/float.js | 43 | ||||
| -rw-r--r-- | ext/fg/js/popup.js | 135 | ||||
| -rw-r--r-- | ext/manifest.json | 1 | ||||
| -rw-r--r-- | ext/mixed/js/frame-client.js | 173 | ||||
| -rw-r--r-- | ext/mixed/js/frame-endpoint.js | 65 |
9 files changed, 267 insertions, 161 deletions
diff --git a/ext/bg/js/backend.js b/ext/bg/js/backend.js index 4791bfb5..6e594f9b 100644 --- a/ext/bg/js/backend.js +++ b/ext/bg/js/backend.js @@ -538,14 +538,15 @@ class Backend { }); } - _onApiSendMessageToFrame({frameId, action, params}, sender) { + _onApiSendMessageToFrame({frameId: targetFrameId, action, params}, sender) { if (!(sender && sender.tab)) { return false; } const tabId = sender.tab.id; + const frameId = sender.frameId; const callback = () => this._checkLastError(chrome.runtime.lastError); - chrome.tabs.sendMessage(tabId, {action, params}, {frameId}, callback); + chrome.tabs.sendMessage(tabId, {action, params, frameId}, {frameId: targetFrameId}, callback); return true; } @@ -555,8 +556,9 @@ class Backend { } const tabId = sender.tab.id; + const frameId = sender.frameId; const callback = () => this._checkLastError(chrome.runtime.lastError); - chrome.tabs.sendMessage(tabId, {action, params}, callback); + chrome.tabs.sendMessage(tabId, {action, params, frameId}, callback); return true; } diff --git a/ext/bg/js/search.js b/ext/bg/js/search.js index 239027f7..9bbc66f2 100644 --- a/ext/bg/js/search.js +++ b/ext/bg/js/search.js @@ -424,6 +424,7 @@ class DisplaySearch extends Display { async _setupNestedPopups() { await dynamicLoader.loadScripts([ '/mixed/js/text-scanner.js', + '/mixed/js/frame-client.js', '/fg/js/frame-offset-forwarder.js', '/fg/js/popup.js', '/fg/js/popup-factory.js', diff --git a/ext/bg/settings-popup-preview.html b/ext/bg/settings-popup-preview.html index c0c8e3b9..5b3a9692 100644 --- a/ext/bg/settings-popup-preview.html +++ b/ext/bg/settings-popup-preview.html @@ -124,6 +124,7 @@ <script src="/mixed/js/dom.js"></script> <script src="/mixed/js/api.js"></script> <script src="/mixed/js/dynamic-loader.js"></script> + <script src="/mixed/js/frame-client.js"></script> <script src="/mixed/js/text-scanner.js"></script> <script src="/fg/js/document.js"></script> diff --git a/ext/fg/float.html b/ext/fg/float.html index a13244ee..9e0e9ff4 100644 --- a/ext/fg/float.html +++ b/ext/fg/float.html @@ -54,6 +54,7 @@ <script src="/mixed/js/display.js"></script> <script src="/mixed/js/display-generator.js"></script> <script src="/mixed/js/dynamic-loader.js"></script> + <script src="/mixed/js/frame-endpoint.js"></script> <script src="/mixed/js/media-loader.js"></script> <script src="/mixed/js/scroll.js"></script> <script src="/mixed/js/template-handler.js"></script> diff --git a/ext/fg/js/float.js b/ext/fg/js/float.js index 2837f748..17af03d3 100644 --- a/ext/fg/js/float.js +++ b/ext/fg/js/float.js @@ -17,6 +17,7 @@ /* global * Display + * FrameEndpoint * Frontend * PopupFactory * api @@ -27,12 +28,10 @@ class DisplayFloat extends Display { constructor() { super(document.querySelector('#spinner'), document.querySelector('#definitions')); this._autoPlayAudioTimer = null; - this._secret = yomichan.generateId(16); - this._token = null; this._nestedPopupsPrepared = false; this._ownerFrameId = null; + this._frameEndpoint = new FrameEndpoint(); this._windowMessageHandlers = new Map([ - ['initialize', {handler: this._onMessageInitialize.bind(this), authenticate: false}], ['configure', {handler: this._onMessageConfigure.bind(this)}], ['setOptionsContext', {handler: this._onMessageSetOptionsContext.bind(this)}], ['setContent', {handler: this._onMessageSetContent.bind(this)}], @@ -57,7 +56,7 @@ class DisplayFloat extends Display { window.addEventListener('message', this._onMessage.bind(this), false); - api.broadcastTab('popupPrepared', {secret: this._secret}); + this._frameEndpoint.signal(); } onEscape() { @@ -104,7 +103,10 @@ class DisplayFloat extends Display { // Message handling _onMessage(e) { - const data = e.data; + let data = e.data; + if (!this._frameEndpoint.authenticate(data)) { return; } + data = data.data; + if (typeof data !== 'object' || data === null) { this._logMessageError(e, 'Invalid data'); return; @@ -122,19 +124,10 @@ class DisplayFloat extends Display { return; } - if (handlerInfo.authenticate !== false && !this._isMessageAuthenticated(data)) { - this._logMessageError(e, 'Invalid authentication'); - return; - } - const handler = handlerInfo.handler; handler(data.params); } - _onMessageInitialize(params) { - this._initialize(params); - } - async _onMessageConfigure({messageId, frameId, ownerFrameId, popupId, optionsContext, childrenSupported, scale}) { this._ownerFrameId = ownerFrameId; this.setOptionsContext(optionsContext); @@ -195,27 +188,6 @@ class DisplayFloat extends Display { yomichan.logWarning(new Error(`Popup received invalid message from origin ${JSON.stringify(event.origin)}: ${type}`)); } - _initialize(params) { - if (this._token !== null) { return; } // Already initialized - if (!isObject(params)) { return; } // Invalid data - - const secret = params.secret; - if (secret !== this._secret) { return; } // Invalid authentication - - const {token, frameId} = params; - this._token = token; - - api.sendMessageToFrame(frameId, 'popupInitialized', {secret, token}); - } - - _isMessageAuthenticated(message) { - return ( - this._token !== null && - this._token === message.token && - this._secret === message.secret - ); - } - async _prepareNestedPopups(id, depth, parentFrameId, url) { let complete = false; @@ -243,6 +215,7 @@ class DisplayFloat extends Display { async _setupNestedPopups(id, depth, parentFrameId, url) { await dynamicLoader.loadScripts([ '/mixed/js/text-scanner.js', + '/mixed/js/frame-client.js', '/fg/js/popup.js', '/fg/js/popup-proxy.js', '/fg/js/popup-factory.js', diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js index a856d773..78561de3 100644 --- a/ext/fg/js/popup.js +++ b/ext/fg/js/popup.js @@ -17,6 +17,7 @@ /* global * DOM + * FrameClient * api * dynamicLoader */ @@ -41,8 +42,7 @@ class Popup { this._previousOptionsContextSource = null; this._frameSizeContentScale = null; - this._frameSecret = null; - this._frameToken = null; + this._frameClient = null; this._frame = document.createElement('iframe'); this._frame.className = 'yomichan-float'; this._frame.style.width = '0'; @@ -230,117 +230,6 @@ class Popup { return injectPromise; } - _initializeFrame(frame, targetOrigin, frameId, setupFrame, timeout=10000) { - return new Promise((resolve, reject) => { - const tokenMap = new Map(); - let timer = null; - let { - promise: frameLoadedPromise, - resolve: frameLoadedResolve, - reject: frameLoadedReject - } = deferPromise(); - - const postMessage = (action, params) => { - const contentWindow = frame.contentWindow; - if (contentWindow === null) { throw new Error('Frame missing content window'); } - - let validOrigin = true; - try { - validOrigin = (contentWindow.location.origin === targetOrigin); - } catch (e) { - // NOP - } - if (!validOrigin) { throw new Error('Unexpected frame origin'); } - - contentWindow.postMessage({action, params}, targetOrigin); - }; - - const onMessage = (message) => { - onMessageInner(message); - return false; - }; - - const onMessageInner = async (message) => { - try { - if (!isObject(message)) { return; } - const {action, params} = message; - if (!isObject(params)) { return; } - await frameLoadedPromise; - if (timer === null) { return; } // Done - - switch (action) { - case 'popupPrepared': - { - const {secret} = params; - const token = yomichan.generateId(16); - tokenMap.set(secret, token); - postMessage('initialize', {secret, token, frameId}); - } - break; - case 'popupInitialized': - { - const {secret, token} = params; - const token2 = tokenMap.get(secret); - if (typeof token2 !== 'undefined' && token === token2) { - cleanup(); - resolve({secret, token}); - } - } - break; - } - } catch (e) { - cleanup(); - reject(e); - } - }; - - const onLoad = () => { - if (frameLoadedResolve === null) { - cleanup(); - reject(new Error('Unexpected load event')); - return; - } - - if (Popup.isFrameAboutBlank(frame)) { - return; - } - - frameLoadedResolve(); - frameLoadedResolve = null; - frameLoadedReject = null; - }; - - const cleanup = () => { - if (timer === null) { return; } // Done - clearTimeout(timer); - timer = null; - - frameLoadedResolve = null; - if (frameLoadedReject !== null) { - frameLoadedReject(new Error('Terminated')); - frameLoadedReject = null; - } - - chrome.runtime.onMessage.removeListener(onMessage); - frame.removeEventListener('load', onLoad); - }; - - // Start - timer = setTimeout(() => { - cleanup(); - reject(new Error('Timeout')); - }, timeout); - - chrome.runtime.onMessage.addListener(onMessage); - frame.addEventListener('load', onLoad); - - // Prevent unhandled rejections - frameLoadedPromise.catch(() => {}); // NOP - - setupFrame(frame); - }); - } - async _createInjectPromise() { if (this._options === null) { throw new Error('Options not initialized'); @@ -350,7 +239,7 @@ class Popup { await this._setUpContainer(usePopupShadowDom); - const {secret, token} = await this._initializeFrame(this._frame, this._targetOrigin, this._frameId, (frame) => { + const setupFrame = (frame) => { frame.removeAttribute('src'); frame.removeAttribute('srcdoc'); this._observeFullscreen(true); @@ -361,9 +250,11 @@ class Popup { } else { frame.setAttribute('src', url); } - }); - this._frameSecret = secret; - this._frameToken = token; + }; + + const frameClient = new FrameClient(); + this._frameClient = frameClient; + await frameClient.connect(this._frame, this._targetOrigin, this._frameId, setupFrame); // Configure const messageId = yomichan.generateId(16); @@ -406,8 +297,7 @@ class Popup { this._frame.removeAttribute('src'); this._frame.removeAttribute('srcdoc'); - this._frameSecret = null; - this._frameToken = null; + this._frameClient = null; this._injectPromise = null; this._injectPromiseComplete = false; } @@ -567,12 +457,11 @@ class Popup { } _invokeApi(action, params={}) { - const secret = this._frameSecret; - const token = this._frameToken; const contentWindow = this._frame.contentWindow; - if (secret === null || token === null || contentWindow === null) { return; } + if (this._frameClient === null || !this._frameClient.isConnected() || contentWindow === null) { return; } - contentWindow.postMessage({action, params, secret, token}, this._targetOrigin); + const message = this._frameClient.createMessage({action, params}); + contentWindow.postMessage(message, this._targetOrigin); } _getFrameParentElement() { diff --git a/ext/manifest.json b/ext/manifest.json index 38069aea..619c18c1 100644 --- a/ext/manifest.json +++ b/ext/manifest.json @@ -41,6 +41,7 @@ "mixed/js/dom.js", "mixed/js/api.js", "mixed/js/dynamic-loader.js", + "mixed/js/frame-client.js", "mixed/js/text-scanner.js", "fg/js/document.js", "fg/js/dom-text-scanner.js", diff --git a/ext/mixed/js/frame-client.js b/ext/mixed/js/frame-client.js new file mode 100644 index 00000000..6ea344e2 --- /dev/null +++ b/ext/mixed/js/frame-client.js @@ -0,0 +1,173 @@ +/* + * Copyright (C) 2020 Yomichan Authors + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see <https://www.gnu.org/licenses/>. + */ + +class FrameClient { + constructor() { + this._secret = null; + this._token = null; + this._frameId = null; + } + + get frameId() { + return this._frameId; + } + + async connect(frame, targetOrigin, hostFrameId, setupFrame, timeout=10000) { + const {secret, token, frameId} = await this._connectIternal(frame, targetOrigin, hostFrameId, setupFrame, timeout); + this._secret = secret; + this._token = token; + this._frameId = frameId; + } + + isConnected() { + return (this._secret !== null); + } + + createMessage(data) { + if (!this.isConnected()) { + throw new Error('Not connected'); + } + return { + token: this._token, + secret: this._secret, + data + }; + } + + _connectIternal(frame, targetOrigin, hostFrameId, setupFrame, timeout) { + return new Promise((resolve, reject) => { + const tokenMap = new Map(); + let timer = null; + let { + promise: frameLoadedPromise, + resolve: frameLoadedResolve, + reject: frameLoadedReject + } = deferPromise(); + + const postMessage = (action, params) => { + const contentWindow = frame.contentWindow; + if (contentWindow === null) { throw new Error('Frame missing content window'); } + + let validOrigin = true; + try { + validOrigin = (contentWindow.location.origin === targetOrigin); + } catch (e) { + // NOP + } + if (!validOrigin) { throw new Error('Unexpected frame origin'); } + + contentWindow.postMessage({action, params}, targetOrigin); + }; + + const onMessage = (message) => { + onMessageInner(message); + return false; + }; + + const onMessageInner = async (message) => { + try { + if (!isObject(message)) { return; } + const {action, params} = message; + if (!isObject(params)) { return; } + await frameLoadedPromise; + if (timer === null) { return; } // Done + + switch (action) { + case 'frameEndpointReady': + { + const {secret} = params; + const token = yomichan.generateId(16); + tokenMap.set(secret, token); + postMessage('frameEndpointConnect', {secret, token, hostFrameId}); + } + break; + case 'frameEndpointConnected': + { + const {secret, token} = params; + const frameId = message.frameId; + const token2 = tokenMap.get(secret); + if (typeof token2 !== 'undefined' && token === token2) { + cleanup(); + resolve({secret, token, frameId}); + } + } + break; + } + } catch (e) { + cleanup(); + reject(e); + } + }; + + const onLoad = () => { + if (frameLoadedResolve === null) { + cleanup(); + reject(new Error('Unexpected load event')); + return; + } + + if (FrameClient.isFrameAboutBlank(frame)) { + return; + } + + frameLoadedResolve(); + frameLoadedResolve = null; + frameLoadedReject = null; + }; + + const cleanup = () => { + if (timer === null) { return; } // Done + clearTimeout(timer); + timer = null; + + frameLoadedResolve = null; + if (frameLoadedReject !== null) { + frameLoadedReject(new Error('Terminated')); + frameLoadedReject = null; + } + + chrome.runtime.onMessage.removeListener(onMessage); + frame.removeEventListener('load', onLoad); + }; + + // Start + timer = setTimeout(() => { + cleanup(); + reject(new Error('Timeout')); + }, timeout); + + chrome.runtime.onMessage.addListener(onMessage); + frame.addEventListener('load', onLoad); + + // Prevent unhandled rejections + frameLoadedPromise.catch(() => {}); // NOP + + setupFrame(frame); + }); + } + + static isFrameAboutBlank(frame) { + try { + const contentDocument = frame.contentDocument; + if (contentDocument === null) { return false; } + const url = contentDocument.location.href; + return /^about:blank(?:[#?]|$)/.test(url); + } catch (e) { + return false; + } + } +} diff --git a/ext/mixed/js/frame-endpoint.js b/ext/mixed/js/frame-endpoint.js new file mode 100644 index 00000000..1cd25bb5 --- /dev/null +++ b/ext/mixed/js/frame-endpoint.js @@ -0,0 +1,65 @@ +/* + * Copyright (C) 2020 Yomichan Authors + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see <https://www.gnu.org/licenses/>. + */ + +/* global + * api + */ + +class FrameEndpoint { + constructor() { + this._secret = yomichan.generateId(16); + this._token = null; + this._eventListeners = new EventListenerCollection(); + this._eventListenersSetup = false; + } + + signal() { + if (!this._eventListenersSetup) { + this._eventListeners.addEventListener(window, 'message', this._onMessage.bind(this), false); + this._eventListenersSetup = true; + } + api.broadcastTab('frameEndpointReady', {secret: this._secret}); + } + + authenticate(message) { + return ( + this._token !== null && + isObject(message) && + this._token === message.token && + this._secret === message.secret + ); + } + + _onMessage(e) { + if (this._token !== null) { return; } // Already initialized + + const data = e.data; + if (!isObject(data) || data.action !== 'frameEndpointConnect') { return; } // Invalid message + + const params = data.params; + if (!isObject(params)) { return; } // Invalid data + + const secret = params.secret; + if (secret !== this._secret) { return; } // Invalid authentication + + const {token, hostFrameId} = params; + this._token = token; + + this._eventListeners.removeAllEventListeners(); + api.sendMessageToFrame(hostFrameId, 'frameEndpointConnected', {secret, token}); + } +} |