From 811ca87d5599991b4d13c59168507e1672744453 Mon Sep 17 00:00:00 2001 From: John Cowen Date: Mon, 8 Mar 2021 14:02:57 +0000 Subject: [PATCH 1/4] Configure ember-auto-import so we can use a stricter CSP --- ui/packages/consul-ui/ember-cli-build.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/ui/packages/consul-ui/ember-cli-build.js b/ui/packages/consul-ui/ember-cli-build.js index 2a08f867d586..ac1022bc5572 100644 --- a/ui/packages/consul-ui/ember-cli-build.js +++ b/ui/packages/consul-ui/ember-cli-build.js @@ -57,6 +57,10 @@ module.exports = function(defaults) { plugins: ['@babel/plugin-proposal-object-rest-spread'], sourceMaps: sourcemaps ? 'inline' : false, }, + autoImport: { + // allows use of a CSP without 'unsafe-eval' directive + forbidEval: true, + }, codemirror: { keyMaps: ['sublime'], addonFiles: [ From 695da352b02df0dc65b19bd4e4ca29b7b0b17f83 Mon Sep 17 00:00:00 2001 From: John Cowen Date: Mon, 8 Mar 2021 14:03:39 +0000 Subject: [PATCH 2/4] Create a fake filesystem using JSON to avoid inline scripts in index We used to have inline scripts in index.html in order to support embers filepath fingerprinting and our configurable rootURL. Instead of using inline scripts we use application/json plus a JSON blob to create a fake filesystem JSON blob/hash/map to hold all of the rootURL'ed fingerprinted file paths which we can then retrive later in non-inline scripts. We move our inlined polyfills script into the init.js external script, and we move the CodeMirror syntax highlighting configuration inline script into the main app itself - into the already existing CodeMirror initializer (this has been moved so we can lookup a service located document using ember's DI container) --- .../app/initializers/ivy-codemirror.js | 11 ------ .../instance-initializers/ivy-codemirror.js | 30 +++++++++++++++ .../lib/startup/templates/body.html.js | 38 +++++-------------- ui/packages/consul-ui/vendor/init.js | 16 ++++++++ 4 files changed, 56 insertions(+), 39 deletions(-) delete mode 100644 ui/packages/consul-ui/app/initializers/ivy-codemirror.js create mode 100644 ui/packages/consul-ui/app/instance-initializers/ivy-codemirror.js diff --git a/ui/packages/consul-ui/app/initializers/ivy-codemirror.js b/ui/packages/consul-ui/app/initializers/ivy-codemirror.js deleted file mode 100644 index c4f343605736..000000000000 --- a/ui/packages/consul-ui/app/initializers/ivy-codemirror.js +++ /dev/null @@ -1,11 +0,0 @@ -export function initialize(application) { - const IvyCodeMirrorComponent = application.resolveRegistration('component:ivy-codemirror'); - // Make sure ivy-codemirror respects/maintains a `name=""` attribute - IvyCodeMirrorComponent.reopen({ - attributeBindings: ['name'], - }); -} - -export default { - initialize, -}; diff --git a/ui/packages/consul-ui/app/instance-initializers/ivy-codemirror.js b/ui/packages/consul-ui/app/instance-initializers/ivy-codemirror.js new file mode 100644 index 000000000000..f347060efe86 --- /dev/null +++ b/ui/packages/consul-ui/app/instance-initializers/ivy-codemirror.js @@ -0,0 +1,30 @@ +/* globals CodeMirror */ +export function initialize(application) { + const appName = application.application.name; + const doc = application.lookup('service:-document'); + // pick codemirror syntax highlighting paths out of index.html + const fs = JSON.parse(doc.querySelector(`[data-${appName}-fs]`).textContent); + // configure syntax highlighting for CodeMirror + CodeMirror.modeURL = { + replace: function(n, mode) { + switch (mode) { + case 'javascript': + return fs['codemirror/mode/javascript/javascript.js']; + case 'ruby': + return fs['codemirror/mode/ruby/ruby.js']; + case 'yaml': + return fs['codemirror/mode/yaml/yaml.js']; + } + }, + }; + + const IvyCodeMirrorComponent = application.resolveRegistration('component:ivy-codemirror'); + // Make sure ivy-codemirror respects/maintains a `name=""` attribute + IvyCodeMirrorComponent.reopen({ + attributeBindings: ['name'], + }); +} + +export default { + initialize, +}; diff --git a/ui/packages/consul-ui/lib/startup/templates/body.html.js b/ui/packages/consul-ui/lib/startup/templates/body.html.js index cff576754d65..10fa4cecd6be 100644 --- a/ui/packages/consul-ui/lib/startup/templates/body.html.js +++ b/ui/packages/consul-ui/lib/startup/templates/body.html.js @@ -16,24 +16,20 @@ module.exports = ({ appName, environment, rootURL, config }) => ` } + ${environment === 'test' ? `` : ``} - ${ @@ -42,19 +38,5 @@ ${environment === 'production' ? `{{jsonEncode .}}` : JSON.stringify(config.oper : `` } - ${environment === 'test' ? `` : ``} `; diff --git a/ui/packages/consul-ui/vendor/init.js b/ui/packages/consul-ui/vendor/init.js index 63d99761ffd9..7852b8649082 100644 --- a/ui/packages/consul-ui/vendor/init.js +++ b/ui/packages/consul-ui/vendor/init.js @@ -1,4 +1,20 @@ (function(doc, appName) { + const fs = JSON.parse(doc.querySelector(`[data-${appName}-fs]`).textContent); + const appendScript = function(src) { + var $script = doc.createElement('script'); + $script.src = src; + doc.body.appendChild($script); + }; + + // polyfills + if (!('TextDecoder' in window)) { + appendScript(fs['text-encoding/encoding-indexes.js']); + appendScript(fs['text-encoding/encoding.js']); + } + if (!(window.CSS && window.CSS.escape)) { + appendScript(fs['css.escape/css.escape.js']); + } + try { const $appMeta = doc.querySelector(`[name="${appName}/config/environment"]`); // pick out the operatorConfig from our application/json script tag From 197670361c69d41ab430c1bf2dc8d3702f2c86db Mon Sep 17 00:00:00 2001 From: John Cowen Date: Mon, 8 Mar 2021 14:07:55 +0000 Subject: [PATCH 3/4] Set a strict-ish CSP policy during development --- ui/packages/consul-ui/server/index.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/ui/packages/consul-ui/server/index.js b/ui/packages/consul-ui/server/index.js index 56f8bcebcefd..a2abdb55e89c 100644 --- a/ui/packages/consul-ui/server/index.js +++ b/ui/packages/consul-ui/server/index.js @@ -25,6 +25,14 @@ module.exports = function(app, options) { } next(); }); + + // sets the base CSP policy for the UI + app.use(function(request, response, next) { + response.set({ + 'Content-Security-Policy': `default-src 'self' ws: localhost:${options.liveReloadPort} http: localhost:${options.liveReloadPort}; img-src 'self' data: ; style-src 'self' 'unsafe-inline'`, + }); + next(); + }); // Serve the coverage folder for easy viewing during development app.use('/coverage', express.static('coverage')); }; From 1af25fac4dc4704a802d74ae478e1591a655c716 Mon Sep 17 00:00:00 2001 From: John Cowen Date: Thu, 11 Mar 2021 09:33:26 +0000 Subject: [PATCH 4/4] Changelog --- .changelog/9847.txt | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 .changelog/9847.txt diff --git a/.changelog/9847.txt b/.changelog/9847.txt new file mode 100644 index 000000000000..a3010258b3ec --- /dev/null +++ b/.changelog/9847.txt @@ -0,0 +1,3 @@ +```release-note:improvement +ui: support stricter content security policies +```