vite-plugin-sri4 1.8.3 → 1.8.6

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) {
@@ -20,10 +21,15 @@ function log(message, options) {
 
 function computeSri(content, algorithm = 'sha384') {
   try {
-    const hash = node_crypto.createHash(algorithm)
-      .update(content)
-      .digest('base64');
-    return `${algorithm}-${hash}`;
+    const hash = node_crypto.createHash(algorithm);
+    if (Buffer.isBuffer(content) || content instanceof Uint8Array) {
+      hash.update(content);
+    } else if (typeof content === 'string') {
+      hash.update(Buffer.from(content, 'utf-8'));
+    } else {
+      throw new Error('Invalid content type');
+    }
+    return `${algorithm}-${hash.digest('base64')}`;
   } catch (error) {
     console.error(`${LOG_PREFIX} Failed to compute SRI hash: ${error}`);
     return null;
@@ -49,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;
@@ -66,23 +82,29 @@ function hasCrossOriginAttr(tag) {
 }
 
 function getBundleKey(url, base = '') {
-  // 嘗試各種可能的路徑格式
-  const possiblePaths = [
-    url,
-    url.replace(/^\//, ''),
-    url.replace(/^\/static\//, ''),
-    url.replace(/^static\//, ''),
-    url.replace(base, ''),
-    url.replace(base, '').replace(/^\//, '')
+  // Remove base prefix if exists
+  let cleanUrl = url.startsWith(base) ? url.slice(base.length) : url;
+  // Remove leading slash
+  cleanUrl = cleanUrl.startsWith('/') ? cleanUrl.slice(1) : cleanUrl;
+
+  // Try different path combinations
+  const paths = [
+    cleanUrl,
+    `static/${cleanUrl}`,
+    cleanUrl.replace(/^static\//, '')
   ];
 
-  // 移除 hash 後的版本
-  const withoutHash = url.replace(/-[a-zA-Z0-9]+\.([^.]+)$/, '.$1');
-  if (withoutHash !== url) {
-    possiblePaths.push(...getBundleKey(withoutHash, base));
+  // Remove hash part if exists and try again
+  const withoutHash = cleanUrl.replace(/-[a-zA-Z0-9]+\.([^.]+)$/, '.$1');
+  if (withoutHash !== cleanUrl) {
+    paths.push(...[
+      withoutHash,
+      `static/${withoutHash}`,
+      withoutHash.replace(/^static\//, '')
+    ]);
   }
 
-  return [...new Set(possiblePaths)];
+  return [...new Set(paths)];
 }
 
 async function processTag(tag, url, options, bundle, base = '') {
@@ -128,6 +150,10 @@ async function processTag(tag, url, options, bundle, base = '') {
   // 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]) {
@@ -137,8 +163,29 @@ async function processTag(tag, url, options, bundle, base = '') {
     }
   }
 
-  if (bundleItem) {
-    const source = bundleItem.type === 'chunk' ? bundleItem.code : bundleItem.source;
+  if (!bundleItem) {
+    log(`Bundle item not found for ${url}`, options);
+    if (!options.ignoreMissingAsset) {
+      console.warn(`${LOG_PREFIX} Asset not found in bundle: ${url}`);
+      log(`Available bundle keys:`, options);
+      Object.keys(bundle).forEach(key => log(`- ${key}`, options));
+    } else {
+      log(`Ignoring missing asset due to ignoreMissingAsset option`, 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);
@@ -148,9 +195,11 @@ async function processTag(tag, url, options, bundle, base = '') {
       log(`New tag: ${newTag}`, options);
       return newTag;
     }
-  } else {
-    log(`No bundle item found for ${url}`, options);
-    log(`Available bundle keys: ${Object.keys(bundle).join(', ')}`, options);
+  } catch (error) {
+    log(`Error processing bundle item: ${error}`, options);
+    if (!options.ignoreMissingAsset) {
+      console.error(`${LOG_PREFIX} Failed to process asset: ${url}`, error);
+    }
   }
 
   return tag;
@@ -172,6 +221,7 @@ function sri(userOptions = {}) {
       base = config.base || '';
       log('Plugin configured in ' + (isBuild ? 'build' : 'dev') + ' mode', options);
       log(`Base URL: ${base}`, options);
+      log(`ignoreMissingAsset: ${options.ignoreMissingAsset}`, options);
     },
 
     async transformIndexHtml(html, ctx) {

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) {
@@ -18,10 +19,15 @@ function log(message, options) {
 
 function computeSri(content, algorithm = 'sha384') {
   try {
-    const hash = createHash(algorithm)
-      .update(content)
-      .digest('base64');
-    return `${algorithm}-${hash}`;
+    const hash = createHash(algorithm);
+    if (Buffer.isBuffer(content) || content instanceof Uint8Array) {
+      hash.update(content);
+    } else if (typeof content === 'string') {
+      hash.update(Buffer.from(content, 'utf-8'));
+    } else {
+      throw new Error('Invalid content type');
+    }
+    return `${algorithm}-${hash.digest('base64')}`;
   } catch (error) {
     console.error(`${LOG_PREFIX} Failed to compute SRI hash: ${error}`);
     return null;
@@ -47,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;
@@ -64,23 +80,29 @@ function hasCrossOriginAttr(tag) {
 }
 
 function getBundleKey(url, base = '') {
-  // 嘗試各種可能的路徑格式
-  const possiblePaths = [
-    url,
-    url.replace(/^\//, ''),
-    url.replace(/^\/static\//, ''),
-    url.replace(/^static\//, ''),
-    url.replace(base, ''),
-    url.replace(base, '').replace(/^\//, '')
+  // Remove base prefix if exists
+  let cleanUrl = url.startsWith(base) ? url.slice(base.length) : url;
+  // Remove leading slash
+  cleanUrl = cleanUrl.startsWith('/') ? cleanUrl.slice(1) : cleanUrl;
+
+  // Try different path combinations
+  const paths = [
+    cleanUrl,
+    `static/${cleanUrl}`,
+    cleanUrl.replace(/^static\//, '')
   ];
 
-  // 移除 hash 後的版本
-  const withoutHash = url.replace(/-[a-zA-Z0-9]+\.([^.]+)$/, '.$1');
-  if (withoutHash !== url) {
-    possiblePaths.push(...getBundleKey(withoutHash, base));
+  // Remove hash part if exists and try again
+  const withoutHash = cleanUrl.replace(/-[a-zA-Z0-9]+\.([^.]+)$/, '.$1');
+  if (withoutHash !== cleanUrl) {
+    paths.push(...[
+      withoutHash,
+      `static/${withoutHash}`,
+      withoutHash.replace(/^static\//, '')
+    ]);
   }
 
-  return [...new Set(possiblePaths)];
+  return [...new Set(paths)];
 }
 
 async function processTag(tag, url, options, bundle, base = '') {
@@ -126,6 +148,10 @@ async function processTag(tag, url, options, bundle, base = '') {
   // 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]) {
@@ -135,8 +161,29 @@ async function processTag(tag, url, options, bundle, base = '') {
     }
   }
 
-  if (bundleItem) {
-    const source = bundleItem.type === 'chunk' ? bundleItem.code : bundleItem.source;
+  if (!bundleItem) {
+    log(`Bundle item not found for ${url}`, options);
+    if (!options.ignoreMissingAsset) {
+      console.warn(`${LOG_PREFIX} Asset not found in bundle: ${url}`);
+      log(`Available bundle keys:`, options);
+      Object.keys(bundle).forEach(key => log(`- ${key}`, options));
+    } else {
+      log(`Ignoring missing asset due to ignoreMissingAsset option`, 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);
@@ -146,9 +193,11 @@ async function processTag(tag, url, options, bundle, base = '') {
       log(`New tag: ${newTag}`, options);
       return newTag;
     }
-  } else {
-    log(`No bundle item found for ${url}`, options);
-    log(`Available bundle keys: ${Object.keys(bundle).join(', ')}`, options);
+  } catch (error) {
+    log(`Error processing bundle item: ${error}`, options);
+    if (!options.ignoreMissingAsset) {
+      console.error(`${LOG_PREFIX} Failed to process asset: ${url}`, error);
+    }
   }
 
   return tag;
@@ -170,6 +219,7 @@ function sri(userOptions = {}) {
       base = config.base || '';
       log('Plugin configured in ' + (isBuild ? 'build' : 'dev') + ' mode', options);
       log(`Base URL: ${base}`, options);
+      log(`ignoreMissingAsset: ${options.ignoreMissingAsset}`, options);
     },
 
     async transformIndexHtml(html, ctx) {

package/package.json

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