PostHTML plugin that calculates and adds subresource integrity (SRI) attributes if they are not set.
Before:
<html>
<head>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
crossorigin="anonymous"
></script>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
crossorigin="anonymous"
/>
<script src='./base.js' integrity='sha512-MYHASH'></script>
</head>
</html>After:
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous" integrity="sha512-iceXjjbmB2rwoX93Ka6HAHP+B76IY1z0o3h+N1PeDtRSsyeetU3/0QKJqGyPJcX63zysNehggFwMC/bi7dvMig=="></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" crossorigin="anonymous" integrity="sha512-oc9+XSs1H243/FRN9Rw62Fn8EtxjEYWHXRvjS43YtueEewbS6ObfXcJNyohjHqVKFPoXXUxwc+q1K7Dee6vv9g==">
<script src='./base.js' integrity='sha512-MYHASH'></script>
</head>
</html>npm i posthtml-sriconst 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));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>
<head>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
</html>Add option:
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>
<head>
<script src="script.js" integrity="sha512-MUS7Gdcgr3In98ODhITyPjXWdWE9dezoOcyopcyYXzpFz2LrOApCRupkTwgiaS31+DhQacgbQ5T1hlGWPiBNGQ=="></script>
<link rel="stylesheet" href="style.css" integrity="sha512-CVazCeMWuNKPH6VzeuYxVGC3JKXVQB/wqncMrpHoS3wJclPNeKN+SxO/zz1A9U3s2zczk/Yx1iZEJ6+CwJW81A==">
</head>
</html>Array of hash algorithms to use. By default it follows the ssri default, currently ['sha512'].
Before:
<html>
<head>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
crossorigin="anonymous"
></script>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
crossorigin="anonymous"
/>
</head>
</html>Add option:
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>
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous" integrity="sha512-iceXjjbmB2rwoX93Ka6HAHP+B76IY1z0o3h+N1PeDtRSsyeetU3/0QKJqGyPJcX63zysNehggFwMC/bi7dvMig== sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" crossorigin="anonymous" integrity="sha512-oc9+XSs1H243/FRN9Rw62Fn8EtxjEYWHXRvjS43YtueEewbS6ObfXcJNyohjHqVKFPoXXUxwc+q1K7Dee6vv9g== sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2">
</head>
</html>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.
A function that takes a URL and returns a Response. Defaults to
node-fetch.