链接并执行托管在 GitHub 上的外部 JavaScript 文件

Posted 2023-02-18

【中文标题】链接并执行托管在 GitHub 上的外部 JavaScript 文件

【英文标题】：Link and execute external JavaScript file hosted on GitHub

【发布时间】：2013-06-24 20:02:10

【问题描述】：

当我尝试将本地 javascript 文件的链接引用更改为 GitHub 原始版本时，我的测试文件停止工作。错误是：

拒绝从 ... 执行脚本，因为它的 MIME 类型 (text/plain) 不可执行，并且启用了严格的 MIME 类型检查。

有没有办法禁用此行为，或者是否有允许链接到 GitHub 原始文件的服务？

工作代码：

<script src="bootstrap-wysiwyg.js"></script>

非工作代码：

<script src="https://raw.github.com/mindmup/bootstrap-wysiwyg/master/bootstrap-wysiwyg.js"></script>

【问题讨论】：

rawgit.com 现在是新域名

同***.com/questions/8779197/…

@MuhammadUmer - 仅当您的源文件永不更改。 rawgit缓存never updates.

2019：跳过所有提及 RAW 或 RAWGIT 的答案。拉吉特死了。下到 chharwey 的答案并投票，直到它到达顶部。这是一个好方法：最简单，使用官方 GitHub 首选方法。

使用jsdelivr.com/?docs=gh，它可以工作

【参考方案1】：

有一个很好的解决方法，现在，使用jsdelivr.net。

步骤：

在 GitHub 上找到您的链接，然后点击“原始”版本。 复制网址。 将raw.githubusercontent.com 更改为cdn.jsdelivr.net 在您的用户名前插入/gh/。 删除branch 名称。 （可选）插入您要链接到的版本，如@version（如果您不这样做，您将获得最新的 - 这可能会导致长期缓存）

---

示例：

http://raw.githubusercontent.com/<username>/<repo>/<branch>/path/to/file.js

使用此网址获取最新版本：

http://cdn.jsdelivr.net/gh/<username>/<repo>/path/to/file.js

使用此 URL 获取特定版本或提交哈希：

http://cdn.jsdelivr.net/gh/<username>/<repo>@<version or hash>/path/to/file.js

对于生产环境，请考虑针对特定标签或提交哈希而不是分支。使用 latest 链接可能会导致文件长期缓存，从而导致您的链接在您推送新版本时不会更新。通过 commit-hash 或标签链接到文件使链接对版本唯一。

---

为什么需要这样做？

2013 年，GitHub 开始使用X-Content-Type-Options: nosniff，它指示更现代的浏览器强制执行严格的 MIME 类型检查。然后它以服务器返回的 MIME 类型返回原始文件，从而阻止浏览器按预期使用文件（如果浏览器接受该设置）。

有关此主题的背景，请参阅this discussion thread。

【讨论】：

也适用于要点。我能够用rawgist.com 替换gist.githubusercontent.com 并让它工作。

我不知道是谁维护了这个网站 rawgit，但不要在生产中使用它。您将有一个未知的第三方，可以在您的网站中注入任何 javascript。

@Maciej Krawczyk - 是的 - 正是出于这个原因，该页面明确鼓励您使用特定于提交的链接，而不是分支链接。

rawgit 现已停产（截至 2018 年 10 月 8 日）：rawgit.com。建议更新此答案。

感谢您指出@chharvey - 我已经更新了答案以反映 jsdelivr.net

【参考方案2】：

这已经不可能了。 GitHub 已明确禁用 JavaScript hotlinking，并且较新版本的浏览器尊重该设置。

Heads up: nosniff header support coming to Chrome and Firefox

【参考方案3】：

rawgithub.com 重定向到rawgit.com 所以上面的例子现在是

http://rawgit.com/user/package/master/link.min.js

【讨论】：

访问 rawgit.com 并粘贴文件或要点的 url。它会为你生成一个有效的 url。

rawgit 现已停产（截至 2018 年 10 月 8 日）：rawgit.com。建议更新此答案。

RawGit 现在处于日落阶段，很快就会关闭。阅读更多rawgit.com

【参考方案4】：

GitHub Pages 是 GitHub 对这个问题的官方解决方案。

raw.githubusercontent 使所有文件都使用text/plain MIME 类型，即使该文件是 CSS 或 JavaScript 文件。所以转到https://raw.githubusercontent.com/‹user›/‹repo›/‹branch›/‹filepath› 将不是正确的 MIME 类型，而是一个纯文本文件，并且通过 <link href="..."/> 或 <script src="..."></script> 链接它不起作用——CSS 不会应用/JS 不会运行。

