vite-tiptop-sri

Install

Run the following command:

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

How to use

Make the following changes to vite.config.js:

import { defineConfig } from "vite";
import sri from "vite-tiptop-sri";

export default defineConfig({
  plugins: [sri()],
});

Then run the build command:

npm run build

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

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

import { defineConfig } from "vite";
import sri from "vite-tiptop-sri";

export default defineConfig({
  build: {
    manifest: true,
  },
  plugins: [sri({ augmentManifest: true })],
});

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

import { defineConfig } from "vite";
import sri from "vite-tiptop-sri";

export default defineConfig({
  build: {
    manifest: true,
  },
  plugins: [
    sri({
      augmentManifest: true,
      manifestPaths: ["manifest.json", "manifest-assets.json"],
    }),
  ],
});

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

import { defineConfig } from "vite";
import sri from "vite-tiptop-sri";

export default defineConfig({
  build: {
    manifest: true,
  },
  plugins: [
    sri({
      augmentManifest: true,
      filesToIgnore: ["/environment.js"],
    }),
  ],
});

Credits

This package was inspired by the following projects:

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

License

MIT