gulp-sri-hash

Adds Subresource Integrity (SRI) hashes to HTML files.

It does so, by parsing the contents of passed in HTML files with cheerio, looking for <link rel=stylesheet href=URL> and <script src=URL> DOM-nodes, computing checksums for found referenced files, and adding integrity=<HASH> attributes in-place to respective DOM-nodes.

Inspiration for this plugin came from working with static site generators.

For an alternative approach, have a look at the gulp-sri plugin.

Installation

Install package with NPM and add it to your development dependencies:

npm install --save-dev gulp-sri-hash

Usage

var sriHash = require('gulp-sri-hash');

gulp.task('sri', function() {
  return gulp.src('./**/*.html')
    // do not modify contents of any referenced css- and js-file after this task ...
    .pipe(sriHash())
    // ... manipulating html files further, is perfectly fine
    .pipe(gulp.dest('./dist/'));
});

This will look for css and js file references contained in all html-files, calculate SRI-hashes for those files, and add integrity=<HASH> attributes for those references.

Referenced css- and js-files must be accessible from the local filesystem. In order to calculate correct hashes, style and script files should not be modified any further by build steps running later.

API

algo (optional)

Type: String
Since: v1.0.0

Select hashing algorithm. Supported algorithms: 'sha256', 'sha384', and 'sha512'.

Default: sha384

prefix (optional)

Type: String
Since: v1.1.0

Strips string from beginning of referenced URI in HTMl files. Useful if references do not match directory structure or already contain CDN hostname.

Default: ''

selector (optional)

Type: String
Since: v1.1.0

Only look for nodes matching this custom (jQuery-style) selector.

Default: 'link[href][rel=stylesheet]:not([integrity]), script[src]:not([integrity])'

relative (optional)

Type: Boolean
Since: v1.2.0

Controls whether referenced files should be resolved relative to a base folder, or relative to the location of the html file.

Inspired by https://github.com/macedigital/gulp-sri-hash/pull/1.

Default: 'false'

Example

Following snippet shows all options in action:

  // ...
  .pipe(sriHash({
    algo: 'sha512', // use strong hashing
    prefix: '/assets', // no trailing slash
    selector: 'link[href]', // limit selector,
    relative: true // assets reside relative to html file
  }))
  // ...

LICENSE

MIT License