From 2ec48a3e529fde3811980bfd52f75adc1b705ec2 Mon Sep 17 00:00:00 2001 From: Court Ewing Date: Mon, 8 Jan 2018 12:12:18 -0500 Subject: [PATCH] bootstrap ui in script file rather than inline There's no good reason to bootstrap the UI within the browser using an inline script tag rather than a separate dynamically created bootstrap script. Having this bootstrapping logic in its own file allows us to cache this separately from the main HTML payload, and it is required if we want to disable inline scripts entirely. --- src/dev/jest/config.json | 1 + src/ui/ui_render/bootstrap/app_bootstrap.js | 61 ++++++++ .../ui_render/bootstrap/app_bootstrap.test.js | 138 ++++++++++++++++++ src/ui/ui_render/bootstrap/index.js | 1 + src/ui/ui_render/bootstrap/template.js.hbs | 49 +++++++ src/ui/ui_render/ui_render_mixin.js | 33 +++++ src/ui/ui_render/views/ui_app.jade | 53 +------ 7 files changed, 284 insertions(+), 52 deletions(-) create mode 100644 src/ui/ui_render/bootstrap/app_bootstrap.js create mode 100644 src/ui/ui_render/bootstrap/app_bootstrap.test.js create mode 100644 src/ui/ui_render/bootstrap/index.js create mode 100644 src/ui/ui_render/bootstrap/template.js.hbs diff --git a/src/dev/jest/config.json b/src/dev/jest/config.json index a30fe06e0c4f805..f1da1d075817ed8 100644 --- a/src/dev/jest/config.json +++ b/src/dev/jest/config.json @@ -1,6 +1,7 @@ { "rootDir": "../../..", "roots": [ + "/src/ui", "/src/ui/public", "/src/core_plugins", "/ui_framework/" diff --git a/src/ui/ui_render/bootstrap/app_bootstrap.js b/src/ui/ui_render/bootstrap/app_bootstrap.js new file mode 100644 index 000000000000000..f97308085bad209 --- /dev/null +++ b/src/ui/ui_render/bootstrap/app_bootstrap.js @@ -0,0 +1,61 @@ +import _ from 'lodash'; +import Handlebars from 'handlebars'; +import { createHash } from 'crypto'; +import { readFile } from 'fs'; +import { resolve } from 'path'; + +export class AppBootstrap { + constructor({ templateData, translations }) { + this.templateData = templateData; + this.translations = translations; + this._rawTemplate = undefined; + } + + async getJsFile() { + if (!this._rawTemplate) { + this._rawTemplate = await loadRawTemplate(); + } + + Handlebars.registerHelper('i18n', key => _.get(this.translations, key, '')); + const template = Handlebars.compile(this._rawTemplate, { + knownHelpers: { i18n: true }, + knownHelpersOnly: true, + noEscape: true, // this is a js file, so html escaping isn't appropriate + strict: true, + }); + const compiledJsFile = template(this.templateData); + Handlebars.unregisterHelper('i18n'); + + return compiledJsFile; + } + + async getJsFileHash() { + if (!this._rawTemplate) { + this._rawTemplate = await loadRawTemplate(); + } + + const hash = createHash('sha1'); + hash.update(this._rawTemplate); + hash.update(JSON.stringify(this.templateData)); + hash.update(JSON.stringify(this.translations)); + return hash.digest('hex'); + } +} + +function loadRawTemplate() { + const templatePath = resolve(__dirname, 'template.js.hbs'); + return readFileAsync(templatePath); +} + +function readFileAsync(filePath) { + return new Promise((resolve, reject) => { + readFile(filePath, 'utf8', (err, fileContents) => { + if (err) { + reject(err); + return; + } + + resolve(fileContents); + }); + }); +} diff --git a/src/ui/ui_render/bootstrap/app_bootstrap.test.js b/src/ui/ui_render/bootstrap/app_bootstrap.test.js new file mode 100644 index 000000000000000..c30f6bb2808c081 --- /dev/null +++ b/src/ui/ui_render/bootstrap/app_bootstrap.test.js @@ -0,0 +1,138 @@ +import mockFs from 'mock-fs'; +import { resolve } from 'path'; + +const mockTemplate = ` +{{appId}} +{{bundlePath}} +{{i18n 'foo'}} +`; + +const templatePath = resolve(__dirname, 'template.js.hbs'); + +beforeEach(() => { + mockFs({ + [templatePath]: mockTemplate + }); +}); +afterEach(mockFs.restore); + +import { AppBootstrap } from './app_bootstrap'; + +describe('ui_render/AppBootstrap', () => { + describe('getJsFile()', () => { + test('resolves to a string', async () => { + expect.assertions(1); + + const boostrap = new AppBootstrap(mockConfig()); + const contents = await boostrap.getJsFile(); + + expect(typeof contents).toEqual('string'); + }); + + test('interpolates templateData into string template', async () => { + expect.assertions(2); + + const boostrap = new AppBootstrap(mockConfig()); + const contents = await boostrap.getJsFile(); + + expect(contents).toContain('123'); + expect(contents).toContain('/foo/bar'); + }); + + test('supports i18n', async () => { + expect.assertions(1); + + const boostrap = new AppBootstrap(mockConfig()); + const contents = await boostrap.getJsFile(); + + expect(contents).toContain('translated foo'); + }); + }); + + describe('getJsFileHash()', () => { + test('resolves to a 40 character string', async () => { + expect.assertions(2); + + const boostrap = new AppBootstrap(mockConfig()); + const hash = await boostrap.getJsFileHash(); + + expect(typeof hash).toEqual('string'); + expect(hash).toHaveLength(40); + }); + + test('resolves to the same string for multiple calls with the same config on the same bootstrap object', async () => { + expect.assertions(1); + + const boostrap = new AppBootstrap(mockConfig()); + const hash1 = await boostrap.getJsFileHash(); + const hash2 = await boostrap.getJsFileHash(); + + expect(hash2).toEqual(hash1); + }); + + test('resolves to the same string for multiple calls with the same config on different bootstrap objects', async () => { + expect.assertions(1); + + const boostrap1 = new AppBootstrap(mockConfig()); + const hash1 = await boostrap1.getJsFileHash(); + + const bootstrap2 = new AppBootstrap(mockConfig()); + const hash2 = await bootstrap2.getJsFileHash(); + + expect(hash2).toEqual(hash1); + }); + + test('resolves to different 40 character string with different templateData', async () => { + expect.assertions(3); + + const boostrap1 = new AppBootstrap(mockConfig()); + const hash1 = await boostrap1.getJsFileHash(); + + const config2 = { + ...mockConfig(), + templateData: { + appId: 'not123', + bundlePath: 'not/foo/bar' + } + }; + const bootstrap2 = new AppBootstrap(config2); + const hash2 = await bootstrap2.getJsFileHash(); + + expect(typeof hash2).toEqual('string'); + expect(hash2).toHaveLength(40); + expect(hash2).not.toEqual(hash1); + }); + + test('resolves to different 40 character string with different translations', async () => { + expect.assertions(3); + + const boostrap1 = new AppBootstrap(mockConfig()); + const hash1 = await boostrap1.getJsFileHash(); + + const config2 = { + ...mockConfig(), + translations: { + foo: 'not translated foo' + } + }; + const bootstrap2 = new AppBootstrap(config2); + const hash2 = await bootstrap2.getJsFileHash(); + + expect(typeof hash2).toEqual('string'); + expect(hash2).toHaveLength(40); + expect(hash2).not.toEqual(hash1); + }); + }); +}); + +function mockConfig() { + return { + translations: { + foo: 'translated foo' + }, + templateData: { + appId: 123, + bundlePath: '/foo/bar' + } + }; +} diff --git a/src/ui/ui_render/bootstrap/index.js b/src/ui/ui_render/bootstrap/index.js new file mode 100644 index 000000000000000..e13babaacc44891 --- /dev/null +++ b/src/ui/ui_render/bootstrap/index.js @@ -0,0 +1 @@ +export { AppBootstrap } from './app_bootstrap'; diff --git a/src/ui/ui_render/bootstrap/template.js.hbs b/src/ui/ui_render/bootstrap/template.js.hbs new file mode 100644 index 000000000000000..de315cbd4e4833a --- /dev/null +++ b/src/ui/ui_render/bootstrap/template.js.hbs @@ -0,0 +1,49 @@ +window.onload = function () { + function bundleFile(filename) { + var anchor = document.createElement('a'); + anchor.setAttribute('href', '{{bundlePath}}/' + filename); + return anchor.href; + } + var files = [ + bundleFile('commons.style.css'), + bundleFile('{{appId}}.style.css'), + bundleFile('commons.bundle.js'), + bundleFile('{{appId}}.bundle.js') + ]; + + (function next() { + var file = files.shift(); + if (!file) return; + + var failure = function () { + // make subsequent calls to failure() noop + failure = function () {}; + + var err = document.createElement('h1'); + err.style['color'] = 'white'; + err.style['font-family'] = 'monospace'; + err.style['text-align'] = 'center'; + err.style['background'] = '#F44336'; + err.style['padding'] = '25px'; + err.innerText = '{{i18n 'UI-WELCOME_ERROR'}}'; + + document.body.innerHTML = err.outerHTML; + } + + var type = /\.js(\?.+)?$/.test(file) ? 'script' : 'link'; + var dom = document.createElement(type); + dom.setAttribute('async', ''); + dom.addEventListener('error', failure); + + if (type === 'script') { + dom.setAttribute('src', file); + dom.addEventListener('load', next); + document.head.appendChild(dom); + } else { + dom.setAttribute('rel', 'stylesheet'); + dom.setAttribute('href', file); + document.head.appendChild(dom); + next(); + } + }()); +}; diff --git a/src/ui/ui_render/ui_render_mixin.js b/src/ui/ui_render/ui_render_mixin.js index 42c0c066fc74767..94c05b0824a4c52 100644 --- a/src/ui/ui_render/ui_render_mixin.js +++ b/src/ui/ui_render/ui_render_mixin.js @@ -2,6 +2,7 @@ import { defaults, get } from 'lodash'; import { props, reduce as reduceAsync } from 'bluebird'; import Boom from 'boom'; import { resolve } from 'path'; +import { AppBootstrap } from './bootstrap'; export function uiRenderMixin(kbnServer, server, config) { @@ -30,6 +31,38 @@ export function uiRenderMixin(kbnServer, server, config) { // render all views from ./views server.setupViews(resolve(__dirname, 'views')); + server.route({ + path: '/bundles/app/{id}/bootstrap.js', + method: 'GET', + async handler(request, reply) { + const { id } = request.params; + const app = server.getUiAppById(id); + if (!app) { + return reply(Boom.notFound(`Unknown app: ${id}`)); + } + + try { + const bootstrap = new AppBootstrap({ + templateData: { + appId: app.getId(), + bundlePath: `${config.get('server.basePath')}/bundles` + }, + translations: await request.getUiTranslations() + }); + + const body = await bootstrap.getJsFile(); + const etag = await bootstrap.getJsFileHash(); + + reply(body) + .header('cache-control', 'must-revalidate') + .header('content-type', 'application/javascript') + .etag(etag); + } catch (err) { + reply(err); + } + } + }); + server.route({ path: '/app/{id}', method: 'GET', diff --git a/src/ui/ui_render/views/ui_app.jade b/src/ui/ui_render/views/ui_app.jade index 1595059410bfa03..38942e7bf1ee380 100644 --- a/src/ui/ui_render/views/ui_app.jade +++ b/src/ui/ui_render/views/ui_app.jade @@ -110,55 +110,4 @@ block content .kibanaWelcomeText | #{i18n('UI-WELCOME_MESSAGE')} - script. - window.onload = function () { - var buildNum = #{kibanaPayload.buildNum}; - var cacheParam = buildNum ? '?v=' + buildNum : ''; - function bundleFile(filename) { - var anchor = document.createElement('a'); - anchor.setAttribute('href', !{JSON.stringify(bundlePath)} + '/' + filename + cacheParam); - return anchor.href; - } - var files = [ - bundleFile('commons.style.css'), - bundleFile('#{app.getId()}.style.css'), - bundleFile('commons.bundle.js'), - bundleFile('#{app.getId()}.bundle.js') - ]; - - (function next() { - var file = files.shift(); - if (!file) return; - - var failure = function () { - // make subsequent calls to failure() noop - failure = function () {}; - - var err = document.createElement('h1'); - err.style['color'] = 'white'; - err.style['font-family'] = 'monospace'; - err.style['text-align'] = 'center'; - err.style['background'] = '#F44336'; - err.style['padding'] = '25px'; - err.innerText = '#{i18n('UI-WELCOME_ERROR')}'; - - document.body.innerHTML = err.outerHTML; - } - - var type = /\.js(\?.+)?$/.test(file) ? 'script' : 'link'; - var dom = document.createElement(type); - dom.setAttribute('async', ''); - dom.addEventListener('error', failure); - - if (type === 'script') { - dom.setAttribute('src', file); - dom.addEventListener('load', next); - document.head.appendChild(dom); - } else { - dom.setAttribute('rel', 'stylesheet'); - dom.setAttribute('href', file); - document.head.appendChild(dom); - next(); - } - }()); - }; + script(src='#{bundlePath}/app/#{app.getId()}/bootstrap.js')