Enable strict content security policy

Webpack allows us to define a content security policy that utilizes
hashes to define what is, and isn't allowed to execute in the page
context.  Because we're a single page application, this means that we
can effectively defend the whole page with a few extra lines of setup.

This does not utilitize _any_ of the unsafe-* calls that content
security policy has, which should meet security standards for all uses.

Tested By:
Launched GUI, observed no functional changes, and watched console for
CSP errors.  Saw none.

Change-Id: I892df1f1b004384943be0ae6e51046054991fd45
Signed-off-by: Ed Tanous <ed.tanous@intel.com>

1 files changed, 11 insertions, 23 deletions

diff --git a/webpack.config.js b/webpack.config.js
index 1d66f12..91cbea8 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -5,12 +5,11 @@ var webpack = require('webpack');
 var autoprefixer = require('autoprefixer');
 var HtmlWebpackInlineSourcePlugin =
     require('html-webpack-inline-source-plugin');
+var CSPWebpackPlugin = require('csp-html-webpack-plugin');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
 var CopyWebpackPlugin = require('copy-webpack-plugin');
 var CompressionPlugin = require('compression-webpack-plugin');
-var AssetsPlugin = require('assets-webpack-plugin');
 var path = require('path');
-var UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 var FilterChunkWebpackPlugin = require('filter-chunk-webpack-plugin');
 var MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
@@ -75,7 +74,7 @@ module.exports = (env, options) => {
         use: 'babel-loader',
         exclude: /node_modules/
       },
-      {test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader']}, {
+      {
         // ASSET LOADER
         // Reference: https://github.com/webpack/file-loader
         // Copy png, jpg, jpeg, gif, svg, woff, woff2, ttf, eot files to
@@ -95,19 +94,9 @@ module.exports = (env, options) => {
         test: /\.html$/,
         loader: 'html-loader'
       },
-      {
+      {test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader']}, {
         test: /\.scss$/,
-        use: [
-          {
-            loader: 'style-loader'  // creates style nodes from JS strings
-          },
-          {
-            loader: 'css-loader'  // translates CSS into CommonJS
-          },
-          {
-            loader: 'sass-loader'  // compiles Sass to CSS
-          }
-        ]
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
       }
     ]
   };
@@ -117,19 +106,19 @@ module.exports = (env, options) => {
       template: './app/index.html',
       inject: 'body',
       favicon: './app/assets/images/favicon.ico',
-      inlineSource: '.(js|css)$',  // embed all javascript and css inline
       minify: {removeComments: true, collapseWhitespace: true},
 
     }),
-    new MiniCssExtractPlugin(), new HtmlWebpackInlineSourcePlugin(),
+    new CSPWebpackPlugin({
+      'base-uri': '\'self\'',
+      'object-src': '\'none\'',
+      'script-src': ['\'self\''],
+      'style-src': ['\'self\'']
+    }),
+    new MiniCssExtractPlugin(),
 
     new FilterChunkWebpackPlugin({
-      // The webpack inline source plugin will embed the css and javascript
-      // into our html, so  we need to strip it out here so it doesn't take
-      // up space
       patterns: [
-        '*.css',
-        '*.js',
         '*glyphicons-halflings-regular*.ttf',
         '*glyphicons-halflings-regular*.svg',
         '*glyphicons-halflings-regular*.eot',
@@ -138,7 +127,6 @@ module.exports = (env, options) => {
     })
   ];
 
-
   // Add build specific plugins
   if (isProd) {
     config.plugins.push(new CompressionPlugin({deleteOriginalAssets: true}));