feat(@angular/cli): support subresource integrity validation

Author: Charles Lyding

package.json

@@ -97,6 +97,7 @@
     "webpack-dev-middleware": "~1.12.0",
     "webpack-dev-server": "~2.7.1",
     "webpack-merge": "^4.1.0",
+    "webpack-subresource-integrity": "^1.0.1",
     "zone.js": "^0.8.14"
   },
   "devDependencies": {

packages/@angular/cli/commands/build.ts

@@ -184,6 +184,13 @@ export const baseBuildCommandOptions: any = [
     // aliases: ['eac'],  // We should not have shorthand aliases for experimental flags.
     description: '(Experimental) Use new Angular Compiler (Angular version 5 and greater only).',
     default: AngularCompilerPlugin.isSupported()
+  },
+  {
+    name: 'subresource-integrity',
+    type: Boolean,
+    default: false,
+    aliases: ['sri'],
+    description: 'Enables the use of subresource integrity validation.'
   }
 ];
 

packages/@angular/cli/models/build-options.ts

@@ -26,4 +26,5 @@ export interface BuildOptions {
   buildOptimizer?: boolean;
   namedChunks?: boolean;
   experimentalAngularCompiler?: boolean;
+  subresourceIntegrity?: boolean;
 }

packages/@angular/cli/models/webpack-configs/browser.ts

@@ -2,6 +2,7 @@ import * as fs from 'fs';
 import * as webpack from 'webpack';
 import * as path from 'path';
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const SubresourceIntegrityPlugin = require('webpack-subresource-integrity');
 
 import { packageChunkSort } from '../../utilities/package-chunk-sort';
 import { BaseHrefWebpackPlugin } from '../../lib/base-href-webpack';
@@ -60,7 +61,16 @@ export function getBrowserConfig(wco: WebpackConfigOptions) {
     }));
   }
 
+  if (buildOptions.subresourceIntegrity) {
+    extraPlugins.push(new SubresourceIntegrityPlugin({
+      hashFuncNames: ['sha384']
+    }));
+  }
+
   return {
+    output: {
+      crossOriginLoading: buildOptions.subresourceIntegrity ? 'anonymous' : false
+    },
     plugins: [
       new HtmlWebpackPlugin({
         template: path.resolve(appRoot, appConfig.index),

packages/@angular/cli/package.json

@@ -81,6 +81,7 @@
     "webpack-dev-middleware": "~1.12.0",
     "webpack-dev-server": "~2.7.1",
     "webpack-merge": "^4.1.0",
+    "webpack-subresource-integrity": "^1.0.1",
     "zone.js": "^0.8.14"
   },
   "optionalDependencies": {

packages/@angular/cli/tasks/eject.ts

@@ -21,6 +21,7 @@ const angularCliPlugins = require('../plugins/webpack');
 
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const SubresourceIntegrityPlugin = require('webpack-subresource-integrity');
 const SilentError = require('silent-error');
 const CircularDependencyPlugin = require('circular-dependency-plugin');
 const ConcatPlugin = require('webpack-concat-plugin');
@@ -242,6 +243,10 @@ class JsonWebpackSerializer {
           args = this._uglifyjsPlugin(plugin);
           this.variableImports['uglifyjs-webpack-plugin'] = 'UglifyJsPlugin';
           break;
+        case SubresourceIntegrityPlugin:
+          this.variableImports['webpack-subresource-integrity'] = 'SubresourceIntegrityPlugin';
+          break;
+
         default:
           if (plugin.constructor.name == 'AngularServiceWorkerPlugin') {
             this._addImport('@angular/service-worker/build/webpack', plugin.constructor.name);

tests/e2e/tests/build/subresource-integrity.ts

@@ -0,0 +1,13 @@
+import { expectFileToMatch } from '../../utils/fs';
+import { ng } from '../../utils/process';
+import { expectToFail } from '../../utils/utils';
+
+const integrityRe = /integrity="\w+-[A-Za-z0-9\/\+=]+"/;
+
+export default async function() {
+  return ng('build')
+    .then(() => expectToFail(() =>
+      expectFileToMatch('dist/index.html', integrityRe)))
+    .then(() => ng('build', '--sri'))
+    .then(() => expectFileToMatch('dist/index.html', integrityRe));
+}