Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

posthtml-sri

abogical269MIT2.0.1TypeScript support: included

PostHTML subresource integrity plugin

html, posthtml, posthtml-plugin, sri, subresource integrity, security

readme

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/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
            crossorigin="anonymous"
        ></script>
        <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/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/bootstrap@4.5.3/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/bootstrap@4.5.3/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/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
            crossorigin="anonymous"
        ></script>
        <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/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/bootstrap@4.5.3/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/bootstrap@4.5.3/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.