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

IT技术 javascript github
2021-01-27 18:08:40

当我尝试将本地 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>
6个回答

这里一个很好的办法解决这一点,现在,通过使用jsdelivr.net

步骤

  1. 在 GitHub 上找到您的链接,然后单击“原始”版本。
  2. 复制网址。
  3. 更改raw.githubusercontent.comcdn.jsdelivr.net
  4. /gh/在您的用户名前插入
  5. 删除branch名称。
  6. (可选)插入您要链接版本,因为@version(如果不这样做,您将获得最新的- 这可能会导致长期缓存)

例子

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

使用此 URL 获取最新版本:

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

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


为什么需要这个?

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

有关此主题的背景信息,请参阅此讨论主题

@Maciej Krawczyk - 是的 - 该页面明确鼓励您使用特定于提交的链接,而不是分支链接,正是出于这个原因。
2021-03-10 18:08:40
感谢您指出@chharvey - 我已经更新了答案以反映 jsdelivr.net
2021-03-10 18:08:40
也适用于要点。我能够代替gist.githubusercontent.comrawgist.com和得到它的工作。
2021-03-18 18:08:40
rawgit现已停产(截至 2018-10-08):rawgit.com建议更新此答案。
2021-04-02 18:08:40
我不知道谁在维护这个站点 rawgit,但不要在生产中使用它。您将有一个未知的第三方可以在您的网站中注入任何 javascript。
2021-04-03 18:08:40

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

注意:Chrome 和 Firefox 将支持 nosniff 标头

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

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

RawGit 现在处于日落阶段,很快就会关闭。阅读更多rawgit.com
2021-03-20 18:08:40
访问rawgit.com并粘贴文件或要点的 URL。它将为您生成一个有效的 url。
2021-03-29 18:08:40
rawgit现已停产(截至 2018-10-08):rawgit.com建议更新此答案。
2021-03-29 18:08:40

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

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

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

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

你有构建文件吗?

就个人而言,我的建议是将此分支与master. gh-pages分支上,您可以编辑.gitignore文件以签入站点所需的所有 dist/build 文件(例如,如果您有任何缩小/编译的文件),同时在您的分支忽略它们master这很有用,因为您通常不想跟踪常规存储库中构建文件的更改。每次要更新托管文件时,只需合并mastergh-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

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

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

  1. 请求:Chrome + Firefox
  2. 修改标题:Firefox

如果您使用Requestly,我可以建议两种解决方案

解决方案 1:使用修改标头规则并删除响应标头

脚步

  1. http://www.requestly.in安装 Requestly
  2. 进入规则页面
  3. 单击添加图标以创建规则
  4. 选择修改标题
  5. 给出名称和描述
  6. 选择Remove-> Response->X-Content-Type-Options
  7. 在源字段中,输入Url-> Contains->raw.githubusercontent.com

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

  1. http://www.requestly.in安装 Requestly
  2. 进入规则页面
  3. 单击添加图标以创建规则
  4. 替换raw.githubusercontent.comrawgit.com

查看此屏幕截图了解更多详情在此处输入图片说明

如何测试

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

<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 博客了一篇关于此的文章详情请参阅。

希望能帮助到你!!

免责声明:我是Requestly 的作者所以你可以责怪任何你不喜欢的东西。