Merge pull request #769 from mozilla/i740

removed unsafe-inline styles via svgo-loader

package-lock.json

@@ -1543,6 +1543,12 @@
         }
       }
     },
+    "boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
+      "dev": true
+    },
     "boom": {
       "version": "0.4.2",
       "resolved": "https://registry.npmjs.org/boom/-/boom-0.4.2.tgz",
@@ -2305,9 +2311,9 @@
       "dev": true
     },
     "coa": {
-      "version": "1.0.4",
+      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/coa/-/coa-1.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/coa/-/coa-2.0.1.tgz",
-      "integrity": "sha1-qe8VNmDWqGqL3sAomlxoTSF0Mv0=",
+      "integrity": "sha512-5wfTTO8E2/ja4jFSxePXlG5nRu5bBtL/r1HCIpJW/lzT6yDtKl0u0Z4o/Vpz32IpKmBn7HerheEZQgA9N2DarQ==",
       "dev": true,
       "requires": {
         "q": "1.5.1"
@@ -2923,6 +2929,36 @@
         }
       }
     },
+    "css-select": {
+      "version": "1.3.0-rc0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-1.3.0-rc0.tgz",
+      "integrity": "sha1-b5MZaqrnN2ZuoQNqjLFKj8t6kjE=",
+      "dev": true,
+      "requires": {
+        "boolbase": "1.0.0",
+        "css-what": "2.1.0",
+        "domutils": "1.5.1",
+        "nth-check": "1.0.1"
+      },
+      "dependencies": {
+        "domutils": {
+          "version": "1.5.1",
+          "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.5.1.tgz",
+          "integrity": "sha1-3NhIiib1Y9YQeeSMn3t+Mjc2gs8=",
+          "dev": true,
+          "requires": {
+            "dom-serializer": "0.1.0",
+            "domelementtype": "1.3.0"
+          }
+        }
+      }
+    },
+    "css-select-base-adapter": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.0.tgz",
+      "integrity": "sha1-AQKz0UYw34bD65+p9UVicBBs+ZA=",
+      "dev": true
+    },
     "css-selector-tokenizer": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.7.0.tgz",
@@ -2957,12 +2993,34 @@
         "readable-stream": "1.1.14"
       }
     },
+    "css-tree": {
+      "version": "1.0.0-alpha25",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha25.tgz",
+      "integrity": "sha512-XC6xLW/JqIGirnZuUWHXCHRaAjje2b3OIB0Vj5RIJo6mIi/AdJo30quQl5LxUl0gkXDIrTrFGbMlcZjyFplz1A==",
+      "dev": true,
+      "requires": {
+        "mdn-data": "1.1.0",
+        "source-map": "0.5.7"
+      }
+    },
     "css-unit-converter": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.1.tgz",
       "integrity": "sha1-2bkoGtz9jO2TW9urqDeGiX9k6ZY=",
       "dev": true
     },
+    "css-url-regex": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/css-url-regex/-/css-url-regex-1.1.0.tgz",
+      "integrity": "sha1-g4NCMMyfdMRX3lnuvRVD/uuDt+w=",
+      "dev": true
+    },
+    "css-what": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.0.tgz",
+      "integrity": "sha1-lGfQMsOM+u+58teVASUwYvh/ob0=",
+      "dev": true
+    },
     "cssesc": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-0.1.0.tgz",
@@ -3010,13 +3068,24 @@
       }
     },
     "csso": {
-      "version": "2.3.2",
+      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/csso/-/csso-2.3.2.tgz",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-3.5.0.tgz",
-      "integrity": "sha1-3dUsWHAz9J6Utx/FVWnyUuj/X4U=",
+      "integrity": "sha512-WtJjFP3ZsSdWhiZr4/k1B9uHPgYjFYnDxfbaJxk1hz5PDLIJ5BCRWkJqaztZ0DbP8d2ZIVwUPIJb2YmCwkPaMw==",
       "dev": true,
       "requires": {
-        "clap": "1.2.3",
+        "css-tree": "1.0.0-alpha.27"
-        "source-map": "0.5.7"
+      },
+      "dependencies": {
+        "css-tree": {
+          "version": "1.0.0-alpha.27",
+          "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.27.tgz",
+          "integrity": "sha512-BAYp9FyN4jLXjfvRpTDchBllDptqlK9I7OsagXCG9Am5C+5jc8eRZHgqb9x500W2OKS14MMlpQc/nmh/aA7TEQ==",
+          "dev": true,
+          "requires": {
+            "mdn-data": "1.1.0",
+            "source-map": "0.5.7"
+          }
+        }
       }
     },
     "cssom": {
@@ -9324,6 +9393,12 @@
         "unist-util-visit": "1.3.0"
       }
     },
