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

Question

当我尝试将本地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>

Answer 1

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

步骤:

1. 在GitHub上找到您的链接,然后单击"原始"版本.
2. 复制URL.
3. 更改raw.githubusercontent.com到cdn.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

对于生产环境,请考虑定位特定标记或commit-hash而不是分支.使用最新的链接可能会导致文件的长期缓存,导致您在推送新版本时不会更新链接.通过commit-hash或tag链接到文件使链接对版本唯一.

为什么需要这个？

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

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

Answer 2

这已经不可能了.GitHub明确禁用了JavaScript热链接,而较新版本的浏览器则遵循该设置.

抬头:来自Chrome和Firefox的nosniff标头支持

Answer 3

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

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

Answer 4

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

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

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

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

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

脚步

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

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

1. 请求从http://www.requestly.in安装
2. 转到规则页面
3. 单击"添加图标"以创建规则
4. 替换raw.githubusercontent.com为rawgit.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表示从raw github源执行脚本时出现了一些问题.

我还在Requestly博客上写了一篇关于此的文章.请参阅以获取更多详细信息.

希望能帮助到你!!

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

Answer 5

使事情变得清晰和简短

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

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

Answer 6

https://raw.githack.com/

发现该站点提供了CDN

• 删除nosniffhttp头
• mime type通过扩展名修复

和这个网站：

https://rawgit.com/

注意：RawGit已达到使用寿命

Answer 7

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。这很有用，因为您通常不希望在常规存储库中跟踪构建文件中的更改。每次您要更新托管文件时，只需合并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

Answer 8

我的用例是从我的 Bitbucket 帐户直接加载“书签”，该帐户与 Github 具有相同的限制。我想出的解决方法是将 AJAX 用于脚本并eval在响应字符串上运行，下面的代码段基于该方法。

<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注释是为了允许在浏览器的开发人员工具中调试脚本。