posthtml-sri

PostHTML plugin that calculates and adds [subresource integrity (SRI)] attributes if they are not set.

Before:

``html


src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
crossorigin="anonymous"
>
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
crossorigin="anonymous"
/>



`

After:

`html







`

Install

`bash
npm i posthtml-sri
`

Usage

$3

`js
const fs = require('fs');
const posthtml = require('posthtml');
const posthtmlSri = require('posthtml-sri');

posthtml()
.use(
posthtmlSri({
/ options /
})
)
.process(html /, options /)
.then(result => fs.writeFileSync('./after.html', result.html));
`

Options

$3

Base path to look for local assets. Asset paths in the HTML are prepended with this option to find and hash the local file.

> Make sure that the local assets the HTML uses are processed first (i.e. transpiled, minified, etc.) before using this plugin to hash them correctly.

Before:
`html






`

Add option:

`js
const fs = require('fs');
const posthtml = require('posthtml');
const posthtmlSri = require('posthtml-sri');

posthtml()
.use(posthtmlSri({ basePath: 'assets' }))
.process(html)
.then(result => fs.writeFileSync('./after.html', result.html));
`

After:

`html






`

$3

Array of hash algorithms to use. By default, it follows the [ssri] default, currently ['sha512'].

Before:

`html


src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
crossorigin="anonymous"
>
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
crossorigin="anonymous"
/>


`

Add option:

`js
const fs = require('fs');
const posthtml = require('posthtml');
const posthtmlSri = require('posthtml-sri');

posthtml()
.use(posthtmlSri({ algorithms: ['sha512', 'sha384'] }))
.process(html)
.then(result => fs.writeFileSync('./after.html', result.html));
`

After:

`html






`

cache

A regular object mapping paths/URLs to integrity values. If an src
is found in the cache, the cached value will be reused. Only exact
matches are considered. By default, it uses a new empty object.

fetch

A function that takes a URL and returns a Response`. Defaults to
[Node.js' native fetch function].

[subresource integrity (sri)]: https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity
[ssri]: https://www.npmjs.com/package/ssri
[Node.js' native fetch function]: https://nodejs.org/en/blog/announcements/v21-release-announce#stable-fetchwebstreams