+    "mdn-data": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-1.1.0.tgz",
+      "integrity": "sha512-jC6B3BFC07cCOU8xx1d+sQtDkVIpGKWv4TzK7pN7PyObdbwlIFJbHYk8ofvr0zrU8SkV1rSi87KAHhWCdLGw1Q==",
+      "dev": true
+    },
     "media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -10212,6 +10287,15 @@
         }
       }
     },
+    "nth-check": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.1.tgz",
+      "integrity": "sha1-mSms32KPwsQQmN6rgqxYDPFJquQ=",
+      "dev": true,
+      "requires": {
+        "boolbase": "1.0.0"
+      }
+    },
     "num2fraction": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
@@ -11939,6 +12023,16 @@
         }
       }
     },
+    "object.getownpropertydescriptors": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz",
+      "integrity": "sha1-h1jIRvW0B62rDyNuCYbxSwUcqhY=",
+      "dev": true,
+      "requires": {
+        "define-properties": "1.1.2",
+        "es-abstract": "1.10.0"
+      }
+    },
     "object.omit": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/object.omit/-/object.omit-2.0.1.tgz",
@@ -11966,6 +12060,18 @@
         }
       }
     },
+    "object.values": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.0.4.tgz",
+      "integrity": "sha1-5STaCbT2b/Bd9FdUbscqyZ8TBpo=",
+      "dev": true,
+      "requires": {
+        "define-properties": "1.1.2",
+        "es-abstract": "1.10.0",
+        "function-bind": "1.1.1",
+        "has": "1.0.1"
+      }
+    },
     "obuf": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.1.tgz",
@@ -15532,6 +15638,42 @@
         "postcss": "5.2.18",
         "postcss-value-parser": "3.3.0",
         "svgo": "0.7.2"
+      },
+      "dependencies": {
+        "coa": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/coa/-/coa-1.0.4.tgz",
+          "integrity": "sha1-qe8VNmDWqGqL3sAomlxoTSF0Mv0=",
+          "dev": true,
+          "requires": {
+            "q": "1.5.1"
+          }
+        },
+        "csso": {
+          "version": "2.3.2",
+          "resolved": "https://registry.npmjs.org/csso/-/csso-2.3.2.tgz",
+          "integrity": "sha1-3dUsWHAz9J6Utx/FVWnyUuj/X4U=",
+          "dev": true,
+          "requires": {
+            "clap": "1.2.3",
+            "source-map": "0.5.7"
+          }
+        },
+        "svgo": {
+          "version": "0.7.2",
+          "resolved": "https://registry.npmjs.org/svgo/-/svgo-0.7.2.tgz",
+          "integrity": "sha1-n1dyQTlSE1xv779Ar+ak+qiLS7U=",
+          "dev": true,
+          "requires": {
+            "coa": "1.0.4",
+            "colors": "1.1.2",
+            "csso": "2.3.2",
+            "js-yaml": "3.7.0",
+            "mkdirp": "0.5.1",
+            "sax": "1.2.1",
+            "whet.extend": "0.9.9"
+          }
+        }
       }
     },
     "postcss-unique-selectors": {
@@ -17295,6 +17437,12 @@
         "safe-buffer": "5.1.1"
       }
     },
