Vue项目部署后静态资源篡改的完整性校验机制

Vue项目上线后，你通过浏览器开发者工具查看页面资源，发现某个核心JavaScript文件的执行逻辑与本地构建产物不一致。这种情况并非DNS劫持或CDN节点故障，而是静态资源在传输或存储环节被篡改。面对这种安全风险，前端团队需要在构建阶段植入完整性校验机制，让浏览器自动拒绝任何被修改过的文件。

浏览器原生支持的Subresource Integrity（SRI）特性，允许在script标签或link标签上添加integrity属性。该属性的值是一个哈希摘要，浏览器下载完资源后会计算其哈希值，与integrity属性中的值比对。如果两者不匹配，浏览器会阻止资源执行并抛出网络错误。Vue项目利用这一机制，可以在部署后形成一道自动化的校验屏障。

SRI哈希值的生成算法通常采用SHA-256、SHA-384或SHA-512。以SHA-384为例，生成命令如下：

openssl dgst -sha384 -binary dist/js/app.abc123.js | openssl base64 -A

执行后会得到类似“sha384-OLBgp1GsljhM2TJ+sbHjaiH9txEUvgdDTAzHv2P24donTt6/529l+9Ua0vFImLlb”的字符串。将这个字符串拼接到script标签的integrity属性中，同时添加crossorigin="anonymous"属性以允许跨域资源校验。

Vue CLI构建的项目可以通过配置webpack插件实现SRI属性的自动注入。在vue.config.js文件中，引入webpack-subresource-integrity插件并调整配置：

const SriPlugin = require('webpack-subresource-integrity');

module.exports = {
  configureWebpack: {
    output: {
      crossOriginLoading: 'anonymous'
    },
    plugins: [
      new SriPlugin({
        hashFuncNames: ['sha384'],
        enabled: true
      })
    ]
  }
};

这段配置做了两件事：将output.crossOriginLoading设置为anonymous，确保所有资源请求携带跨域属性；启用webpack-subresource-integrity插件，在生成的HTML文件中为所有script和link标签自动添加integrity属性。构建完成后，打开dist/index.html，你会看到每个资源引用都带上了完整的哈希值。

需要注意的是，如果项目使用了代码分割和动态导入，webpack-subresource-integrity插件同样会为异步加载的chunk文件注入校验信息。插件内部通过修改webpack的runtime代码，在动态创建script标签时自动附加integrity属性。

Vite作为新一代构建工具，其SRI支持通过vite-plugin-sri插件实现。在vite.config.js中添加以下配置：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import sri from 'vite-plugin-sri';

export default defineConfig({
  plugins: [
    vue(),
    sri({
      algorithms: ['sha384'],
      publicPath: '/'
    })
  ]
});

vite-plugin-sri插件会在构建阶段遍历所有输出的HTML、JS和CSS文件，计算哈希值并注入integrity属性。对于Vite特有的ES模块导入方式，插件会处理import语句引用的资源路径，确保模块预加载时也能携带校验信息。

如果项目采用Vite的SSR模式或使用了某些边缘场景的资源加载方式，需要额外验证插件是否覆盖了所有资源类型。可以通过构建后的dist目录检查HTML文件内容，确认每个script和link标签都包含integrity属性。

静态资源托管在CDN上时，校验机制需要延伸到CDN回源和分发的每个环节。首先在构建阶段生成SRI哈希，然后将哈希值随资源一起上传到CDN。关键点在于HTML文件中的integrity属性必须与CDN上实际文件的哈希值严格对应。

一种常见的做法是在CI/CD流水线中增加校验步骤。构建完成后，脚本读取dist目录下的所有资源文件，计算每个文件的哈希值，与HTML中声明的integrity值比对。如果发现不匹配，流水线立即中断部署。示例校验脚本：

const fs = require('fs');
const crypto = require('crypto');
const path = require('path');

