Popup init update (#497)

* Add API function to send a message to a specific frameId in a tab

* Update _windowMessageHandlers to support additional info per handler

* Remove message token

* Add new authorization check

* Set up new initialization handler

* Update initialization

* Remove message token

* Replace 'prepare' with 'configure'

* Create new prepare function

* Change configure guard

* Log errors in onMessage

* Improve popup initialize function

* Clear secret/token in _resetFrame

* Remove backend message token

* Clear src and srcdoc attributes before loading

* Don't treat about:blank unloads as load events
This commit is contained in:
toasted-nutbread 2020-05-06 19:27:21 -04:00 committed by GitHub
parent ac2f743b76
commit 501281e887
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 252 additions and 109 deletions

View File

@ -73,8 +73,6 @@ class Backend {
const apiForwarder = new BackendApiForwarder(); const apiForwarder = new BackendApiForwarder();
apiForwarder.prepare(); apiForwarder.prepare();
this.messageToken = yomichan.generateId(16);
this._defaultBrowserActionTitle = null; this._defaultBrowserActionTitle = null;
this._isPrepared = false; this._isPrepared = false;
this._prepareError = false; this._prepareError = false;
@ -98,6 +96,7 @@ class Backend {
['commandExec', {handler: this._onApiCommandExec.bind(this), async: false}], ['commandExec', {handler: this._onApiCommandExec.bind(this), async: false}],
['audioGetUri', {handler: this._onApiAudioGetUri.bind(this), async: true}], ['audioGetUri', {handler: this._onApiAudioGetUri.bind(this), async: true}],
['screenshotGet', {handler: this._onApiScreenshotGet.bind(this), async: true}], ['screenshotGet', {handler: this._onApiScreenshotGet.bind(this), async: true}],
['sendMessageToFrame', {handler: this._onApiSendMessageToFrame.bind(this), async: false}],
['broadcastTab', {handler: this._onApiBroadcastTab.bind(this), async: false}], ['broadcastTab', {handler: this._onApiBroadcastTab.bind(this), async: false}],
['frameInformationGet', {handler: this._onApiFrameInformationGet.bind(this), async: true}], ['frameInformationGet', {handler: this._onApiFrameInformationGet.bind(this), async: true}],
['injectStylesheet', {handler: this._onApiInjectStylesheet.bind(this), async: true}], ['injectStylesheet', {handler: this._onApiInjectStylesheet.bind(this), async: true}],
@ -106,7 +105,6 @@ class Backend {
['getDisplayTemplatesHtml', {handler: this._onApiGetDisplayTemplatesHtml.bind(this), async: true}], ['getDisplayTemplatesHtml', {handler: this._onApiGetDisplayTemplatesHtml.bind(this), async: true}],
['getQueryParserTemplatesHtml', {handler: this._onApiGetQueryParserTemplatesHtml.bind(this), async: true}], ['getQueryParserTemplatesHtml', {handler: this._onApiGetQueryParserTemplatesHtml.bind(this), async: true}],
['getZoom', {handler: this._onApiGetZoom.bind(this), async: true}], ['getZoom', {handler: this._onApiGetZoom.bind(this), async: true}],
['getMessageToken', {handler: this._onApiGetMessageToken.bind(this), async: false}],
['getDefaultAnkiFieldTemplates', {handler: this._onApiGetDefaultAnkiFieldTemplates.bind(this), async: false}], ['getDefaultAnkiFieldTemplates', {handler: this._onApiGetDefaultAnkiFieldTemplates.bind(this), async: false}],
['getAnkiDeckNames', {handler: this._onApiGetAnkiDeckNames.bind(this), async: true}], ['getAnkiDeckNames', {handler: this._onApiGetAnkiDeckNames.bind(this), async: true}],
['getAnkiModelNames', {handler: this._onApiGetAnkiModelNames.bind(this), async: true}], ['getAnkiModelNames', {handler: this._onApiGetAnkiModelNames.bind(this), async: true}],
@ -600,6 +598,17 @@ class Backend {
}); });
} }
_onApiSendMessageToFrame({frameId, action, params}, sender) {
if (!(sender && sender.tab)) {
return false;
}
const tabId = sender.tab.id;
const callback = () => this.checkLastError(chrome.runtime.lastError);
chrome.tabs.sendMessage(tabId, {action, params}, {frameId}, callback);
return true;
}
_onApiBroadcastTab({action, params}, sender) { _onApiBroadcastTab({action, params}, sender) {
if (!(sender && sender.tab)) { if (!(sender && sender.tab)) {
return false; return false;
@ -731,10 +740,6 @@ class Backend {
}); });
} }
_onApiGetMessageToken() {
return this.messageToken;
}
_onApiGetDefaultAnkiFieldTemplates() { _onApiGetDefaultAnkiFieldTemplates() {
return this.defaultAnkiFieldTemplates; return this.defaultAnkiFieldTemplates;
} }

