ui: CSP Improvements

.changelog/9847.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: support stricter content security policies
+```

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,
+};

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: [

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'));
 };

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