为script标签添加integrity属性，解决file://协议下的CORS错误

核心问题分析 #

当为本地存储的第三方库添加integrity属性时：

• 在HTTPS场景下，同源资源配合crossorigin="anonymous"可正常完成完整性校验；
• 在file://场景下，添加crossorigin会触发浏览器的CORS检查，但本地文件无服务器提供CORS响应头，导致报错；若移除crossorigin，部分浏览器会因资源获取模式（same-origin）与integrity校验的兼容逻辑，抛出校验失败提示。

可行解决方案：动态生成Script标签 #

通过内联脚本判断当前页面的访问协议，动态生成对应配置的<script>标签，分别适配两种场景：

实现代码 #

<script>
  // 定义需要加载的第三方库信息：路径 + 完整性哈希值
  const libs = [
    {
      src: './js/alpine.js',
      integrity: 'sha256-你的AlpineJS哈希值'
    },
    {
      src: './js/jszip.js',
      integrity: 'sha256-你的JSZip哈希值'
    }
  ];

  libs.forEach(lib => {
    const script = document.createElement('script');
    script.src = lib.src;
    script.integrity = lib.integrity;
    // 仅在非file协议下添加crossorigin属性
    if (window.location.protocol !== 'file:') {
      script.crossOrigin = 'anonymous';
    }
    // 可选：添加加载失败的处理逻辑
    script.onerror = () => {
      console.error(`加载库失败：${lib.src}`);
    };
    document.head.appendChild(script);
  });
</script>

原理说明 #

1. HTTPS场景：添加crossorigin="anonymous"，浏览器以跨域模式（实际为同源）加载资源，可正常通过integrity校验，且无CORS问题；
2. file://场景：不添加crossorigin属性，浏览器以同源模式加载本地文件，不会触发CORS检查，同时integrity校验可正常执行（本地文件哈希与预设值匹配即可通过）。

额外注意事项 #

• 确保完整性哈希值的准确性：使用openssl dgst -sha256 -binary 文件路径 | base64命令（或本地哈希生成工具）生成对应文件的哈希值，避免因哈希错误导致校验失败；
• 内联脚本需放在页面头部（<head>标签内），确保在依赖库加载前执行；
• 部分旧版浏览器可能对file://下的integrity支持有限，需测试目标浏览器版本。

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