bootstrap ui in script file rather than inline #15904

epixa · 2018-01-08T20:01:13Z

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.

The UI bootstrapping logic is now served up on an app-specific .js
endpoint. The URL for the boostrap must contain the app id so that it
can load the relevant app-specific JS bundles on the fly.

The HTTP caching will be invalidated whenever the underlying template
changes, the interpolated data changes, or any translations change.

This is necessary for #2873

spalger

Just some notes, excited about the direction here

spalger · 2018-01-08T22:07:19Z

src/ui/ui_render/bootstrap/app_bootstrap.js

+    const hash = createHash('sha1');
+    hash.update(this._rawTemplate);
+    hash.update(JSON.stringify(this.templateData));
+    hash.update(JSON.stringify(this.translations));


Just curious, why not just hash the result of #getJsFile()? Feels like that is what this method is claiming to do, but is avoiding it for some reason.

Good idea. I arrived at this current implementation after some refactoring, and it's not ideal.

spalger · 2018-01-08T22:11:49Z

src/ui/ui_render/ui_render_mixin.js

+    path: '/bundles/app/{id}/bootstrap.js',
+    method: 'GET',
+    async handler(request, reply) {
+      const { id } = request.params;


If we put everything within the try {} catch {}, and threw the error on 41 rather than passing it directly to reply(), then this handler would have a single flow for errors and would properly route errors if server.getUiAppById() threw, or request.params wasn't defined for some reason.

spalger · 2018-01-08T22:13:43Z

src/dev/jest/config.json

@@ -1,6 +1,7 @@
 {
  "rootDir": "../../..",
  "roots": [
+    "<rootDir>/src/ui",


This could probably just replace the next line

spalger · 2018-01-08T22:28:01Z

src/ui/ui_render/bootstrap/app_bootstrap.test.js

+      const boostrap = new AppBootstrap(mockConfig());
+      const contents = await boostrap.getJsFile();
+
+      expect(contents).toContain('translated foo');


Why is the translation for the key foo in the js file?

The key is foo in the mock template for this test. In the actual template, it is UI-WELCOME_ERROR, which is the translation key for the error message that is shown when bundles fail to load properly: https://github.com/elastic/kibana/blob/master/src/ui/ui_render/views/ui_app.jade#L143

epixa · 2018-01-08T23:53:51Z

@spalger I pushed changes for your feedback

epixa · 2018-01-09T01:58:28Z

This is breaking for the status page. I'll check it out tomorrow.

epixa · 2018-01-09T17:02:19Z

#15880 was merged, so this PR is unblocked

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.

elasticmachine · 2018-02-04T21:26:36Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

epixa · 2018-02-04T21:30:53Z

@spalger Sorted out the status page issue and ready for another look.

spalger

LGTM

spalger

One last thing I think

spalger · 2018-02-05T17:00:19Z

src/ui/ui_render/ui_render_mixin.js

@@ -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',


Make sure this gets config: { auth: false }

Good call. I pushed this up and merged with the latest master.

We do not require auth for the rest of our static JS files, and this file should not be treated differently than those. That this file is created dynamically rather than pulled directly from the file system is just an implementation detail.

elasticmachine · 2018-02-05T20:25:18Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

epixa · 2018-02-05T20:31:36Z

jenkins, test this

elasticmachine · 2018-02-05T21:18:50Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

epixa · 2018-02-05T21:22:00Z

I pinged the visualizations team about that random test failure. It was some threshold-based test failing in a flaky way, so they're looking into it.

* 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. * cleanup from review 1 * fix status page bootstrap * do not require auth for app bootstrap files We do not require auth for the rest of our static JS files, and this file should not be treated differently than those. That this file is created dynamically rather than pulled directly from the file system is just an implementation detail.

epixa added Team:Core Core services & architecture: plugins, logging, config, saved objects, http, ES client, i18n, etc release_note:enhancement labels Jan 8, 2018

epixa force-pushed the remove-inline-scripts branch from 38239fc to 2ec48a3 Compare January 8, 2018 20:06

epixa added review blocked labels Jan 8, 2018

spalger suggested changes Jan 8, 2018

View reviewed changes

spalger approved these changes Jan 9, 2018

View reviewed changes

epixa removed the blocked label Jan 9, 2018

epixa removed the review label Jan 9, 2018

epixa mentioned this pull request Jan 9, 2018

Implement Content Security Policy #2873

Closed

epixa added 2 commits February 4, 2018 15:17

cleanup from review 1

d271851

epixa force-pushed the remove-inline-scripts branch from cb020d8 to d271851 Compare February 4, 2018 20:19

fix status page bootstrap

1a250f2

spalger approved these changes Feb 5, 2018

View reviewed changes

spalger suggested changes Feb 5, 2018

View reviewed changes

epixa added 2 commits February 5, 2018 14:34

do not require auth for app bootstrap files

c841661

We do not require auth for the rest of our static JS files, and this file should not be treated differently than those. That this file is created dynamically rather than pulled directly from the file system is just an implementation detail.

Merge branch 'master' into remove-inline-scripts

baaf7b9

spalger approved these changes Feb 5, 2018

View reviewed changes

epixa added v7.0.0 v6.3.0 and removed release_note:enhancement labels Feb 5, 2018

epixa merged commit 2896a13 into elastic:master Feb 5, 2018

epixa deleted the remove-inline-scripts branch February 5, 2018 21:22

epixa mentioned this pull request Feb 5, 2018

[6.x] bootstrap ui in script file rather than inline (#15904) #16541

Merged

srl295 mentioned this pull request Feb 21, 2018

escape ' -> \' for the UI-WELCOME_ERROR #10581

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

bootstrap ui in script file rather than inline #15904

bootstrap ui in script file rather than inline #15904

epixa commented Jan 8, 2018 •

edited

Loading

spalger left a comment

spalger Jan 8, 2018

epixa Jan 8, 2018

spalger Jan 8, 2018 •

edited

Loading

epixa Jan 8, 2018

spalger Jan 8, 2018 •

edited

Loading

spalger Jan 8, 2018

epixa Jan 8, 2018

epixa commented Jan 8, 2018

epixa commented Jan 9, 2018

epixa commented Jan 9, 2018

elasticmachine commented Feb 4, 2018

epixa commented Feb 4, 2018

spalger left a comment

spalger left a comment

spalger Feb 5, 2018

epixa Feb 5, 2018

elasticmachine commented Feb 5, 2018

epixa commented Feb 5, 2018

elasticmachine commented Feb 5, 2018

epixa commented Feb 5, 2018

bootstrap ui in script file rather than inline #15904

bootstrap ui in script file rather than inline #15904

Conversation

epixa commented Jan 8, 2018 • edited Loading

spalger left a comment

Choose a reason for hiding this comment

spalger Jan 8, 2018

Choose a reason for hiding this comment

epixa Jan 8, 2018

Choose a reason for hiding this comment

spalger Jan 8, 2018 • edited Loading

Choose a reason for hiding this comment

epixa Jan 8, 2018

Choose a reason for hiding this comment

spalger Jan 8, 2018 • edited Loading

Choose a reason for hiding this comment

spalger Jan 8, 2018

Choose a reason for hiding this comment

epixa Jan 8, 2018

Choose a reason for hiding this comment

epixa commented Jan 8, 2018

epixa commented Jan 9, 2018

epixa commented Jan 9, 2018

elasticmachine commented Feb 4, 2018

💚 Build Succeeded

epixa commented Feb 4, 2018

spalger left a comment

Choose a reason for hiding this comment

spalger left a comment

Choose a reason for hiding this comment

spalger Feb 5, 2018

Choose a reason for hiding this comment

epixa Feb 5, 2018

Choose a reason for hiding this comment

elasticmachine commented Feb 5, 2018

💔 Build Failed

epixa commented Feb 5, 2018

elasticmachine commented Feb 5, 2018

💚 Build Succeeded

epixa commented Feb 5, 2018

epixa commented Jan 8, 2018 •

edited

Loading

spalger Jan 8, 2018 •

edited

Loading

spalger Jan 8, 2018 •

edited

Loading