Add SRI Hash for jQuery (#1904)

Adds SRI Hash for jQuery

More info:
https://www.srihash.org/
https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity
jquery/codeorigin.jquery.com#20
http://caniuse.com/#feat=subresource-integrity

README.md

@@ -36,7 +36,7 @@ Choose one of the following options:
 * Includes:
   * [`Normalize.css`](https://necolas.github.com/normalize.css/)
     for CSS normalizations and common bug fixes
-  * [`jQuery`](https://jquery.com/) via CDN, with a local fallback
+  * [`jQuery`](https://jquery.com/) via CDN with [SRI Hash](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity) and a local fallback
   * A custom build of [`Modernizr`](https://modernizr.com/) for feature
     detection
   * [`Apache Server Configs`](https://github.com/h5bp/server-configs-apache)

dist/index.html

@@ -21,8 +21,7 @@
 
         <!-- Add your site or application content here -->
         <p>Hello world! This is HTML5 Boilerplate.</p>
-
-        <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
+        <script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
         <script>window.jQuery || document.write('<script src="js/vendor/jquery-3.1.0.min.js"><\/script>')</script>
         <script src="js/plugins.js"></script>
         <script src="js/main.js"></script>

gulpfile.babel.js

@@ -14,6 +14,7 @@ import runSequence from 'run-sequence';
 import archiver from 'archiver';
 import glob from 'glob';
 import del from 'del';
+import sri from 'node-sri'
 
 import pkg from './package.json';
 
@@ -87,10 +88,17 @@ gulp.task('copy:.htaccess', () =>
         .pipe(gulp.dest(dirs.dist))
 );
 
-gulp.task('copy:index.html', () =>
-    gulp.src(`${dirs.src}/index.html`)
-        .pipe(plugins().replace(/{{JQUERY_VERSION}}/g, pkg.devDependencies.jquery))
-        .pipe(gulp.dest(dirs.dist))
+gulp.task('copy:index.html', (done) =>
+    sri.hash('node_modules/jquery/dist/jquery.min.js', (err, hash) => {
+        if (err) throw err
+
+        let version = pkg.devDependencies.jquery;
+        gulp.src(`${dirs.src}/index.html`)
+            .pipe(plugins().replace(/{{JQUERY_VERSION}}/g, version))
+            .pipe(plugins().replace(/{{JQUERY_SRI_HASH}}/g, hash))
+            .pipe(gulp.dest(dirs.dist));
+        done();
+    })
 );
 
 gulp.task('copy:jquery', () =>

package.json

@@ -24,6 +24,7 @@
     "jshint": "^2.8.0",
     "jshint-stylish": "^2.0.1",
     "mocha": "^2.2.4",
+    "node-sri": "^1.1.1",
     "normalize.css": "4.2.0",
     "run-sequence": "^1.0.2",
     "travis-after-all": "^1.4.4"

src/index.html

@@ -21,8 +21,7 @@
 
         <!-- Add your site or application content here -->
         <p>Hello world! This is HTML5 Boilerplate.</p>
-
-        <script src="https://code.jquery.com/jquery-{{JQUERY_VERSION}}.min.js"></script>
+        <script src="https://code.jquery.com/jquery-{{JQUERY_VERSION}}.min.js" integrity="{{JQUERY_SRI_HASH}}" crossorigin="anonymous"></script>
         <script>window.jQuery || document.write('<script src="js/vendor/jquery-{{JQUERY_VERSION}}.min.js"><\/script>')</script>
         <script src="js/plugins.js"></script>
         <script src="js/main.js"></script>