GitHub Pages 在一个特殊的 URL 上托管你的 repo，所以你所要做的就是签入你的文件并推送。请注意，在大多数情况下，GitHub Pages 要求您提交到一个特殊的分支，gh-pages。

在您的新站点上，通常是https://‹user›.github.io/‹repo›，提交到gh-pages 分支（最近的提交）的每个文件都出现在此网址中。那么你可以通过<script src="https://‹user›.github.io/‹repo›/file.js"></script>链接到你的js文件，这将是正确的MIME类型。

你有构建文件吗？

就个人而言，我的建议是将此分支与master 并行运行。在gh-pages 分支上，您可以编辑您的.gitignore 文件以签入您网站所需的所有dist/build 文件（例如，如果您有任何缩小/编译的文件），同时在您的 master 分支上忽略它们。这很有用，因为您通常不想在常规 repo 中跟踪构建文件的更改。每次您想更新托管文件时，只需将 master 合并到 gh-pages，重新构建、提交，然后推送即可。

（提示：您可以通过这些步骤在同一个提交中合并和重建：）

$ git checkout gh-pages
$ git merge --no-ff --no-commit master  # prepare the merge but don’t commit it (as if there were a merge conflict)
$ npm run build                         # (or whatever your build process is)
$ git add .                             # stage the newly built files
$ git merge --continue                  # commit the merge
$ git push origin gh-pages

【参考方案5】：

以上答案清楚地回答了问题，但我想提供另一种选择 - 解决类似问题的不同观点/方法。

您还可以使用浏览器扩展来删除X-Content-Type-Options 文件的X-Content-Type-Options 响应标头。有几个浏览器扩展可以修改响应头。

Requestly: Chrome + Firefox Modify Headers: Firefox

如果你使用 Requestly，我可以推荐两种解决方案

解决方案一：使用 Modify Headers Rule 并移除响应头

步骤

从http://www.requestly.in请求安装 转到Rules Page 点击添加图标创建规则 选择修改标题 给出名称和描述 选择Remove -> Response -> X-Content-Type-Options 在源字段中，输入Url -> Contains -> raw.githubusercontent.com

解决方案 2：使用替换主机规则

从http://www.requestly.in 请求安装 转到Rules Page 点击添加图标创建规则 将raw.githubusercontent.com 替换为rawgit.com

查看此截图了解更多详情

如何测试

我们创建了一个简单的 JS Fiddle 来测试我们是否可以在代码中使用原始 github 文件作为脚本。这是Fiddle 使用以下代码

<center id="msg"></center>

<script src="https://raw.githubusercontent.com/sachinjain024/practicebook/master/web-extensions-master/storage/background.js"></script>
<script>
try 
  if (typeof BG.Methods !== 'undefoned') 
    document.getElementById('msg').innerhtml = 'Script evaluated successfully!';
  
 catch (e) 
  document.getElementById('msg').innerHTML = 'Problem evaluating script';

</script>

如果您看到Script evaluated successfully!，则表示您可以在代码中使用原始 github 文件 否则Problem evaluating script 表示从原始 github 源执行脚本时出现问题。

我也在Requestly blog 上写了an article 关于这个。详情请参考。

希望对你有帮助！

免责声明：我是Requestly 的作者，所以你可以责怪任何你不喜欢的事情。

【参考方案6】：

https://raw.githack.com/

发现此站点为

提供了 CDN 删除nosniff http 标头 通过分机名修复mime type

还有这个网站：

https://rawgit.com/

注意：RawGit 已达到使用寿命

【参考方案7】：

为了让事情清晰而简短

//raw.githubusercontent.com --> //rawgit.com

请注意，这是由 rawgit 的开发托管而不是其用于生产托管的 cdn 处理的

【讨论】：

自此答案以来，默认原始 URL 似乎已更改，因此转换现在为 https://raw.githubusercontent.com --> https://rawgit.com 否则此答案最清晰且有效。

rawgit 现已停产（截至 2018 年 10 月 8 日）：rawgit.com 。建议更新此答案。

【参考方案8】：

我的用例是从我的 Bitbucket 帐户直接加载“bookmarklets”，该帐户与 Github 具有相同的限制。我想出的解决方法是为脚本使用 AJAX 并在响应字符串上运行eval，下面的 sn-p 就是基于这种方法。

