test for CSP compliance (#353)

.codeclimate.yml

@@ -14,6 +14,7 @@ exclude_paths:
 - "*.md"
 - "blueprints/**/*"
 - "config/**/*"
+- "tests/dummy/config/**/*"
 - "dist/**/*"
 - "vendor/**/*"
 - "node_modules/**/*"

.template-lintrc.js

@@ -3,6 +3,6 @@
 module.exports = {
   extends: 'recommended',
   rules: {
-    'linebreak-style': 'unix',
-  },
+    'linebreak-style': 'unix'
+  }
 };

README.md

@@ -12,6 +12,7 @@ Uploads continue in the background, even after a page transition. In other words
 * Ember CLI v2.13 or above
 * Node.js v10 or above
 * Modern browsers. Internet Explorer 11 might work but is not offically supported.
+* Strict Content Security Policy (CSP) except for mirage route handlers, which require `data:` protocol to be included in `image-src` and `media-src` directives.
 
 ## Installation
 

ember-cli-build.js

@@ -4,7 +4,9 @@ const EmberAddon = require('ember-cli/lib/broccoli/ember-addon');
 
 module.exports = function(defaults) {
   let app = new EmberAddon(defaults, {
-    // Add options here
+    autoImport: {
+      forbidEval: true
+    },
     sassOptions: {
       includePaths: ['tests/dummy/app']
     }

package.json

@@ -57,7 +57,8 @@
     "ember-cli": "~3.5.1",
     "ember-cli-addon-docs": "^0.7.0",
     "ember-cli-addon-docs-yuidoc": "^0.2.4",
-    "ember-cli-code-coverage": "^0.4.2",
+    "ember-cli-code-coverage": "^1.0.0-beta.9",
+    "ember-cli-content-security-policy": "^2.0.0-1",
     "ember-cli-dependency-checker": "^3.1.0",
     "ember-cli-deploy": "^1.0.2",
     "ember-cli-deploy-build": "^2.0.0",

tests/dummy/app/templates/docs/testing.md

@@ -72,3 +72,43 @@ function getImageBlob() {
   });
 }
 ```
+
+## Content Security Policy
+
+The production code provided this addon is compatible with a strict Content Security Policy (CSP). But the provided mirage route handlers require `data:` protocol to be allowed in `img-src` and `media-src` directives.
+
+If using provided mirage route handlers and [ember-cli-content-security-policy](https://github.com/rwjblue/ember-cli-content-security-policy#ember-cli-content-security-policy) you should change the default configuration like this:
+
+```js
+// config/content-security-policy.js
+
+module.exports = function(environment) {
+  let isMirageEnabled = ['development', 'test'].include(environment);
+
+  return {
+    delivery: ['header'],
+    enabled: true,
+    failTests: true,
+    policy: {
+      'default-src':  ["'none'"],
+      'script-src':   ["'self'"],
+      'font-src':     ["'self'"],
+      'connect-src':  ["'self'"],
+      'img-src':      [
+        "'self'",
+        // allow data protocol for environments in which mirage is enabled
+        isMirageEnabled ? 'data:' : null,
+      ].filter(Boolean),
+      'style-src':    ["'self'"],
+      'media-src':    [
+        "'self'",
+        // allow data protocol for environments in which mirage is enabled
+        isMirageEnabled ? 'data:' : null,
+      ],
+    },
+    reportOnly: true,
+  };
+}
+```
+
+You should not allow `data:` protocol for production environment unless it's required for another reason.

tests/dummy/config/content-security-policy.js

@@ -0,0 +1,52 @@
+module.exports = function() {
+  return {
+    policy: {
+      'default-src': ['\'none\''],
+      'script-src': [
+        '\'self\'',
+        // script tag injected by ember-cli-addon-docs
+        '\'sha256-vf+ZuKOhXq6af1D+7eWhmYHkEHMV8Z75nTtHTR7oFcg=\'',
+        // Instanbul used by ember-cli-code-coverage uses eval by default through
+        // `new Function('return this')`. It provides a configuratoin option
+        // to prevent this but that one is not exposed by ember-cli-code-coverage
+        // yet.
+        // Additionally it injects a script tag into the page.
+        // Please see details in this GitHub issue:
+        // https://github.com/kategengler/ember-cli-code-coverage/issues/214#issuecomment-619398136
+        process.env.COVERAGE ? '\'unsafe-eval\'' : null,
+        process.env.COVERAGE ? '\'sha256-962C3YD3u+SHbZpl2H9WlCU6FY6H8TZ7smnnVmRMtic=\'' : null
+      ].filter(Boolean),
+      'font-src': [
+        '\'self\'',
+        // font used in docs app
+        'https://fonts.gstatic.com/'
+      ],
+      'connect-src': ['\'self\''],
+      'img-src': [
+        '\'self\'',
+        // Provided mirage util extracts metadata from file. To do so it reads
+        // the file as a data url and assign it to an <image> element as source.
+        // This violates the CSP unless data protocol is allowed.
+        //
+        // TODO: Do not require data protocol to be whitelisted in CSP just for
+        //       development utilities.
+        'data:'
+      ],
+      'style-src': [
+        '\'self\'',
+        // stylesheet loaded for docs app
+        'https://fonts.googleapis.com/css'
+      ],
+      'media-src': [
+        '\'self\'',
+        // The provided mirage util already discussed for image directive does
+        // the same for other media types like video and audio.
+        //
+        // TODO: Do not require data protocol to be whitelisted in CSP just for
+        //       development utilities.
+        'data:'
+      ]
+    },
+    reportOnly: false
+  };
+};