From 6f49f426b518bdbca11c7994246eb088903e6619 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Wed, 8 Jul 2020 19:58:06 -0400 Subject: Generalized frame connections (#654) * Create FrameClient and FrameEndpoint * Use new Frame* classes for Popup=>frame connection * Update api.sendMessageToFrame and api.broadcastTab to include the sender's frameId * Update FrameClient to store the frame's frameId --- ext/fg/float.html | 1 + ext/fg/js/float.js | 43 ++++------------- ext/fg/js/popup.js | 135 +++++------------------------------------------------ 3 files changed, 21 insertions(+), 158 deletions(-) (limited to 'ext/fg') 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 @@ + 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() { -- cgit v1.2.3