Implement subresource integrity (#772)

* Implement subresource integrity Adds hashes for files so the browser can check that the file it downloaded is the one the html file asked for. * Fix lint and use sha512
u-wave · Oct 18, 2017 · 6922598 · 6922598
1 parent b11be02
commit 6922598
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 17 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -147,6 +147,7 @@
     "webpack-common-shake": "^1.5.3",
     "webpack-dev-middleware": "^1.12.0",
     "webpack-hot-middleware": "^2.19.1",
+    "webpack-subresource-integrity": "^1.0.1",
     "yaml-loader": "^0.5.0"
   },
   "scripts": {

diff --git a/src/index.html b/src/index.html
@@ -11,10 +11,6 @@
       <link rel="shortcut icon" href="<%= htmlWebpackPlugin.files.favicon %>">
     <% } %>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,600italic,400italic">
-
-    <% for (const file in htmlWebpackPlugin.files.css) { %>
-      <link href="<%= htmlWebpackPlugin.files.css[file] %>" rel="stylesheet">
-    <% } %>
   </head>
   <body>
     <div id="app">
@@ -28,8 +24,5 @@
       <% } %>
     </div>
     <script id="u-wave-config" type="application/json">{}</script>
-    <% for (const chunk in htmlWebpackPlugin.files.chunks) { %>
-      <script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
-    <% } %>
   </body>
 </html>
diff --git a/src/password-reset.html b/src/password-reset.html
@@ -5,17 +5,10 @@
     <title><%= htmlWebpackPlugin.options.title %></title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,600italic,400italic">
-
-    <% for (const file in htmlWebpackPlugin.files.css) { %>
-      <link href="<%= htmlWebpackPlugin.files.css[file] %>" rel="stylesheet">
-    <% } %>
   </head>
   <body>
     <div id="app"></div>
     <script id="u-wave-config" type="application/json"></script>
     <script id="reset-data" type="text/plain"></script>
-    <% for (const chunk in htmlWebpackPlugin.files.chunks) { %>
-      <script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
-    <% } %>
   </body>
 </html>
diff --git a/webpack.config.js b/webpack.config.js
@@ -46,14 +46,13 @@ const plugins = [
   ]),
   new HtmlPlugin({
     chunks: [ 'app' ],
-    inject: false,
     template: './index.html',
+    title: 'üWave',
     minify: nodeEnv === 'production' ? htmlMinifierOptions : false,
     loadingScreen: () => require('./tasks/utils/renderLoadingScreen')()
   }),
   new HtmlPlugin({
     chunks: [ 'passwordReset' ],
-    inject: false,
     template: './password-reset.html',
     filename: 'password-reset.html',
     title: 'Reset Password',
@@ -78,6 +77,7 @@ if (nodeEnv === 'production') {
   } = require('webpack');
   const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
   const CommonShakePlugin = require('webpack-common-shake').Plugin;
+  const SriPlugin = require('webpack-subresource-integrity');
 
   const compressible = /\.(js|css|svg|mp3)$/;
 
@@ -117,6 +117,9 @@ if (nodeEnv === 'production') {
           cb(null, buffer);
         }
       }
+    }),
+    new SriPlugin({
+      hashFuncNames: [ 'sha512' ]
     })
   );
 }
@@ -176,7 +179,8 @@ module.exports = {
   output: {
     publicPath: '/',
     path: path.join(__dirname, 'public'),
-    filename: nodeEnv === 'production' ? '[name]_[chunkhash:7].js' : '[name]_dev.js'
+    filename: nodeEnv === 'production' ? '[name]_[chunkhash:7].js' : '[name]_dev.js',
+    crossOriginLoading: 'anonymous'
   },
   plugins,
   module: {