---
title: Adding sub-resource integrity with Vite build
url: https://calvin.my/posts/adding-sub-resource-integrity-with-vite-build
published: 2025-11-13
updated: 2026-09-16
category: Development
tags:
- Vite
- Security
- SRI
summary: The post explains how to add Subresource Integrity hashes to assets generated by Vite builds. Because Vite does not create these hashes by default, the author uses an open-source manifest plugin, adds it to the project configuration, and rebuilds the application. The resulting manifest includes integrity values, which can be applied to rendered script tags. The plugin supports alternative hashing algorithms, including SHA-512.
---

# Adding sub-resource integrity with Vite build

## The Problem

To enable the [sub-resource integrity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity) feature, a cryptographic hash string of the resource file is required. For static files or resources hosted by a CDN, this hash string would also be static and is often provided. However, for resources generated at build time, we will need to calculate the hash string for each build.

For Vite, it does not come with the capability to generate this hash. Fortunately, several open source plugins close this gap.

* * *

## The Fix

1. We picked the [vite-plugin-manifest-sri](https://github.com/ElMassimo/vite-plugin-manifest-sri) plugin. Add it into the package.js

   ```javascript
   "devDependencies": {
     // etc
     "vite": "^7.0",
     "vite-plugin-manifest-sri": "^0.2.0"
   }
   ```

2. Install the package

   ```bash
   npm install
   ```

3. Update vite.config.js

   ```javascript
   export default defineConfig({
       plugins: [
           // etc etc
           manifestSRI(),
       ],
   });
   ```

4. Run the build and check the result

   ```bash
   npm run build
   ```

* * *

## The result

1. In the build output (e.g., public directory), look for a file named manifest.json and observe that the integrity hash string is now available.

2. Render the HTML page, and you should see:

   ```html
   <script src="app-........js" integrity="sha384-QQnj/R0s......">
   ```

* * *

## Configuration

1. SHA512 algorithm is also supported.

   ```javascript
   manifestSRI({
     algorithms: [ 'sha512' ]
   }),
   ```