vite-plugin-sri4 1.8.5 → 1.8.7

package/README.md

@@ -2,27 +2,39 @@
 
 ![NPM Version](https://img.shields.io/npm/v/vite-plugin-sri4)
 [![codecov](https://codecov.io/gh/7a6163/vite-plugin-sri4/graph/badge.svg?token=GOVB4J3D19)](https://codecov.io/gh/7a6163/vite-plugin-sri4)
+![License](https://img.shields.io/npm/l/vite-plugin-sri4)
 
 A Vite plugin to generate Subresource Integrity (SRI) hashes for your assets during the build process. This plugin computes SRI hashes for JavaScript and CSS files and injects them as `integrity` and `crossorigin="anonymous"` attributes into your HTML, ensuring your resources have not been tampered with when loaded by browsers.
 
+## Table of Contents
+
+- [Features](#features)
+- [Installation](#installation)
+- [Usage](#usage)
+- [Plugin Options](#plugin-options)
+- [Example Project](#example-project)
+- [Best Practices](#best-practices)
+- [Troubleshooting](#troubleshooting)
+- [Contributing](#contributing)
+- [License](#license)
+
 ## Features
 
 - **Automatic SRI Generation:** Computes SRI hashes for assets (chunks and files) using a configurable algorithm (default is `sha384`).
 - **HTML Injection:** Automatically injects `integrity` and `crossorigin` attributes into `<script>` and `<link>` tags in your HTML.
 - **CORS Support Check:** For external resources, a CORS check is performed to verify access via `Access-Control-Allow-Origin`.
 - **Bypass Domains:** Option to specify domains to bypass SRI injection.
+- **Missing Asset Handling:** Configurable warning suppression for missing assets.
+- **Robust Content Support:** Handles various content types including strings, Buffer, and Uint8Array.
 
 ## Installation
 
-If the plugin has been published to npm:
-
 ```bash
 npm install vite-plugin-sri4 --save-dev
 ```
 
-Alternatively, if you're developing locally, you can use npm link or install via a relative path.
-
 ## Usage
+
 Add the plugin to your Vite configuration by updating your vite.config.js or vite.config.ts file:
 
 ```javascript
@@ -36,23 +48,142 @@ export default defineConfig({
       // Optional. The security hash algorithm. Defaults to "sha384".
       algorithm: 'sha384',
       // Optional. Domains to bypass SRI injection.
-      bypassDomains: ['example.com']
+      bypassDomains: ['example.com'],
+      // Optional. Suppress warnings for missing assets.
+      ignoreMissingAsset: false,
+      // Optional. Enable debug logging.
+      debug: false
     })
   ]
 });
 ```
 
-Now, when you run the build command:
+### Example HTML Output
 
-```bash
-npm run build
+Input:
+```html
+<script src="app.js"></script>
+<link rel="stylesheet" href="style.css">
 ```
 
-The plugin will process the generated bundles, compute SRI hashes, and inject the attributes into the HTML.
+Output:
+```html
+<script src="app.js" integrity="sha384-..." crossorigin="anonymous"></script>
+<link rel="stylesheet" href="style.css" integrity="sha384-..." crossorigin="anonymous">
+```
 
 ## Plugin Options
 
-* algorithm (string):
-The hash algorithm used for computing SRI. Default is sha384. You may change it to other supported algorithms like sha256.
-* bypassDomains (Array<string>):
-Array of domain names where SRI injection should be skipped. This allows external resources from specified domains to be excluded from SRI checks (for example, when they may not support CORS).
+* `algorithm` (string):
+  The hash algorithm used for computing SRI. Default is sha384. You may change it to other supported algorithms like sha256.
+* `bypassDomains` (Array<string>):
+  Array of domain names where SRI injection should be skipped. This allows external resources from specified domains to be excluded from SRI checks (for example, when they may not support CORS).
+* `ignoreMissingAsset` (boolean):
+  When true, suppresses warnings for assets that are not found in the bundle. Default is false.
+* `debug` (boolean):
+  When true, enables detailed debug logging. Default is false.
+
+## Example Project
+
+The plugin includes an example project in the `example` directory that demonstrates its usage with a simple Vite application. To try it:
+
+1. Clone the repository
+2. Install dependencies:
+   ```bash
+   npm install
+   cd example
+   npm install
+   ```
+3. Build the example:
+   ```bash
+   npm run build
+   ```
+4. Check the generated `dist/index.html` to see the SRI hashes in action
+
+The example project shows:
+- Basic setup with Vite
+- SRI hash generation for JS and CSS files
+- Handling of hashed filenames
+- Static file handling
+
+## Best Practices
+
+1. **Hash Algorithm Selection**
+   - Use `sha384` (default) for a good balance of security and performance
+   - Consider `sha512` for maximum security
+   - Avoid `sha1` as it's considered cryptographically weak
+
+2. **CORS Configuration**
+   - Ensure your CDN or hosting service supports CORS
+   - Set appropriate `Access-Control-Allow-Origin` headers
+   - Use `bypassDomains` for trusted domains that don't support CORS
+
+3. **Performance Optimization**
+   - Enable `ignoreMissingAsset` in development for faster builds
+   - Use debug mode only when troubleshooting
+
+4. **Security Considerations**
+   - Always use HTTPS for external resources
+   - Regularly update the plugin for security fixes
+   - Keep your dependencies up to date
+
+## Troubleshooting
+
+### Common Issues
+
+1. **Missing Integrity Attributes**
+   - Check if the file is in your build output
+   - Verify the file path is correct
+   - Enable debug mode to see detailed logs
+
+2. **CORS Errors**
+   - Ensure the resource supports CORS
+   - Add the domain to `bypassDomains` if needed
+   - Check network tab for CORS headers
+
+3. **Build Performance**
+   - Use `ignoreMissingAsset` if you have many external resources
+   - Disable debug mode in production
+   - Consider using a CDN for external resources
+
+### Debug Mode
+
+Enable debug mode to see detailed logs:
+
+```javascript
+sri({
+  debug: true
+})
+```
+
+This will show:
+- Asset processing steps
+- SRI hash computation
+- CORS checks
+- Missing asset warnings
+
+## Contributing
+
+We welcome contributions! Here's how you can help:
+
+1. Fork the repository
+2. Create your feature branch: `git checkout -b feature/my-feature`
+3. Commit your changes: `git commit -am 'Add some feature'`
+4. Push to the branch: `git push origin feature/my-feature`
+5. Submit a pull request
+
+Please make sure to:
+- Update the documentation
+- Add tests for new features
+- Follow the existing code style
+- Update the CHANGELOG.md
+
+## License
+
+This project is licensed under the MIT License - see the LICENSE file for details.
+
+## Support
+
+- Create an issue for bug reports
+- Star the project if you find it useful
+- Follow the author for updates

package/dist/index.cjs

@@ -9,7 +9,8 @@ const DEFAULT_OPTIONS = {
   algorithm: 'sha384',
   bypassDomains: [],
   crossorigin: 'anonymous',
-  debug: false
+  debug: false,
+  ignoreMissingAsset: false
 };
 
 function log(message, options) {
@@ -46,7 +47,7 @@ async function externalResourceIsCorsEnabled(url, options) {
     }
     return false;
   } catch (error) {
-    log(`Failed to fetch CORS headers from ${url}: ${error}`, options);
+    console.error(`${LOG_PREFIX} Failed to fetch CORS headers from ${url}`, error);
     return false;
   }
 }
@@ -54,12 +55,22 @@ async function externalResourceIsCorsEnabled(url, options) {
 function isBypassDomain(url, bypassDomains = []) {
   if (!bypassDomains.length) return false;
   try {
-    const parsedUrl = url.startsWith('//')
-      ? new URL(`http:${url}`)
-      : new URL(url, 'http://dummy');
-    return bypassDomains.some(
-      (domain) => parsedUrl.hostname === domain ||
-                 parsedUrl.hostname.endsWith(`.${domain}`)
+    let hostname = url;
+
+    if (hostname.startsWith('http://')) {
+      hostname = hostname.slice(7);
+    } else if (hostname.startsWith('https://')) {
+      hostname = hostname.slice(8);
+    } else if (hostname.startsWith('//')) {
+      hostname = hostname.slice(2);
+    }
+
+    hostname = hostname.split('/')[0];
+
+    hostname = hostname.split(':')[0];
+
+    return bypassDomains.some(domain =>
+      hostname === domain || hostname.endsWith(`.${domain}`)
     );
   } catch (e) {
     return false;
@@ -96,99 +107,12 @@ function getBundleKey(url, base = '') {
   return [...new Set(paths)];
 }
 
-async function processTag(tag, url, options, bundle, base = '') {
-  if (tag.includes('integrity=')) {
-    log(`Skip tag with existing integrity attribute: ${tag}`, options);
-    return tag;
-  }
-
-  log(`Processing tag: ${tag}`, options);
-  log(`URL: ${url}`, options);
-
-  // Handle external resources
-  if (/^(https?:)?\/\//i.test(url)) {
-    if (isBypassDomain(url, options.bypassDomains)) {
-      log(`Skip SRI for bypass domain: ${url}`, options);
-      return tag;
-    }
-
-    const corsOk = await externalResourceIsCorsEnabled(url, options);
-    if (!corsOk) {
-      log(`External resource ${url} does not support CORS`, options);
-      return tag;
-    }
-
-    try {
-      const response = await fetch(url);
-      const content = await response.arrayBuffer();
-      const hash = computeSri(Buffer.from(content), options.algorithm);
-      if (hash) {
-        log(`Computing SRI for external resource ${url}: ${hash}`, options);
-        const hasCrossOrigin = hasCrossOriginAttr(tag);
-        const crossOriginAttr = hasCrossOrigin ? '' : ` crossorigin="${options.crossorigin}"`;
-        const newTag = tag.replace(/>$/, ` integrity="${hash}"${crossOriginAttr}>`);
-        log(`New tag: ${newTag}`, options);
-        return newTag;
-      }
-    } catch (error) {
-      log(`Failed to process external resource ${url}: ${error}`, options);
-    }
-    return tag;
-  }
-
-  // Handle local resources
-  const possibleKeys = getBundleKey(url, base);
-  let bundleItem = null;
-  let source;
-
-  log(`Looking for bundle keys:`, options);
-  possibleKeys.forEach(key => log(`- ${key}`, options));
-
-  for (const key of possibleKeys) {
-    if (bundle[key]) {
-      bundleItem = bundle[key];
-      log(`Found bundle item for key: ${key}`, options);
-      break;
-    }
-  }
-
-  if (!bundleItem) {
-    log(`Available bundle keys:`, options);
-    Object.keys(bundle).forEach(key => log(`- ${key}`, options));
-    return tag;
-  }
-
-  log(`Bundle item type: ${bundleItem.type}`, options);
-
-  try {
-    if (bundleItem.type === 'chunk') {
-      source = bundleItem.code;
-      log(`Processing chunk content of length: ${source.length}`, options);
-    } else {
-      source = bundleItem.source;
-      log(`Processing asset content of length: ${source.length}`, options);
-    }
-
-    const integrity = computeSri(source, options.algorithm);
-    if (integrity) {
-      log(`Computing SRI for local resource ${url}: ${integrity}`, options);
-      const hasCrossOrigin = hasCrossOriginAttr(tag);
-      const crossOriginAttr = hasCrossOrigin ? '' : ` crossorigin="${options.crossorigin}"`;
-      const newTag = tag.replace(/>$/, ` integrity="${integrity}"${crossOriginAttr}>`);
-      log(`New tag: ${newTag}`, options);
-      return newTag;
-    }
-  } catch (error) {
-    log(`Error processing bundle item: ${error}`, options);
-  }
-
-  return tag;
-}
-
 function sri(userOptions = {}) {
   const options = { ...DEFAULT_OPTIONS, ...userOptions };
   let isBuild = false;
   let base = '';
+  const htmlFiles = new Map(); // Store HTML file info for processing
+  const sriCache = new Map(); // Cache SRI hashes
 
   return {
     name: 'vite-plugin-sri4',
@@ -200,48 +124,151 @@ function sri(userOptions = {}) {
       isBuild = config.command === 'build';
       base = config.base || '';
       log('Plugin configured in ' + (isBuild ? 'build' : 'dev') + ' mode', options);
-      log(`Base URL: ${base}`, options);
     },
 
     async transformIndexHtml(html, ctx) {
       if (!isBuild || !html) {
-        log('Skipping HTML transform in dev mode or empty HTML', options);
         return html;
       }
 
-      try {
-        log('Starting HTML transformation', options);
-        const bundle = ctx.bundle || {};
-        log(`Bundle size: ${Object.keys(bundle).length}`, options);
-
-        // Process script tags with and without quotes
-        const scriptTagRegex = /<script[^>]+src=(?:["']([^"']+)["']|([^ >]+))[^>]*>/g;
-        let match;
-        while ((match = scriptTagRegex.exec(html)) !== null) {
-          const [tag, quotedUrl, unquotedUrl] = match;
-          const url = quotedUrl || unquotedUrl;
-          log(`Processing script: ${url}`, options);
-          const newTag = await processTag(tag, url, options, bundle, base);
-          html = html.replace(tag, newTag);
+      // Store HTML file info for later processing
+      const resourceTags = [];
+
+      // Find script tags
+      const scriptTagRegex = /<script[^>]+src=(?:["']([^"']+)["']|([^ >]+))[^>]*>/g;
+      let match;
+      while ((match = scriptTagRegex.exec(html)) !== null) {
+        const [tag, quotedUrl, unquotedUrl] = match;
+        resourceTags.push({
+          tag,
+          url: quotedUrl || unquotedUrl,
+          type: 'script'
+        });
+      }
+
+      // Find link tags
+      const linkTagRegex = /<link[^>]+href=(?:["']([^"']+)["']|([^ >]+))[^>]*>/g;
+      while ((match = linkTagRegex.exec(html)) !== null) {
+        const [tag, quotedUrl, unquotedUrl] = match;
+        if (tag.includes('stylesheet') || tag.includes('modulepreload')) {
+          resourceTags.push({
+            tag,
+            url: quotedUrl || unquotedUrl,
+            type: 'link'
+          });
         }
+      }
+
+      // Store HTML file info
+      htmlFiles.set(ctx.filename, {
+        content: html,
+        resources: resourceTags
+      });
+
+      return html;
+    },
 
-        // Process link tags with and without quotes
-        const linkTagRegex = /<link[^>]+href=(?:["']([^"']+)["']|([^ >]+))[^>]*>/g;
-        while ((match = linkTagRegex.exec(html)) !== null) {
-          const [tag, quotedUrl, unquotedUrl] = match;
-          const url = quotedUrl || unquotedUrl;
-          if (tag.includes('stylesheet') || tag.includes('modulepreload')) {
-            log(`Processing link: ${url}`, options);
-            const newTag = await processTag(tag, url, options, bundle, base);
-            html = html.replace(tag, newTag);
+    async writeBundle(options, bundle) {
+      for (const [filename, htmlInfo] of htmlFiles) {
+        let content = htmlInfo.content;
+
+        // Process all resources in parallel
+        const updates = await Promise.all(
+          htmlInfo.resources.map(async ({ tag, url, type }) => {
+            if (tag.includes('integrity=')) {
+              return null;
+            }
+
+            // Handle external resources
+            if (/^(https?:)?\/\//i.test(url)) {
+              if (isBypassDomain(url, options.bypassDomains)) {
+                return null;
+              }
+
+              // Check cache first
+              if (sriCache.has(url)) {
+                return {
+                  tag,
+                  newTag: sriCache.get(url)
+                };
+              }
+
+              const corsOk = await externalResourceIsCorsEnabled(url, options);
+              if (!corsOk) {
+                return null;
+              }
+
+              try {
+                const response = await fetch(url);
+                const content = await response.arrayBuffer();
+                const hash = computeSri(Buffer.from(content), options.algorithm);
+                if (hash) {
+                  const hasCrossOrigin = hasCrossOriginAttr(tag);
+                  const crossOriginAttr = hasCrossOrigin ? '' : ` crossorigin="${options.crossorigin}"`;
+                  const newTag = tag.replace(/>$/, ` integrity="${hash}"${crossOriginAttr}>`);
+                  sriCache.set(url, newTag);
+                  return { tag, newTag };
+                }
+              } catch (error) {
+                log(`Failed to process external resource ${url}: ${error}`, options);
+              }
+              return null;
+            }
+
+            // Handle local resources
+            const possibleKeys = getBundleKey(url, base);
+            let bundleItem = null;
+
+            for (const key of possibleKeys) {
+              if (bundle[key]) {
+                bundleItem = bundle[key];
+                break;
+              }
+            }
+
+            if (!bundleItem) {
+              if (!options.ignoreMissingAsset) {
+                console.warn(`${LOG_PREFIX} Asset not found in bundle: ${url}`);
+              }
+              return null;
+            }
+
+            try {
+              const source = bundleItem.type === 'chunk' ? bundleItem.code : bundleItem.source;
+              const integrity = computeSri(source, options.algorithm);
+
+              if (integrity) {
+                const hasCrossOrigin = hasCrossOriginAttr(tag);
+                const crossOriginAttr = hasCrossOrigin ? '' : ` crossorigin="${options.crossorigin}"`;
+                const newTag = tag.replace(/>$/, ` integrity="${integrity}"${crossOriginAttr}>`);
+                return { tag, newTag };
+              }
+            } catch (error) {
+              if (!options.ignoreMissingAsset) {
+                console.error(`${LOG_PREFIX} Failed to process asset: ${url}`, error);
+              }
+            }
+
+            return null;
+          })
+        );
+
+        // Apply all updates to the HTML content
+        updates.forEach(update => {
+          if (update) {
+            content = content.replace(update.tag, update.newTag);
           }
-        }
+        });
 
-        return html;
-      } catch (error) {
-        console.error(`${LOG_PREFIX} Failed to transform HTML: ${error}`);
-        return html;
+        // Write the modified content back to the bundle
+        if (bundle[filename]) {
+          bundle[filename].source = content;
+        }
       }
+
+      // Clear the caches
+      htmlFiles.clear();
+      sriCache.clear();
     }
   };
 }

package/dist/index.js

@@ -7,7 +7,8 @@ const DEFAULT_OPTIONS = {
   algorithm: 'sha384',
   bypassDomains: [],
   crossorigin: 'anonymous',
-  debug: false
+  debug: false,
+  ignoreMissingAsset: false
 };
 
 function log(message, options) {
@@ -44,7 +45,7 @@ async function externalResourceIsCorsEnabled(url, options) {
     }
     return false;
   } catch (error) {
-    log(`Failed to fetch CORS headers from ${url}: ${error}`, options);
+    console.error(`${LOG_PREFIX} Failed to fetch CORS headers from ${url}`, error);
     return false;
   }
 }
@@ -52,12 +53,22 @@ async function externalResourceIsCorsEnabled(url, options) {
 function isBypassDomain(url, bypassDomains = []) {
   if (!bypassDomains.length) return false;
   try {
-    const parsedUrl = url.startsWith('//')
-      ? new URL(`http:${url}`)
-      : new URL(url, 'http://dummy');
-    return bypassDomains.some(
-      (domain) => parsedUrl.hostname === domain ||
-                 parsedUrl.hostname.endsWith(`.${domain}`)
+    let hostname = url;
+
+    if (hostname.startsWith('http://')) {
+      hostname = hostname.slice(7);
+    } else if (hostname.startsWith('https://')) {
+      hostname = hostname.slice(8);
+    } else if (hostname.startsWith('//')) {
+      hostname = hostname.slice(2);
+    }
+
+    hostname = hostname.split('/')[0];
+
+    hostname = hostname.split(':')[0];
+
+    return bypassDomains.some(domain =>
+      hostname === domain || hostname.endsWith(`.${domain}`)
     );
   } catch (e) {
     return false;
@@ -94,99 +105,12 @@ function getBundleKey(url, base = '') {
   return [...new Set(paths)];
 }
 
-async function processTag(tag, url, options, bundle, base = '') {
-  if (tag.includes('integrity=')) {
-    log(`Skip tag with existing integrity attribute: ${tag}`, options);
-    return tag;
-  }
-
-  log(`Processing tag: ${tag}`, options);
-  log(`URL: ${url}`, options);
-
-  // Handle external resources
-  if (/^(https?:)?\/\//i.test(url)) {
-    if (isBypassDomain(url, options.bypassDomains)) {
-      log(`Skip SRI for bypass domain: ${url}`, options);
-      return tag;
-    }
-
-    const corsOk = await externalResourceIsCorsEnabled(url, options);
-    if (!corsOk) {
-      log(`External resource ${url} does not support CORS`, options);
-      return tag;
-    }
-
-    try {
-      const response = await fetch(url);
-      const content = await response.arrayBuffer();
-      const hash = computeSri(Buffer.from(content), options.algorithm);
-      if (hash) {
-        log(`Computing SRI for external resource ${url}: ${hash}`, options);
-        const hasCrossOrigin = hasCrossOriginAttr(tag);
-        const crossOriginAttr = hasCrossOrigin ? '' : ` crossorigin="${options.crossorigin}"`;
-        const newTag = tag.replace(/>$/, ` integrity="${hash}"${crossOriginAttr}>`);
-        log(`New tag: ${newTag}`, options);
-        return newTag;
-      }
-    } catch (error) {
-      log(`Failed to process external resource ${url}: ${error}`, options);
-    }
-    return tag;
-  }
-
-  // Handle local resources
-  const possibleKeys = getBundleKey(url, base);
-  let bundleItem = null;
-  let source;
-
-  log(`Looking for bundle keys:`, options);
-  possibleKeys.forEach(key => log(`- ${key}`, options));
-
-  for (const key of possibleKeys) {
-    if (bundle[key]) {
-      bundleItem = bundle[key];
-      log(`Found bundle item for key: ${key}`, options);
-      break;
-    }
-  }
-
-  if (!bundleItem) {
-    log(`Available bundle keys:`, options);
-    Object.keys(bundle).forEach(key => log(`- ${key}`, options));
-    return tag;
-  }
-
-  log(`Bundle item type: ${bundleItem.type}`, options);
-
-  try {
-    if (bundleItem.type === 'chunk') {
-      source = bundleItem.code;
-      log(`Processing chunk content of length: ${source.length}`, options);
-    } else {
-      source = bundleItem.source;
-      log(`Processing asset content of length: ${source.length}`, options);
-    }
-
-    const integrity = computeSri(source, options.algorithm);
-    if (integrity) {
-      log(`Computing SRI for local resource ${url}: ${integrity}`, options);
-      const hasCrossOrigin = hasCrossOriginAttr(tag);
-      const crossOriginAttr = hasCrossOrigin ? '' : ` crossorigin="${options.crossorigin}"`;
-      const newTag = tag.replace(/>$/, ` integrity="${integrity}"${crossOriginAttr}>`);
-      log(`New tag: ${newTag}`, options);
-      return newTag;
-    }
-  } catch (error) {
-    log(`Error processing bundle item: ${error}`, options);
-  }
-
-  return tag;
-}
-
 function sri(userOptions = {}) {
   const options = { ...DEFAULT_OPTIONS, ...userOptions };
   let isBuild = false;
   let base = '';
+  const htmlFiles = new Map(); // Store HTML file info for processing
+  const sriCache = new Map(); // Cache SRI hashes
 
   return {
     name: 'vite-plugin-sri4',
@@ -198,48 +122,151 @@ function sri(userOptions = {}) {
       isBuild = config.command === 'build';
       base = config.base || '';
       log('Plugin configured in ' + (isBuild ? 'build' : 'dev') + ' mode', options);
-      log(`Base URL: ${base}`, options);
     },
 
     async transformIndexHtml(html, ctx) {
       if (!isBuild || !html) {
-        log('Skipping HTML transform in dev mode or empty HTML', options);
         return html;
       }
 
-      try {
-        log('Starting HTML transformation', options);
-        const bundle = ctx.bundle || {};
-        log(`Bundle size: ${Object.keys(bundle).length}`, options);
-
-        // Process script tags with and without quotes
-        const scriptTagRegex = /<script[^>]+src=(?:["']([^"']+)["']|([^ >]+))[^>]*>/g;
-        let match;
-        while ((match = scriptTagRegex.exec(html)) !== null) {
-          const [tag, quotedUrl, unquotedUrl] = match;
-          const url = quotedUrl || unquotedUrl;
-          log(`Processing script: ${url}`, options);
-          const newTag = await processTag(tag, url, options, bundle, base);
-          html = html.replace(tag, newTag);
+      // Store HTML file info for later processing
+      const resourceTags = [];
+
+      // Find script tags
+      const scriptTagRegex = /<script[^>]+src=(?:["']([^"']+)["']|([^ >]+))[^>]*>/g;
+      let match;
+      while ((match = scriptTagRegex.exec(html)) !== null) {
+        const [tag, quotedUrl, unquotedUrl] = match;
+        resourceTags.push({
+          tag,
+          url: quotedUrl || unquotedUrl,
+          type: 'script'
+        });
+      }
+
+      // Find link tags
+      const linkTagRegex = /<link[^>]+href=(?:["']([^"']+)["']|([^ >]+))[^>]*>/g;
+      while ((match = linkTagRegex.exec(html)) !== null) {
+        const [tag, quotedUrl, unquotedUrl] = match;
+        if (tag.includes('stylesheet') || tag.includes('modulepreload')) {
+          resourceTags.push({
+            tag,
+            url: quotedUrl || unquotedUrl,
+            type: 'link'
+          });
         }
+      }
+
+      // Store HTML file info
+      htmlFiles.set(ctx.filename, {
+        content: html,
+        resources: resourceTags
+      });
+
+      return html;
+    },
 
-        // Process link tags with and without quotes
-        const linkTagRegex = /<link[^>]+href=(?:["']([^"']+)["']|([^ >]+))[^>]*>/g;
-        while ((match = linkTagRegex.exec(html)) !== null) {
-          const [tag, quotedUrl, unquotedUrl] = match;
-          const url = quotedUrl || unquotedUrl;
-          if (tag.includes('stylesheet') || tag.includes('modulepreload')) {
-            log(`Processing link: ${url}`, options);
-            const newTag = await processTag(tag, url, options, bundle, base);
-            html = html.replace(tag, newTag);
+    async writeBundle(options, bundle) {
+      for (const [filename, htmlInfo] of htmlFiles) {
+        let content = htmlInfo.content;
+
+        // Process all resources in parallel
+        const updates = await Promise.all(
+          htmlInfo.resources.map(async ({ tag, url, type }) => {
+            if (tag.includes('integrity=')) {
+              return null;
+            }
+
+            // Handle external resources
+            if (/^(https?:)?\/\//i.test(url)) {
+              if (isBypassDomain(url, options.bypassDomains)) {
+                return null;
+              }
+
+              // Check cache first
+              if (sriCache.has(url)) {
+                return {
+                  tag,
+                  newTag: sriCache.get(url)
+                };
+              }
+
+              const corsOk = await externalResourceIsCorsEnabled(url, options);
+              if (!corsOk) {
+                return null;
+              }
+
+              try {
+                const response = await fetch(url);
+                const content = await response.arrayBuffer();
+                const hash = computeSri(Buffer.from(content), options.algorithm);
+                if (hash) {
+                  const hasCrossOrigin = hasCrossOriginAttr(tag);
+                  const crossOriginAttr = hasCrossOrigin ? '' : ` crossorigin="${options.crossorigin}"`;
+                  const newTag = tag.replace(/>$/, ` integrity="${hash}"${crossOriginAttr}>`);
+                  sriCache.set(url, newTag);
+                  return { tag, newTag };
+                }
+              } catch (error) {
+                log(`Failed to process external resource ${url}: ${error}`, options);
+              }
+              return null;
+            }
+
+            // Handle local resources
+            const possibleKeys = getBundleKey(url, base);
+            let bundleItem = null;
+
+            for (const key of possibleKeys) {
+              if (bundle[key]) {
+                bundleItem = bundle[key];
+                break;
+              }
+            }
+
+            if (!bundleItem) {
+              if (!options.ignoreMissingAsset) {
+                console.warn(`${LOG_PREFIX} Asset not found in bundle: ${url}`);
+              }
+              return null;
+            }
+
+            try {
+              const source = bundleItem.type === 'chunk' ? bundleItem.code : bundleItem.source;
+              const integrity = computeSri(source, options.algorithm);
+
+              if (integrity) {
+                const hasCrossOrigin = hasCrossOriginAttr(tag);
+                const crossOriginAttr = hasCrossOrigin ? '' : ` crossorigin="${options.crossorigin}"`;
+                const newTag = tag.replace(/>$/, ` integrity="${integrity}"${crossOriginAttr}>`);
+                return { tag, newTag };
+              }
+            } catch (error) {
+              if (!options.ignoreMissingAsset) {
+                console.error(`${LOG_PREFIX} Failed to process asset: ${url}`, error);
+              }
+            }
+
+            return null;
+          })
+        );
+
+        // Apply all updates to the HTML content
+        updates.forEach(update => {
+          if (update) {
+            content = content.replace(update.tag, update.newTag);
           }
-        }
+        });
 
-        return html;
-      } catch (error) {
-        console.error(`${LOG_PREFIX} Failed to transform HTML: ${error}`);
-        return html;
+        // Write the modified content back to the bundle
+        if (bundle[filename]) {
+          bundle[filename].source = content;
+        }
       }
+
+      // Clear the caches
+      htmlFiles.clear();
+      sriCache.clear();
     }
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-sri4",
-  "version": "1.8.5",
+  "version": "1.8.7",
   "description": "A Vite plugin to generate Subresource Integrity (SRI) hashes for output files.",
   "type": "module",
   "main": "./dist/index.cjs",