metalsmith-html-sri
v2.0.3
Published
A Metalsmith to add subresource integrity attributes to HTML.
Downloads
40
Maintainers
emmercmReadme
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-sriJavaScript 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
└── jsAnd 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>