Skip to content

Latest commit

 

History

History

metalsmith-html-sri

README.md

metalsmith-html-sri

npm: version npm: downloads

Snyk: vulnerabilities codecov: coverage license

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.

parallelism (optional)

Type: number Default: the number of logical CPU cores available

The maximum number of HTML files to process concurrently.

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>

Changelog

Changelog