使用脚本标签的“完整性”属性，同时避免 file-uri 协议上的 CORS 错误

Question

我想构建一个轻量级的单页应用程序，人们可以通过

file://

协议在本地使用（即只需下载项目存档文件，解压它并双击

index.html

），以及网络 (

https://

).

我的所有依赖项都存储在我的项目中（例如，在

/js

文件夹中），包括我使用的第三方库（即 AlpineJs 和 JSZip）。

到目前为止一切顺利，它适用于两种场景（文件和 https）。

我还想在

integrity

元素上使用

<script>

属性，以便用户可以验证我没有修改这些库的代码。这给了我类似的东西：

<script
  src="js/jszip.min.js"
  integrity="sha512-XMVd28F1oH/O71fzwBnV7HucLxVwtxf26XV8P4wPk26EDxuGZ91N8bsOttmnomcCD3CS5ZMRL50H0GgOHvegtg=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
></script>
<script
  src="js/alpinejs.min.js"
  defer
  integrity="sha512-FUaEyIgi9bspXaH6hUadCwBLxKwdH7CW24riiOqA5p8hTNR/RCLv9UpAILKwqs2AN5WtKB52CqbiePBei3qjKg=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
></script>

但是，一旦我开始使用这些属性，浏览器就会抛出 CORS 错误并拒绝加载文件，通过 file:// 协议访问应用程序时:

跨源请求被阻止：同源策略不允许读取 file:///.../js/jszip.min.js 处的远程资源。 （原因：CORS 请求不是 http）。 [了解更多]

我不太熟悉

crossorigin

和

referrerpolicy

属性。阅读有关它们的文档，我没有找到任何在这方面对我有帮助的内容。我认为不需要它们。但是，如果我删除它们，我会收到不同的错误：

“file:///.../js/alpinejs.min.js”不符合完整性检查条件，因为它既不启用 CORS，也不是同源的。

有没有办法设置它，使其在

https://

和

file://

上工作，同时保留

integrity

属性？

Answer 1

由于需要 CORS 来验证完整性，因此您无法获得文件协议的完整性。

您可以在本地加载脚本而无需像这样的完整性

const isFileProtocol = window.location.protocol === 'file:';

const scripts = [{
    src: 'js/jszip.min.js',
    integrity: 'sha512-XMVd28F1oH/O71fzwBnV7HucLxVwtxf26XV8P4wPk26EDxuGZ91N8bsOttmnomcCD3CS5ZMRL50H0GgOHvegtg==',
    crossorigin: 'anonymous',
    defer: false,
  },
  {
    src: 'js/alpinejs.min.js',
    integrity: 'sha512-FUaEyIgi9bspXaH6hUadCwBLxKwdH7CW24riiOqA5p8hTNR/RCLv9UpAILKwqs2AN5WtKB52CqbiePBei3qjKg==',
    crossorigin: 'anonymous',
    defer: true,
  },
];

scripts.forEach(({ src, integrity, crossorigin, defer }) => {
  const script = document.createElement('script');
  script.src = src;
  if (!isFileProtocol) {
    script.integrity = integrity;
    script.crossOrigin = crossorigin;
  }
  if (defer) {
    script.defer = true;
  }
  document.head.appendChild(script);
});