+    "stable": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.6.tgz",
+      "integrity": "sha1-kQ9dKu17Ugxud3SZwfMuE5/eyxA=",
+      "dev": true
+    },
     "stack-trace": {
       "version": "0.0.10",
       "resolved": "https://registry.npmjs.org/stack-trace/-/stack-trace-0.0.10.tgz",
@@ -17963,18 +18111,58 @@
       "dev": true
     },
     "svgo": {
-      "version": "0.7.2",
+      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/svgo/-/svgo-0.7.2.tgz",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.0.5.tgz",
-      "integrity": "sha1-n1dyQTlSE1xv779Ar+ak+qiLS7U=",
+      "integrity": "sha512-nYrifviB77aNKDNKKyuay3M9aYiK6Hv5gJVDdjj2ZXTQmI8WZc8+UPLR5IpVlktJfSu3co/4XcWgrgI6seGBPg==",
       "dev": true,
       "requires": {
-        "coa": "1.0.4",
+        "coa": "2.0.1",
         "colors": "1.1.2",
-        "csso": "2.3.2",
+        "css-select": "1.3.0-rc0",
-        "js-yaml": "3.7.0",
+        "css-select-base-adapter": "0.1.0",
+        "css-tree": "1.0.0-alpha25",
+        "css-url-regex": "1.1.0",
+        "csso": "3.5.0",
+        "js-yaml": "3.10.0",
         "mkdirp": "0.5.1",
-        "sax": "1.2.1",
+        "object.values": "1.0.4",
-        "whet.extend": "0.9.9"
+        "sax": "1.2.4",
+        "stable": "0.1.6",
+        "unquote": "1.1.1",
+        "util.promisify": "1.0.0"
+      },
+      "dependencies": {
+        "esprima": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.0.tgz",
+          "integrity": "sha512-oftTcaMu/EGrEIu904mWteKIv8vMuOgGYo7EhVJJN00R/EED9DCua/xxHRdYnKtcECzVg7xOWhflvJMnqcFZjw==",
+          "dev": true
+        },
+        "js-yaml": {
+          "version": "3.10.0",
+          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.10.0.tgz",
+          "integrity": "sha512-O2v52ffjLa9VeM43J4XocZE//WT9N0IiwDa3KSHH7Tu8CtH+1qM8SIZvnsTh6v+4yFy5KUY3BHUVwjpfAWsjIA==",
+          "dev": true,
+          "requires": {
+            "argparse": "1.0.10",
+            "esprima": "4.0.0"
+          }
+        },
+        "sax": {
+          "version": "1.2.4",
+          "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
+          "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
+          "dev": true
+        }
+      }
+    },
+    "svgo-loader": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/svgo-loader/-/svgo-loader-2.1.0.tgz",
+      "integrity": "sha512-G9KGgXaSn+F05HtIViNmy3hT2TZsnqtq10QnmYlaoc+ITd5SGQckaH7v066Noq9cOjMqA6s2AXHDiNAUItfHuw==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "1.1.0"
       }
     },
     "symbol": {
@@ -18720,6 +18908,12 @@
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
       "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw="
     },
+    "unquote": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/unquote/-/unquote-1.1.1.tgz",
+      "integrity": "sha1-j97XMk7G6IoP+LkF58CYzcCG1UQ=",
+      "dev": true
+    },
     "unset-value": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unset-value/-/unset-value-1.0.0.tgz",
@@ -18933,6 +19127,16 @@
       "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
       "dev": true
     },
+    "util.promisify": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/util.promisify/-/util.promisify-1.0.0.tgz",
+      "integrity": "sha512-i+6qA2MPhvoKLuxnJNpXAGhg7HphQOSUq2LKMZD0m15EiskXUkMvKdF4Uui0WYeCUGea+o2cw/ZuwehtfsrNkA==",
+      "dev": true,
+      "requires": {
+        "define-properties": "1.1.2",
+        "object.getownpropertydescriptors": "2.0.3"
+      }
+    },
     "utils-merge": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",

package.json

@@ -102,6 +102,8 @@
     "stylelint": "^9.1.1",
     "stylelint-config-standard": "^18.1.0",
     "stylelint-no-unsupported-browser-features": "^2.0.0",
+    "svgo": "^1.0.5",
+    "svgo-loader": "^2.1.0",
     "testpilot-ga": "^0.3.0",
     "val-loader": "^1.1.0",
     "webpack": "^3.11.0",

server/routes/index.js

@@ -36,11 +36,7 @@ module.exports = function(app) {
           ],
           imgSrc: ["'self'", 'https://www.google-analytics.com'],
           scriptSrc: ["'self'"],
-          styleSrc: [
+          styleSrc: ["'self'", 'https://code.cdn.mozilla.net'],
-            "'self'",
-            "'unsafe-inline'",
-            'https://code.cdn.mozilla.net'
-          ],
           fontSrc: ["'self'", 'https://code.cdn.mozilla.net'],
           formAction: ["'none'"],
           frameAncestors: ["'none'"],

webpack.config.js

@@ -89,12 +89,29 @@ module.exports = {
         ]
       },
       {
-        test: /\.(svg|png|jpg)$/,
+        test: /\.(png|jpg)$/,
         loader: 'file-loader',
         options: {
           name: '[name].[hash:8].[ext]'
         }
       },
+      {
+        test: /\.svg$/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              name: '[name].[hash:8].[ext]'
+            }
+          },
+          {
+            loader: 'svgo-loader',
+            options: {
+              plugins: [{ convertStyleToAttrs: true }, { removeTitle: true }]
+            }
+          }
+        ]
+      },
       {
         test: /\.css$/,
         use: ExtractTextPlugin.extract({