diff options
| -rw-r--r-- | dev/data/manifest-variants.json | 9 | ||||
| -rw-r--r-- | ext/bg/js/settings/anki-templates-controller.js | 4 | ||||
| -rw-r--r-- | ext/bg/js/template-renderer-frame-api.js | 76 | ||||
| -rw-r--r-- | ext/bg/js/template-renderer-frame-main.js | 27 | ||||
| -rw-r--r-- | ext/bg/js/template-renderer-proxy.js | 153 | ||||
| -rw-r--r-- | ext/bg/search.html | 3 | ||||
| -rw-r--r-- | ext/bg/settings.html | 3 | ||||
| -rw-r--r-- | ext/bg/template-renderer.html | 22 | ||||
| -rw-r--r-- | ext/fg/float.html | 4 | ||||
| -rw-r--r-- | ext/manifest.json | 9 | ||||
| -rw-r--r-- | ext/mixed/js/display.js | 4 | 
11 files changed, 301 insertions, 13 deletions
| diff --git a/dev/data/manifest-variants.json b/dev/data/manifest-variants.json index 6d80d73d..587a41f8 100644 --- a/dev/data/manifest-variants.json +++ b/dev/data/manifest-variants.json @@ -67,6 +67,12 @@              "page": "bg/settings.html",              "open_in_tab": true          }, +        "sandbox": { +            "pages": [ +                "bg/template-renderer.html" +            ], +            "content_security_policy": "sandbox allow-scripts; script-src 'self' 'unsafe-eval'; object-src 'self'" +        },          "permissions": [              "<all_urls>",              "storage", @@ -94,7 +100,8 @@              }          },          "web_accessible_resources": [ -            "fg/float.html" +            "fg/float.html", +            "bg/template-renderer.html"          ],          "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",          "applications": { diff --git a/ext/bg/js/settings/anki-templates-controller.js b/ext/bg/js/settings/anki-templates-controller.js index c53e4553..c980bfa2 100644 --- a/ext/bg/js/settings/anki-templates-controller.js +++ b/ext/bg/js/settings/anki-templates-controller.js @@ -17,7 +17,7 @@  /* global   * AnkiNoteBuilder - * TemplateRenderer + * TemplateRendererProxy   * api   */ @@ -28,7 +28,7 @@ class AnkiTemplatesController {          this._cachedDefinitionValue = null;          this._cachedDefinitionText = null;          this._defaultFieldTemplates = null; -        this._templateRenderer = new TemplateRenderer(); +        this._templateRenderer = new TemplateRendererProxy();      }      async prepare() { diff --git a/ext/bg/js/template-renderer-frame-api.js b/ext/bg/js/template-renderer-frame-api.js new file mode 100644 index 00000000..7668e176 --- /dev/null +++ b/ext/bg/js/template-renderer-frame-api.js @@ -0,0 +1,76 @@ +/* + * 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 TemplateRendererFrameApi { +    constructor(templateRenderer) { +        this._templateRenderer = templateRenderer; +        this._windowMessageHandlers = new Map([ +            ['renderHandlebarsTemplate', {async: true, handler: this._onRenderHandlebarsTemplate.bind(this)}] +        ]); +    } + +    prepare() { +        window.addEventListener('message', this._onWindowMessage.bind(this), false); +    } + +    _onWindowMessage(e) { +        const {source, data: {action, params, id}} = e; +        const messageHandler = this._windowMessageHandlers.get(action); +        if (typeof messageHandler === 'undefined') { return; } + +        this._onWindowMessageInner(messageHandler, action, params, source, id); +    } + +    async _onWindowMessageInner({handler, async}, action, params, source, id) { +        let response; +        try { +            let result = handler(params); +            if (async) { +                result = await result; +            } +            response = {result}; +        } catch (error) { +            response = {error: this._errorToJson(error)}; +        } + +        if (typeof id === undefined) { return; } +        source.postMessage({action: `${action}.response`, params: response, id}, '*'); +    } + +    async _onRenderHandlebarsTemplate({template, data, marker}) { +        return await this._templateRenderer.render(template, data, marker); +    } + +    _errorToJson(error) { +        try { +            if (error !== null && typeof error === 'object') { +                return { +                    name: error.name, +                    message: error.message, +                    stack: error.stack, +                    data: error.data +                }; +            } +        } catch (e) { +            // NOP +        } +        return { +            value: error, +            hasValue: true +        }; +    } +} diff --git a/ext/bg/js/template-renderer-frame-main.js b/ext/bg/js/template-renderer-frame-main.js new file mode 100644 index 00000000..7d3e1493 --- /dev/null +++ b/ext/bg/js/template-renderer-frame-main.js @@ -0,0 +1,27 @@ +/* + * 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/>. + */ + +/* globals + * TemplateRenderer + * TemplateRendererFrameApi + */ + +(() => { +    const templateRenderer = new TemplateRenderer(); +    const api = new TemplateRendererFrameApi(templateRenderer); +    api.prepare(); +})(); diff --git a/ext/bg/js/template-renderer-proxy.js b/ext/bg/js/template-renderer-proxy.js new file mode 100644 index 00000000..f08efdd6 --- /dev/null +++ b/ext/bg/js/template-renderer-proxy.js @@ -0,0 +1,153 @@ +/* + * 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 TemplateRendererProxy { +    constructor() { +        this._frame = null; +        this._frameNeedsLoad = true; +        this._frameLoading = false; +        this._frameLoadPromise = null; +        this._frameUrl = chrome.runtime.getURL('/bg/template-renderer.html'); +        this._invocations = new Set(); +    } + +    async render(template, data, marker) { +        await this._prepareFrame(); +        return await this._invoke('renderHandlebarsTemplate', {template, data, marker}); +    } + +    // Private + +    async _prepareFrame() { +        if (this._frame === null) { +            this._frame = document.createElement('iframe'); +            this._frame.addEventListener('load', this._onFrameLoad.bind(this), false); +            const style = this._frame.style; +            style.opacity = '0'; +            style.width = '0'; +            style.height = '0'; +            style.position = 'absolute'; +        } +        if (this._frameNeedsLoad) { +            this._frameNeedsLoad = false; +            this._frameLoading = true; +            this._frameLoadPromise = this._loadFrame(this._frame, this._frameUrl) +                .finally(() => { this._frameLoading = false; }); +        } +        await this._frameLoadPromise; +    } + +    _loadFrame(frame, url, timeout=5000) { +        return new Promise((resolve, reject) => { +            let ready = false; +            const cleanup = () => { +                frame.removeEventListener('load', onLoad, false); +                if (timer !== null) { +                    clearTimeout(timer); +                    timer = null; +                } +            }; +            const onLoad = () => { +                if (!ready) { return; } +                cleanup(); +                resolve(); +            }; + +            let timer = setTimeout(() => { +                cleanup(); +                reject(new Error('Timeout')); +            }, timeout); + +            frame.removeAttribute('src'); +            frame.removeAttribute('srcdoc'); +            frame.addEventListener('load', onLoad, false); +            try { +                document.body.appendChild(frame); +                ready = true; +                frame.contentDocument.location.href = url; +            } catch (e) { +                cleanup(); +                reject(e); +            } +        }); +    } + +    _invoke(action, params, timeout=null) { +        return new Promise((resolve, reject) => { +            const frameWindow = (this._frame !== null ? this._frame.contentWindow : null); +            if (frameWindow === null) { +                reject(new Error('Frame not set up')); +                return; +            } + +            const id = generateId(16); +            const invocation = { +                cancel: () => { +                    cleanup(); +                    reject(new Error('Terminated')); +                } +            }; + +            const cleanup = () => { +                this._invocations.delete(invocation); +                window.removeEventListener('message', onMessage, false); +                if (timer !== null) { +                    clearTimeout(timer); +                    timer = null; +                } +            }; +            const onMessage = (e) => { +                if ( +                    e.source !== frameWindow || +                    e.data.id !== id || +                    e.data.action !== `${action}.response` +                ) { +                    return; +                } + +                const response = e.data.params; +                cleanup(); +                const {error} = response; +                if (error) { +                    reject(jsonToError(error)); +                } else { +                    resolve(response.result); +                } +            }; + +            let timer = (typeof timeout === 'number' ? setTimeout(() => { +                cleanup(); +                reject(new Error('Timeout')); +            }, timeout) : null); + +            this._invocations.add(invocation); + +            window.addEventListener('message', onMessage, false); +            frameWindow.postMessage({action, params, id}, '*'); +        }); +    } + +    _onFrameLoad() { +        if (this._frameLoading) { return; } +        this._frameNeedsLoad = true; + +        for (const invocation of this._invocations) { +            invocation.cancel(); +        } +        this._invocations.clear(); +    } +} diff --git a/ext/bg/search.html b/ext/bg/search.html index ae117fd1..ecc79968 100644 --- a/ext/bg/search.html +++ b/ext/bg/search.html @@ -67,7 +67,6 @@              </div>          </div> -        <script src="/mixed/lib/handlebars.min.js"></script>          <script src="/mixed/lib/wanakana.min.js"></script>          <script src="/mixed/js/core.js"></script> @@ -92,7 +91,7 @@          <script src="/mixed/js/text-to-speech-audio.js"></script>          <script src="/bg/js/anki-note-builder.js"></script> -        <script src="/bg/js/template-renderer.js"></script> +        <script src="/bg/js/template-renderer-proxy.js"></script>          <script src="/bg/js/query-parser-generator.js"></script>          <script src="/bg/js/query-parser.js"></script> diff --git a/ext/bg/settings.html b/ext/bg/settings.html index 208f3d3f..7141776c 100644 --- a/ext/bg/settings.html +++ b/ext/bg/settings.html @@ -1186,7 +1186,6 @@          <script src="/mixed/lib/jquery.min.js"></script>          <script src="/mixed/lib/bootstrap/js/bootstrap.min.js"></script> -        <script src="/mixed/lib/handlebars.min.js"></script>          <script src="/mixed/lib/jszip.min.js"></script>          <script src="/mixed/lib/wanakana.min.js"></script> @@ -1214,7 +1213,7 @@          <script src="/bg/js/dictionary-importer.js"></script>          <script src="/bg/js/json-schema.js"></script>          <script src="/bg/js/media-utility.js"></script> -        <script src="/bg/js/template-renderer.js"></script> +        <script src="/bg/js/template-renderer-proxy.js"></script>          <script src="/bg/js/settings/keyboard-mouse-input-field.js"></script>          <script src="/bg/js/settings/profile-conditions-ui.js"></script> diff --git a/ext/bg/template-renderer.html b/ext/bg/template-renderer.html new file mode 100644 index 00000000..c58e604c --- /dev/null +++ b/ext/bg/template-renderer.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +    <meta charset="UTF-8"> +    <meta name="viewport" content="width=device-width,initial-scale=1" /> +    <title>Yomichan Handlebars Sandbox</title> +    <link rel="icon" type="image/png" href="/mixed/img/icon16.png" sizes="16x16"> +    <link rel="icon" type="image/png" href="/mixed/img/icon19.png" sizes="19x19"> +    <link rel="icon" type="image/png" href="/mixed/img/icon32.png" sizes="32x32"> +    <link rel="icon" type="image/png" href="/mixed/img/icon38.png" sizes="38x38"> +    <link rel="icon" type="image/png" href="/mixed/img/icon48.png" sizes="48x48"> +    <link rel="icon" type="image/png" href="/mixed/img/icon64.png" sizes="64x64"> +    <link rel="icon" type="image/png" href="/mixed/img/icon128.png" sizes="128x128"> +</head> +<body> +    <script src="/mixed/lib/handlebars.min.js"></script> +    <script src="/mixed/js/japanese.js"></script> +    <script src="/bg/js/template-renderer.js"></script> +    <script src="/bg/js/template-renderer-frame-api.js"></script> +    <script src="/bg/js/template-renderer-frame-main.js"></script> +</body> +</html> diff --git a/ext/fg/float.html b/ext/fg/float.html index 98e849f0..2c64a777 100644 --- a/ext/fg/float.html +++ b/ext/fg/float.html @@ -44,8 +44,6 @@              </div>          </div> -        <script src="/mixed/lib/handlebars.min.js"></script> -          <script src="/mixed/js/core.js"></script>          <script src="/mixed/js/yomichan.js"></script>          <script src="/mixed/js/comm.js"></script> @@ -69,7 +67,7 @@          <script src="/mixed/js/text-to-speech-audio.js"></script>          <script src="/bg/js/anki-note-builder.js"></script> -        <script src="/bg/js/template-renderer.js"></script> +        <script src="/bg/js/template-renderer-proxy.js"></script>          <script src="/bg/js/query-parser-generator.js"></script>          <script src="/bg/js/query-parser.js"></script> diff --git a/ext/manifest.json b/ext/manifest.json index 271f6e62..59c88072 100644 --- a/ext/manifest.json +++ b/ext/manifest.json @@ -66,6 +66,12 @@          "page": "bg/settings.html",          "open_in_tab": true      }, +    "sandbox": { +        "pages": [ +            "bg/template-renderer.html" +        ], +        "content_security_policy": "sandbox allow-scripts; script-src 'self' 'unsafe-eval'; object-src 'self'" +    },      "permissions": [          "<all_urls>",          "storage", @@ -93,7 +99,8 @@          }      },      "web_accessible_resources": [ -        "fg/float.html" +        "fg/float.html", +        "bg/template-renderer.html"      ],      "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",      "applications": { diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js index ef56f4aa..a62e0212 100644 --- a/ext/mixed/js/display.js +++ b/ext/mixed/js/display.js @@ -25,7 +25,7 @@   * MediaLoader   * PopupFactory   * QueryParser - * TemplateRenderer + * TemplateRendererProxy   * WindowScroll   * api   * dynamicLoader @@ -87,7 +87,7 @@ class Display extends EventDispatcher {          this._ownerFrameId = null;          this._defaultAnkiFieldTemplates = null;          this._defaultAnkiFieldTemplatesPromise = null; -        this._templateRenderer = new TemplateRenderer(); +        this._templateRenderer = new TemplateRendererProxy();          this._ankiNoteBuilder = new AnkiNoteBuilder({              renderTemplate: this._renderTemplate.bind(this)          }); |