function verifyIntegrity(distPath) {
  const html = fs.readFileSync(path.join(distPath, 'index.html'), 'utf-8');
  const integrityRegex = /integrity="([^"]+)"/g;
  const srcRegex = /src="([^"]+)"/g;
  
  let match;
  const resources = [];
  
  while ((match = srcRegex.exec(html)) !== null) {
    const src = match[1];
    const integrityMatch = integrityRegex.exec(html);
    if (integrityMatch) {
      resources.push({ file: src, integrity: integrityMatch[1] });
    }
  }
  
  resources.forEach(({ file, integrity }) => {
    const filePath = path.join(distPath, file.replace(/^\//, ''));
    const fileContent = fs.readFileSync(filePath);
    const hash = crypto.createHash('sha384').update(fileContent).digest('base64');
    const expectedIntegrity = `sha384-${hash}`;
    
    if (expectedIntegrity !== integrity) {
      throw new Error(`Integrity mismatch for ${file}`);
    }
  });
  
  console.log('All resources verified successfully');
}

verifyIntegrity('./dist');

这段脚本在部署前执行，确保HTML中声明的哈希值与实际文件内容一致。如果CDN节点上的文件被篡改，浏览器端的SRI校验会直接拦截，用户不会执行到恶意代码。

SRI机制依赖浏览器原生支持，但在某些老旧浏览器或WebView环境中可能失效。为了构建更完整的防护体系，可以在Service Worker中实现资源缓存时的二次校验。Service Worker拦截所有网络请求，在缓存资源前计算哈希值并与预置的白名单比对。

在Vue项目的Service Worker文件中添加校验逻辑：

const INTEGRITY_MAP = {
  '/js/app.abc123.js': 'sha384-OLBgp1GsljhM2TJ+sbHjaiH9txEUvgdDTAzHv2P24donTt6/529l+9Ua0vFImLlb',
  '/css/app.def456.css': 'sha384-bNhvFhETjBxIeQeHhGjQeJhTjIeQeHhGjQeJhTjIeQeHhGjQeJhTjIeQeHhGjQe'
};

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(cachedResponse => {
      if (cachedResponse) {
        return cachedResponse;
      }
      
      return fetch(event.request).then(response => {
        return response.clone().text().then(text => {
          const hash = crypto.subtle.digest('SHA-384', new TextEncoder().encode(text))
            .then(digest => btoa(String.fromCharCode(...new Uint8Array(digest))));
          
          return hash.then(hashValue => {
            const expectedIntegrity = INTEGRITY_MAP[new URL(event.request.url).pathname];
            if (expectedIntegrity && !expectedIntegrity.includes(hashValue)) {
              throw new Error('Resource integrity check failed');
            }
            
            const cacheResponse = new Response(text, {
              headers: response.headers
            });
            caches.open('v1').then(cache => cache.put(event.request, cacheResponse));
            return cacheResponse;
          });
        });
      });
    })
  );
});

Service Worker的校验作为SRI的补充层，可以在离线场景和缓存恢复时提供额外的安全保障。但要注意Service Worker脚本本身也需要通过SRI保护，防止校验逻辑被篡改。

除了文件级别的哈希校验，还可以对整个构建产物进行数字签名。使用私钥对dist目录下的所有文件生成一个签名文件，部署时由服务器验证签名。这种方法可以防止构建产物在传输过程中被整体替换。

签名生成命令：

tar -czf dist.tar.gz dist/
openssl dgst -sha256 -sign private_key.pem -out dist.sig dist.tar.gz

服务器端验证命令：

openssl dgst -sha256 -verify public_key.pem -signature dist.sig dist.tar.gz

版本锁定则是通过package-lock.json或yarn.lock文件固定依赖版本，结合构建环境的容器化，确保每次构建产物的确定性。如果依赖版本浮动，即使源码未变，构建产物也可能不同，导致哈希值频繁变化，增加校验维护成本。

校验机制部署后，需要建立监控体系来捕获校验失败事件。浏览器端的SRI校验失败会触发全局错误事件，可以通过window.addEventListener监听：

window.addEventListener('error', event => {
  if (event.target && event.target.tagName === 'SCRIPT' && event.target.integrity) {
    const resourceUrl = event.target.src;
    const declaredIntegrity = event.target.integrity;
    
    fetch('/api/report-integrity-failure', {
      method: 'POST',
      body: JSON.stringify({
        url: resourceUrl,
        integrity: declaredIntegrity,
        timestamp: Date.now(),
        userAgent: navigator.userAgent
      }),
      headers: { 'Content-Type': 'application/json' }
    });
  }
}, true);

这段代码捕获脚本加载错误，判断是否与integrity属性相关，然后将失败信息上报到后端监控系统。后端可以统计失败频率、影响范围和地域分布，帮助快速定位是CDN节点问题还是真实的篡改攻击。

Service Worker中的校验失败同样需要上报。可以在catch块中调用navigator.sendBeacon方法发送诊断数据，确保即使页面即将卸载也能完成上报。

每次Vue项目发版时，构建产物会发生变化，所有哈希值都需要更新。这部分工作应该自动化，避免人工操作遗漏。在CI/CD流水线中，构建步骤完成后自动计算哈希值、更新HTML文件、生成校验清单，并将清单文件与构建产物一起归档。

对于使用CDN的场景，还需要考虑缓存失效的时间窗口。新版本部署后，CDN边缘节点可能仍缓存着旧版本的HTML文件，但静态资源已经更新。此时用户拿到的旧HTML中integrity值指向新资源，会导致校验失败。解决方案是在HTML文件的缓存策略上设置较短的过期时间，或者采用文件名哈希化策略，让新旧资源URL完全不同。

如果项目使用了微前端架构，主应用和子应用的资源校验需要独立管理。每个子应用构建时生成自己的SRI清单，主应用加载子应用时动态读取对应清单并设置integrity属性。这要求子应用的资源URL可预测，或者通过manifest文件暴露资源路径与哈希值的映射关系。

整个校验机制的落地，本质上是将安全左移到构建阶段，让每次部署都自带防篡改能力。从webpack插件到Vite插件，从SRI到Service Worker二次校验，再到签名验证和监控告警，每一层都在缩小攻击面。实施时优先启用SRI，这是成本最低、覆盖面最广的一步，然后根据项目的CDN架构和浏览器兼容性需求，逐步叠加其他校验手段。