如何为<a>标签实现类似CSP/SRI的资源完整性自动校验？

这个需求太贴合实际了——普通用户哪愿意手动算哈希校验啊！可惜原生的SRI确实只支持<script>和<link>标签，没法直接用到<a>的下载场景。不过我们可以通过几种方案来实现类似的自动校验效果，给你梳理一下：

方案一：前端JavaScript拦截点击并手动校验 #

这是最容易实现的方案，核心思路是给<a>标签加上自定义的哈希属性，拦截点击事件后用fetch下载文件、计算哈希并对比，校验通过再触发下载。

示例代码 #

<!-- 给a标签添加自定义的data-integrity属性，格式和SRI一致 -->
<a href="https://cdndomain.com/path/to/file.zip" 
   data-integrity="sha256-abcdefghijklmnopqrstuvwxyz1234567890==" 
   class="verified-download"
   download="file.zip">
  安全下载文件
</a>

<script>
// 给所有带verified-download类的链接绑定点击事件
document.querySelectorAll('.verified-download').forEach(link => {
  link.addEventListener('click', async (e) => {
    e.preventDefault(); // 阻止默认跳转下载
    const targetUrl = link.href;
    const expectedIntegrity = link.dataset.integrity;
    if (!expectedIntegrity) {
      alert('缺少文件校验信息，无法安全下载');
      return;
    }

    try {
      // 从CDN获取文件
      const response = await fetch(targetUrl);
      if (!response.ok) throw new Error(`下载失败：${response.status}`);

      // 将文件转为ArrayBuffer用于计算哈希
      const fileBuffer = await response.arrayBuffer();
      // 拆分哈希算法和哈希值（比如sha256和后面的base64串）
      const [algorithm, expectedHash] = expectedIntegrity.split('-');

      // 计算文件的实际哈希
      const hashBuffer = await crypto.subtle.digest(algorithm, fileBuffer);
      const hashArray = Array.from(new Uint8Array(hashBuffer));
      const calculatedHash = btoa(String.fromCharCode(...hashArray));

      // 对比哈希值
      if (calculatedHash !== expectedHash) {
        alert('⚠️ 文件校验失败！文件可能已被篡改，请勿使用');
        return;
      }

      // 校验通过，生成下载链接
      const blob = new Blob([fileBuffer]);
      const downloadUrl = URL.createObjectURL(blob);
      const downloadLink = document.createElement('a');
      downloadLink.href = downloadUrl;
      downloadLink.download = link.download || targetUrl.split('/').pop();
      document.body.appendChild(downloadLink);
      downloadLink.click();
      document.body.removeChild(downloadLink);
      URL.revokeObjectURL(downloadUrl);
    } catch (error) {
      console.error('校验流程出错:', error);
      alert('文件下载或校验失败，请稍后重试');
    }
  });
});
</script>

优缺点 #

• ✅ 实现简单，无需服务器改动，零额外带宽成本
• ❌ 依赖JavaScript，用户禁用JS或直接复制原始URL下载时会失效
• ❌ 哈希值明文写在前端，虽然不影响校验，但如果有需要保密的场景不太合适

方案二：使用Service Worker全局拦截下载请求 #

如果想覆盖更全面的场景（比如用户直接在地址栏输入CDN URL下载），可以用Service Worker在后台全局拦截下载请求，自动完成校验。

核心思路 #

1. 注册Service Worker，在install阶段预先缓存需要校验的文件哈希映射表（比如从你的站点接口拉取）
2. 在fetch事件中拦截所有指向CDN的下载请求
3. 下载文件后计算哈希，和缓存的预期值对比，匹配则返回文件内容，不匹配则返回错误提示

示例代码（Service Worker部分） #

// sw.js
const HASH_MAP = {
  'https://cdndomain.com/path/to/file.zip': 'sha256-abcdefghijklmnopqrstuvwxyz1234567890=='
};

self.addEventListener('fetch', async (event) => {
  const requestUrl = event.request.url;
  // 判断是否是需要校验的CDN文件
  if (HASH_MAP.hasOwnProperty(requestUrl)) {
    event.respondWith(handleVerifiedDownload(requestUrl));
  }
});

async function handleVerifiedDownload(url) {
  const expectedIntegrity = HASH_MAP[url];
  const [algorithm, expectedHash] = expectedIntegrity.split('-');

  try {
    const response = await fetch(url);
    if (!response.ok) throw new Error('文件下载失败');

    const fileBuffer = await response.arrayBuffer();
    // 计算哈希（和前端方案逻辑一致）
    const hashBuffer = await crypto.subtle.digest(algorithm, fileBuffer);
    const hashArray = Array.from(new Uint8Array(hashBuffer));
    const calculatedHash = btoa(String.fromCharCode(...hashArray));

    if (calculatedHash !== expectedHash) {
      return new Response('文件校验失败，可能已被篡改', { status: 403 });
    }

    // 校验通过，返回原始文件
    return new Response(fileBuffer, response.headers);
  } catch (error) {
    return new Response('文件处理出错', { status: 500 });
  }
}

优缺点 #

• ✅ 覆盖所有下载场景，包括直接访问CDN URL
• ✅ 前端无需额外代码，逻辑集中在Service Worker
• ❌ 需要HTTPS环境（Service Worker的强制要求）
• ❌ 哈希映射表需要维护更新，版本管理要注意

方案三：服务器端代理校验后转发 #

如果对安全性要求极高，担心前端方案被绕过，可以让服务器作为中间层：用户点击链接时请求你的服务器，服务器先从CDN下载文件、校验哈希，通过后再转发给用户，不匹配则返回错误。

核心流程 #

1. 用户点击<a href="/download/file.zip">（指向你的服务器接口）
2. 服务器接收到请求后，从CDN拉取对应文件
3. 服务器计算文件哈希，和预先存储的预期值对比
4. 校验通过：将文件流式转发给用户；校验失败：返回错误页面或提示

优缺点 #

• ✅ 最安全，用户完全无法接触到未校验的文件
• ✅ 不依赖前端JS，兼容性拉满
• ❌ 会消耗服务器带宽和计算资源，成本较高
• ❌ 下载速度可能受服务器带宽限制

根据你的业务场景选择合适的方案就好：如果是普通资源，前端JS方案足够；如果要覆盖所有下载场景，Service Worker是不错的选择；如果是敏感文件，服务器代理方案更稳妥。

内容的提问来源于stack exchange，提问作者weaver