View File

@ -56,5 +56,6 @@ async function popupNestedInitialize(id, depth, parentFrameId, url) {
(async () => { (async () => {
apiForwardLogsToBackend(); apiForwardLogsToBackend();
new DisplayFloat(); const display = new DisplayFloat();
await display.prepare();
})(); })();

View File

@ -18,7 +18,7 @@
/* global /* global
* Display * Display
* apiBroadcastTab * apiBroadcastTab
* apiGetMessageToken * apiSendMessageToFrame
* popupNestedInitialize * popupNestedInitialize
*/ */
@ -27,12 +27,11 @@ class DisplayFloat extends Display {
super(document.querySelector('#spinner'), document.querySelector('#definitions')); super(document.querySelector('#spinner'), document.querySelector('#definitions'));
this.autoPlayAudioTimer = null; this.autoPlayAudioTimer = null;
this._popupId = null; this._secret = yomichan.generateId(16);
this._token = null;
this._orphaned = false; this._orphaned = false;
this._prepareInvoked = false; this._initializedNestedPopups = false;
this._messageToken = null;
this._messageTokenPromise = null;
this._onKeyDownHandlers = new Map([ this._onKeyDownHandlers = new Map([
['C', (e) => { ['C', (e) => {
@ -46,38 +45,23 @@ class DisplayFloat extends Display {
]); ]);
this._windowMessageHandlers = new Map([ this._windowMessageHandlers = new Map([
['setOptionsContext', ({optionsContext}) => this.setOptionsContext(optionsContext)], ['initialize', {handler: this._initialize.bind(this), authenticate: false}],
['setContent', ({type, details}) => this.setContent(type, details)], ['configure', {handler: this._configure.bind(this)}],
['clearAutoPlayTimer', () => this.clearAutoPlayTimer()], ['setOptionsContext', {handler: ({optionsContext}) => this.setOptionsContext(optionsContext)}],
['setCustomCss', ({css}) => this.setCustomCss(css)], ['setContent', {handler: ({type, details}) => this.setContent(type, details)}],
['prepare', ({popupInfo, optionsContext, childrenSupported, scale}) => this.prepare(popupInfo, optionsContext, childrenSupported, scale)], ['clearAutoPlayTimer', {handler: () => this.clearAutoPlayTimer()}],
['setContentScale', ({scale}) => this.setContentScale(scale)] ['setCustomCss', {handler: ({css}) => this.setCustomCss(css)}],
['setContentScale', {handler: ({scale}) => this.setContentScale(scale)}]
]); ]);
}
async prepare() {
await super.prepare();
yomichan.on('orphaned', this.onOrphaned.bind(this)); yomichan.on('orphaned', this.onOrphaned.bind(this));
window.addEventListener('message', this.onMessage.bind(this), false); window.addEventListener('message', this.onMessage.bind(this), false);
}
async prepare(popupInfo, optionsContext, childrenSupported, scale) { apiBroadcastTab('popupPrepared', {secret: this._secret});
if (this._prepareInvoked) { return; }
this._prepareInvoked = true;
const {id, parentFrameId} = popupInfo;
this._popupId = id;
this.optionsContext = optionsContext;
await super.prepare();
await this.updateOptions();
if (childrenSupported) {
const {depth, url} = optionsContext;
popupNestedInitialize(id, depth, parentFrameId, url);
}
this.setContentScale(scale);
apiBroadcastTab('popupPrepareCompleted', {targetPopupId: this._popupId});
} }
onError(error) { onError(error) {
@ -102,46 +86,30 @@ class DisplayFloat extends Display {
onMessage(e) { onMessage(e) {
const data = e.data; const data = e.data;
if (typeof data !== 'object' || data === null) { return; } // Invalid data if (typeof data !== 'object' || data === null) {
this._logMessageError(e, 'Invalid data');
const token = data.token;
if (typeof token !== 'string') { return; } // Invalid data
if (this._messageToken === null) {
// Async
this.getMessageToken()
.then(
() => { this.handleAction(token, data); },
() => {}
);
} else {
// Sync
this.handleAction(token, data);
}
}
async getMessageToken() {
// this._messageTokenPromise is used to ensure that only one call to apiGetMessageToken is made.
if (this._messageTokenPromise === null) {
this._messageTokenPromise = apiGetMessageToken();
}
const messageToken = await this._messageTokenPromise;
if (this._messageToken === null) {
this._messageToken = messageToken;
}
this._messageTokenPromise = null;
}
handleAction(token, {action, params}) {
if (token !== this._messageToken) {
// Invalid token
return; return;
} }
const handler = this._windowMessageHandlers.get(action); const action = data.action;
if (typeof handler !== 'function') { return; } if (typeof action !== 'string') {
this._logMessageError(e, 'Invalid data');
return;
}
handler(params); const handlerInfo = this._windowMessageHandlers.get(action);
if (typeof handlerInfo === 'undefined') {
this._logMessageError(e, `Invalid action: ${JSON.stringify(action)}`);
return;
}
if (handlerInfo.authenticate !== false && !this._isMessageAuthenticated(data)) {
this._logMessageError(e, 'Invalid authentication');
return;
}
const handler = handlerInfo.handler;
handler(data.params);
} }
autoPlayAudio() { autoPlayAudio() {
@ -193,4 +161,45 @@ class DisplayFloat extends Display {
return ''; return '';
} }
} }
_logMessageError(event, type) {
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;
apiSendMessageToFrame(frameId, 'popupInitialized', {secret, token});
}
async _configure({messageId, frameId, popupId, optionsContext, childrenSupported, scale}) {
this.optionsContext = optionsContext;
await this.updateOptions();
if (childrenSupported && !this._initializedNestedPopups) {
const {depth, url} = optionsContext;
popupNestedInitialize(popupId, depth, frameId, url);
this._initializedNestedPopups = true;
}
this.setContentScale(scale);
apiSendMessageToFrame(frameId, 'popupConfigured', {messageId});
}
_isMessageAuthenticated(message) {
return (
this._token !== null &&
this._token === message.token &&
this._secret === message.secret
);
}
} }

View File

@ -17,7 +17,6 @@
/* global /* global
* DOM * DOM
* apiGetMessageToken
* apiInjectStylesheet * apiInjectStylesheet
* apiOptionsGet * apiOptionsGet
*/ */
@ -39,8 +38,9 @@ class Popup {
this._contentScale = 1.0; this._contentScale = 1.0;
this._containerSizeContentScale = null; this._containerSizeContentScale = null;
this._targetOrigin = chrome.runtime.getURL('/').replace(/\/$/, ''); this._targetOrigin = chrome.runtime.getURL('/').replace(/\/$/, '');
this._messageToken = null;
this._previousOptionsContextSource = null; this._previousOptionsContextSource = null;
this._containerSecret = null;
this._containerToken = null;
this._container = document.createElement('iframe'); this._container = document.createElement('iframe');
this._container.className = 'yomichan-float'; this._container.className = 'yomichan-float';
@ -216,40 +216,154 @@ class Popup {
return injectPromise; return injectPromise;
} }
async _createInjectPromise() { _initializeFrame(frame, targetOrigin, frameId, setupFrame, timeout=10000) {
if (this._messageToken === null) { return new Promise((resolve, reject) => {
this._messageToken = await apiGetMessageToken(); const tokenMap = new Map();
let timer = null;
let containerLoadedResolve = null;
let containerLoadedReject = null;
const containerLoaded = new Promise((resolve2, reject2) => {
containerLoadedResolve = resolve2;
containerLoadedReject = reject2;
});
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 containerLoaded;
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 (containerLoadedResolve === null) {
cleanup();
reject(new Error('Unexpected load event'));
return;
} }
if (Popup.isFrameAboutBlank(frame)) {
return;
}
containerLoadedResolve();
containerLoadedResolve = null;
containerLoadedReject = null;
};
const cleanup = () => {
if (timer === null) { return; } // Done
clearTimeout(timer);
timer = null;
containerLoadedResolve = null;
if (containerLoadedReject !== null) {
containerLoadedReject(new Error('Terminated'));
containerLoadedReject = 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
containerLoaded.catch(() => {}); // NOP
setupFrame(frame);
});
}
async _createInjectPromise() {
this._injectStyles();
const {secret, token} = await this._initializeFrame(this._container, this._targetOrigin, this._frameId, (frame) => {
frame.removeAttribute('src');
frame.removeAttribute('srcdoc');
frame.setAttribute('src', chrome.runtime.getURL('/fg/float.html'));
this._observeFullscreen(true);
this._onFullscreenChanged();
});
this._containerSecret = secret;
this._containerToken = token;
// Configure
const messageId = yomichan.generateId(16);
const popupPreparedPromise = yomichan.getTemporaryListenerResult( const popupPreparedPromise = yomichan.getTemporaryListenerResult(
chrome.runtime.onMessage, chrome.runtime.onMessage,
({action, params}, {resolve}) => { (message, {resolve}) => {
if ( if (
action === 'popupPrepareCompleted' && isObject(message) &&
isObject(params) && message.action === 'popupConfigured' &&
params.targetPopupId === this._id isObject(message.params) &&
message.params.messageId === messageId
) { ) {
resolve(); resolve();
} }
} }
); );
this._invokeApi('configure', {
const parentFrameId = (typeof this._frameId === 'number' ? this._frameId : null); messageId,
this._container.setAttribute('src', chrome.runtime.getURL('/fg/float.html')); frameId: this._frameId,
this._container.addEventListener('load', () => { popupId: this._id,
this._invokeApi('prepare', {
popupInfo: {
id: this._id,
parentFrameId
},
optionsContext: this._optionsContext, optionsContext: this._optionsContext,
childrenSupported: this._childrenSupported, childrenSupported: this._childrenSupported,
scale: this._contentScale scale: this._contentScale
}); });
});
this._observeFullscreen(true);
this._onFullscreenChanged();
this._injectStyles();
return popupPreparedPromise; return popupPreparedPromise;
} }
@ -267,6 +381,8 @@ class Popup {
this._container.removeAttribute('src'); this._container.removeAttribute('src');
this._container.removeAttribute('srcdoc'); this._container.removeAttribute('srcdoc');
this._containerSecret = null;
this._containerToken = null;
this._injectPromise = null; this._injectPromise = null;
this._injectPromiseComplete = false; this._injectPromiseComplete = false;
} }
@ -401,11 +517,12 @@ class Popup {
} }
_invokeApi(action, params={}) { _invokeApi(action, params={}) {
const token = this._messageToken; const secret = this._containerSecret;
const token = this._containerToken;
const contentWindow = this._container.contentWindow; const contentWindow = this._container.contentWindow;
if (token === null || contentWindow === null) { return; } if (secret === null || token === null || contentWindow === null) { return; }
contentWindow.postMessage({action, params, token}, this._targetOrigin); contentWindow.postMessage({action, params, secret, token}, this._targetOrigin);
} }
_getFrameParentElement() { _getFrameParentElement() {
@ -653,6 +770,17 @@ class Popup {
injectedStylesheets.set(id, styleNode); injectedStylesheets.set(id, styleNode);
return styleNode; return styleNode;
} }
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;
}
}
} }
Popup._injectedStylesheets = new Map(); Popup._injectedStylesheets = new Map();

View File

@ -76,6 +76,10 @@ function apiScreenshotGet(options) {
return _apiInvoke('screenshotGet', {options}); return _apiInvoke('screenshotGet', {options});
} }
function apiSendMessageToFrame(frameId, action, params) {
return _apiInvoke('sendMessageToFrame', {frameId, action, params});
}
function apiBroadcastTab(action, params) { function apiBroadcastTab(action, params) {
return _apiInvoke('broadcastTab', {action, params}); return _apiInvoke('broadcastTab', {action, params});
} }
@ -108,10 +112,6 @@ function apiGetZoom() {
return _apiInvoke('getZoom'); return _apiInvoke('getZoom');
} }
function apiGetMessageToken() {
return _apiInvoke('getMessageToken');
}
function apiGetDefaultAnkiFieldTemplates() { function apiGetDefaultAnkiFieldTemplates() {
return _apiInvoke('getDefaultAnkiFieldTemplates'); return _apiInvoke('getDefaultAnkiFieldTemplates');
} }