Skip to content

Latest commit

 

History

History
162 lines (127 loc) · 4.39 KB

readme.md

File metadata and controls

162 lines (127 loc) · 4.39 KB

posthtml-sri

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>

Install

npm i posthtml-sri

Usage

Example

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

basePath

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>

algorithms

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>

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.