如果 HTML 文件通过 file:///foo.html 加载，CORS 标头？答案

【问题标题】：CORS Header if HTML file gets loaded via file:///foo.html?如果 HTML 文件通过 file:///foo.html 加载，CORS 标头？
【发布时间】：2019-03-04 20:59:54
【问题描述】：

我想在使用file: 协议打开的 HTML 文件中使用 jquery，如下所示：

file:///path/to/file.html

我在这个 HTML 中包含 jquery，如下所示：

<script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>

我的浏览器 (firefox) 告诉我，缺少 CORS 标头：

https://developer.mozilla.org/de/docs/Web/HTTP/CORS/Errors/CORSMissingAllowOrigin

如果我可以使用来自 file:// 的 HTML 和来自 CDN 的 jquery 进行开发，那就太好了。

一个用例是用于教育。如果您可以创建一个 HTML 并通过file: 协议对其进行测试（从 CDN 加载 jquery），那么新来者的初始开销要低得多（至少我是这么认为的，但也许我遗漏了一些东西）。

【问题讨论】：

“如果我可以使用 file:// 和 jquery 开发，那就太好了。” 你不能这样做。
@KevinB 为什么这不可能？
从技术上讲，可以按照您的要求进行操作。但它打开了相当大的安全漏洞。 stackoverflow.com/questions/4819060/… 默认情况下禁用此功能是有原因的，并且只能通过标志启用（假设所述标志仍然存在）我不建议在启用此标志时浏览本地网络以外的任何内容。
这种方法需要打开 Web 浏览器上的安全缓解开关，并指导学生在浏览 Web 时所涉及的风险。恕我直言，在本地 PC 上安装和配置 IIS 更容易、更安全、更有用。
@KevinB 你说这是不可能的。它工作得很好。在这里查看我的答案：stackoverflow.com/a/52919504/633961我很好奇。为什么你认为这是不可能的？

标签： jquery cors file-uri

【解决方案1】：

如果您的问题是入门，请使用众多可用的小提琴工具之一。

jqfiddle 有一个 html、css 和一个 jquery 部分，您可以填写。它应该支持您需要的所有基本示例，以及一些高级示例。但既然我们说的是“入门级”，那么这应该足以说明你能做什么。然后了解如何在本地或稍后在服务器上设置所有这些。

您也可以只设置一个带有用户文件夹的服务器，他们也可以通过 ftp 在本地上传，然后托管这些用户文件夹（但是这需要您进行更多设置）。

或者使用github pages 之类的东西来托管内容。让想要学习编码的学生参与到 github 之类的平台中，也非常适合探索和学习。

更新： 在 OPs 回答了他自己的问题之后，我想知道这个答案的实际问题是什么：

  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous">

以上内容被添加到文件加载的标签中。

这是加载外部资源时使用的安全功能，称为：Subresource Integrity

完整性属性的内容需要与正在加载的文件生成的哈希匹配，并且实际上仅在您的代码和资源位于不同位置（跨源）时使用它可以保护您的站点免受文件被更改的影响第三方网站。

哈希确保您期望的代码是从第三方加载的代码，如果它已更改（被黑客入侵），代码将不会在您的页面上执行。

因此，在您的本地情况下，每次代码更改时，您都必须从文件内容生成新的哈希，并将其放入完整性属性中，如果资源位于同一位置，这实际上没有意义，因为攻击者可能只是修改您的网站而不是实际的脚本文件。

进一步更新： 如果您想从文件中测试某些内容，应该可以使用如下所示的简单 html 文件，它还可以毫无问题地从带有 SRI 的 cdn 加载脚本。

<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.js"
  integrity="sha256-fNXJFIlca05BIO2Y5zh1xrShK3ME+/lYZ0j+ChxX2DA="
  crossorigin="anonymous"></script>
</head>
<body>
<h1>Hello World!</h1>

<script type="text/javascript">
  $("body").append("<span>I was added from jquery script!</span>");
</script>

脚本直接从jquery's cdn提供的sn-p复制/粘贴

【讨论】：

十次否决后的第一个建设性建议。谢谢你的回答！
@guettli 我在此更新中对您面临的问题进行了详细说明。
@JimWollf 您写道“因此，在您的本地情况下，每次代码更改时，您都必须从文件内容生成新的哈希”。我跟不上你。我想加载 jquery。我不修改jquery。我不明白我为什么要生成一个新的哈希。
@guettli 正确，因此在本地使用 子资源完整性 或脚本与调用它的 html 物理位于同一位置的任何地方都是没有意义的。我只是试图解释如果你要使用该功能是如何工作的。
是的，这没有意义。但是“为什么不”呢？我想通过 file:/// 在本地玩 html+jquery sn-p。在能够测试 sn-p 之前强制删除 integrity="sha256-..." 属性是没有意义的。

【解决方案2】：

我添加了这个，只是因为 jquery 页面告诉我这样做：

  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous">

我想要的只是通过file:/// 和解决方案测试我的HTML，包括jquery，问题的答案很简单：不要使用integrity="...，它可以工作。

我的 HTML 现在包含这个：

 <head>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

并通过file:/// 玩转。

我发现 jquery 版本有很大的不同。但我现在不在乎。

以上 HTML 来自此页面：http://jqueryui.com/accordion/#collapsible

【讨论】：

您的问题之一也可能是完整性链接本身，因为我在检查 jquery 的 cdn 时得到的链接是这样的：<script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script> 哈希与您上面的哈希不同
没关系，我正在将您的新代码与之前的代码进行比较，即 jquery.3.3.1 并且确实给出了正确的哈希值：<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>