vite-tiptop-sri

Install

Run the following command:

1npm i vite-tiptop-sri --save-dev

How to use

Make the following changes to vite.config.js:

1import { defineConfig } from "vite";
2import sri from "vite-tiptop-sri";
3
4export default defineConfig({
5  plugins: [sri()],
6});

Then run the build command:

1npm run build

And finally check the index.html file inside the dist/ folder.

You also have the possibility of subresource integrity in manifest assets.

1import { defineConfig } from "vite";
2import sri from "vite-tiptop-sri";
3
4export default defineConfig({
5  build: {
6    manifest: true,
7  },
8  plugins: [sri({ augmentManifest: true })],
9});

By default it will get the manifest.json, but others can be specified by taking into account the output directory.

1import { defineConfig } from "vite";
2import sri from "vite-tiptop-sri";
3
4export default defineConfig({
5  build: {
6    manifest: true,
7  },
8  plugins: [
9    sri({
10      augmentManifest: true,
11      manifestPaths: ["manifest.json", "manifest-assets.json"],
12    }),
13  ],
14});

If you have a script that changes its content after the build process, you can ignore it as follows:

1import { defineConfig } from "vite";
2import sri from "vite-tiptop-sri";
3
4export default defineConfig({
5  build: {
6    manifest: true,
7  },
8  plugins: [
9    sri({
10      augmentManifest: true,
11      filesToIgnore: ["/environment.js"],
12    }),
13  ],
14});

Credits

This package was inspired by the following projects:

• rollup-plugin-sri
• vite-plugin-sri
• vite-plugin-manifest-sri

License

MIT