Metalsmith-html-sri NPM

metalsmith-html-sri

A Metalsmith plugin to add subresource integrity attributes to HTML.

Subresource integrity cryptographic hashes are used to ensure that resources such as JavaScript files are delivered without unexpected manipulation.

This plugin works with both local and remote resources.

Installation

npm install --save metalsmith-html-sri

JavaScript Usage

import Metalsmith from 'metalsmith';
import sri from 'metalsmith-html-sri';

Metalsmith(__dirname)
    .use(sri({
        // options here
    }))
    .build((err) => {
        if (err) {
            throw err;
        }
    });

Options

`html` (optional)

Type: string Default: "**/*.html"

A micromatch glob pattern to find HTML files.

`tags` (optional)

Type: object Default:

{
    "link": {
        "attribute": "href",
        "selector": "[rel=\"stylesheet\"]"
    },
    "script": {
        "attribute": "src",
        "selector": ":not([type]), [type!=\"module\"]"
    }
}

An object of what tags to add an integrity attribute to.

selectors are processed by cheerio which should have near complete parity with jQuery.

`ignoreResources` (optional)

Type: string[] Default: []

An array of regular expressions of resources to be ignored.

`algorithm` (optional)

Type: string | string[] Default: "sha384"

Either a string or an array of strings of hashing algorithms to use.

Valid hashing algorithms: sha256, sha384, sha512.

Example HTML

Example Input

Given a file tree:

.
├── index.html
└── static
    ├── bootstrap.bundle.min.js
    ├── css
    │   └── bootstrap.min.css
    └── js

And index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    </head>
    <body>
        <script src="/static/js/bootstrap.bundle.min.js"></script>
    </body>
</html>

Example Output

This plugin will change the contents of index.html to something similar to:

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="/static/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
    </head>
    <body>
        <script src="/static/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    </body>
</html>