ui: CSP Improvements (#9847)

* Configure ember-auto-import so we can use a stricter CSP

* 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)

* Set a strict-ish CSP policy during development

.changelog/9847.txt

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

ui/packages/consul-ui/app/initializers/ivy-codemirror.js

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

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/lib/startup/templates/body.html.js

@@ -16,24 +16,20 @@ module.exports = ({ appName, environment, rootURL, config }) => `
   }<path d="M61 30.15V17.948c0-4.962 2.845-7.85 9.495-7.85 2.484 0 5.048.326 7.252.895l-.561 4.433c-2.164-.406-4.688-.691-6.53-.691-3.486 0-4.608 1.22-4.608 4.108v10.412c0 2.888 1.122 4.108 4.607 4.108 1.843 0 4.367-.284 6.53-.691l.562 4.433c-2.204.57-4.768.895-7.252.895C63.845 38 61 35.112 61 30.15zm36.808.04c0 4.068-1.802 7.81-8.493 7.81-6.69 0-8.494-3.742-8.494-7.81v-5.002c0-4.067 1.803-7.81 8.494-7.81 6.69 0 8.493 3.743 8.493 7.81v5.003zm-4.887-5.165c0-2.237-1.002-3.416-3.606-3.416s-3.606 1.18-3.606 3.416v5.328c0 2.237 1.002 3.417 3.606 3.417s3.606-1.18 3.606-3.417v-5.328zm25.79 12.568h-4.887V23.764c0-1.057-.44-1.586-1.563-1.586-1.201 0-3.325.732-5.088 1.668v13.747h-4.887V17.785h3.726l.48 1.668c2.444-1.22 5.53-2.074 7.813-2.074 3.245 0 4.407 2.318 4.407 5.857v14.357zm18.26-5.775c0 3.823-1.162 6.182-7.052 6.182-2.083 0-4.927-.488-6.73-1.139l.68-3.782c1.643.488 3.807.854 5.81.854 2.164 0 2.484-.488 2.484-1.993 0-1.22-.24-1.83-3.405-2.603-4.768-1.18-5.329-2.4-5.329-6.223 0-3.986 1.723-5.735 7.292-5.735 1.803 0 4.166.244 5.85.691l-.482 3.945c-1.482-.284-3.846-.569-5.368-.569-2.124 0-2.484.488-2.484 1.708 0 1.587.12 1.709 2.764 2.4 5.449 1.464 5.97 2.196 5.97 6.264zm4.357-14.033h4.887v13.83c0 1.057.441 1.586 1.563 1.586 1.202 0 3.325-.733 5.088-1.668V17.785h4.888v19.808h-3.726l-.481-1.667c-2.444 1.22-5.529 2.074-7.812 2.074-3.246 0-4.407-2.318-4.407-5.857V17.785zM168 37.593h-4.888V9.691L168 9v28.593z"/></g></svg>
   <script type="application/json" data-consul-ui-config>
 ${environment === 'production' ? `{{jsonEncode .}}` : JSON.stringify(config.operatorConfig)}
+  </script>
+  <script type="application/json" data-consul-ui-fs>
+  {
+    "text-encoding/encoding-indexes.js": "${rootURL}assets/encoding-indexes.js",
+    "text-encoding/encoding.js": "${rootURL}assets/encoding-indexes.js",
+    "css.escape/css.escape.js": "${rootURL}assets/css.escape.js",
+    "codemirror/mode/javascript/javascript.js": "${rootURL}assets/codemirror/mode/javascript/javascript.js",
+    "codemirror/mode/ruby/ruby.js": "${rootURL}assets/codemirror/mode/ruby/ruby.js",
+    "codemirror/mode/yaml/yaml.js": "${rootURL}assets/codemirror/mode/yaml/yaml.js"
+  }
   </script>
   <script src="${rootURL}assets/init.js"></script>
   <script src="${rootURL}assets/vendor.js"></script>
   ${environment === 'test' ? `<script src="${rootURL}assets/test-support.js"></script>` : ``}
-  <script>
-    var appendScript = function(src) {
-      var $script = document.createElement('script');
-      $script.src = src;
-      document.body.appendChild($script);
-    }
-    if(!('TextDecoder' in window)) {
-      appendScript('${rootURL}assets/encoding-indexes.js');
-      appendScript('${rootURL}assets/encoding.js');
-    }
-    if(!(window.CSS && window.CSS.escape)) {
-      appendScript('${rootURL}assets/css.escape.js');
-    }
-  </script>
   <script src="${rootURL}assets/metrics-providers/consul.js"></script>
   <script src="${rootURL}assets/metrics-providers/prometheus.js"></script>
   ${
@@ -42,19 +38,5 @@ ${environment === 'production' ? `{{jsonEncode .}}` : JSON.stringify(config.oper
       : ``
   }
   <script src="${rootURL}assets/${appName}.js"></script>
-  <script>
-    CodeMirror.modeURL = {
-      replace: function(n, mode) {
-        switch(mode) {
-          case 'javascript':
-            return '${rootURL}assets/codemirror/mode/javascript/javascript.js';
-          case 'ruby':
-            return '${rootURL}assets/codemirror/mode/ruby/ruby.js';
-          case 'yaml':
-            return '${rootURL}assets/codemirror/mode/yaml/yaml.js';
-        }
-      }
-    };
-  </script>
   ${environment === 'test' ? `<script src="${rootURL}assets/tests.js"></script>` : ``}
 `;

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