<script>
    var sScriptURL ='<script-URL-here>'; 
    var oReq = new XMLHttpRequest(); 
    oReq.addEventListener("load", 
       function fLoad() eval(this.responseText + '\r\n//# sourceURL=' + sScriptURL)); 
    oReq.open("GET", sScriptURL); oReq.send(); false;
</script>

请注意，附加sourceURL 注释是为了允许在浏览器的开发人员工具中调试脚本。

【参考方案9】：

将文件上传到 github 后，您可以将其用作外部源或免费托管。特洛伊·奥尔福德（Troy Alford）在上面已经很好地解释了。但为了更容易，让我告诉你一些简单的步骤，然后你可以在你的站点中使用 github 原始文件：

这是您文件的链接：

https://raw.githubusercontent.com/mindmup/bootstrap-wysiwyg/master/bootstrap-wysiwyg.js

现在要执行它，您必须删除 https:// 以及 raw 和 githubusercontent

之间的点 (.)

像这样：

rawgithubusercontent.com/mindmup/bootstrap-wysiwyg/master/bootstrap-wysiwyg.js

现在，当您访问此链接时，您将获得一个可用于调用您的 javascript 的链接：

这是最后的链接：

https://rawgit.com/mindmup/bootstrap-wysiwyg/master/bootstrap-wysiwyg.js

同样，如果您托管一个 css 文件，您必须按照上面提到的方式进行操作。这是获取简单链接以调用托管在 github 上的外部 css 或 javascript 文件的最简单方法。

我希望这会有所帮助。

参考网址：http://101helper.blogspot.com/2015/11/store-blogger-codes-on-github-boost-blogger-speed.html

【讨论】：

rawgit 现已停产（截至 2018 年 10 月 8 日）：rawgit.com。建议更新此答案。

【参考方案10】：

我发现错误是由于文件开头的cmets，你可以解决这个问题，只需创建自己的文件而不注释并推送到git，它不会显示错误

为了证明你可以尝试这两个文件，使用相同的简单分页代码：

without comment

with comment

【参考方案11】：

我和你有同样的问题，我所做的就是改变

<script type="application/javascript" src="bootstrap-wysiwyg.js"></script>

它对我有用。

【讨论】：

从什么变成什么？请显示之前和之后

【参考方案12】：

最简单的方法：<script type="text/plain" src="http://raw.githubusercontent.com/user/repo/branch/file.js"></script> 由 GitHub 提供服务，和

非常

可靠。 与text/plain 没有text/plain

【讨论】：

这是最好的解决方案，它很有效，很有意义。

没有。所有这一切都是为了阻止脚本甚至运行

它很快就不能工作了。从我的 android 设备 logcat 中：“获取具有无效类型/语言属性的脚本已被弃用，并将在 2017 年 1 月左右的 M56 中删除。有关更多详细信息，请参阅 chromestatus.com/features/5760718284521472。”

【参考方案13】：

raw.github.com 不是对文件资产的真正原始访问， 而是由 Rails 呈现的视图。 所以访问raw.github.com 比需要的要重得多。 我不知道为什么 raw.github.com 被实现为 Rails 视图。 GitHub 没有修复此路由问题，而是添加了 X-Content-Type-Options: nosniff 标头。

解决方法：

把脚本放到user.github.io/repo 使用第三方 CDN，例如 rawgit.com。

【讨论】：

对于其他对此感到困惑的人，他们是故意这样做的。您曾经能够简单地使用raw.github.com 来加载文件 - 然后 github 意识到它们被用作 CDN，这导致它们的流量过多。结果，他们将其更改为带有X-Content-Type-Options: nosniff 标头的这种类型的渲染，特别是为了阻止人们以这种方式使用他们的服务。

【参考方案14】：

或者，如果在服务器端生成标记，您可以只获取并注入。 例如，在 JSTL 中，您可以这样做：

<script type="text/javascript">
    <c:import url="https://raw.github.com/mindmup/bootstrap-wysiwyg/master/bootstrap-wysiwyg.js" />
</script>

他们不允许盗链是有原因的，所以如果你想成为一个好公民，这可能是一种不好的形式。我建议您缓存该 javascript，并且仅在您认为合适的情况下定期重新获取。

【参考方案15】：

示例

---

原创

https://raw.githubusercontent.com/antelove19/qrcodejs/master/qrcode.min.js

cdn.jsdelivr.net

https://cdn.jsdelivr.net/gh/antelove19/qrcodejs/qrcode.min.js