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

当我试图将本地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>
171884 次浏览
小开
这已经不可能了。GitHub明确禁用了JavaScript

.盗链和较新版本的浏览器都尊重该设置

提示:Chrome和Firefox将支持nosniff头文件

小开
最佳答案

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

# EYZ0:

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

# EYZ0:

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类型返回原始文件，防止浏览器按预期使用该文件(如果浏览器遵守设置)。

关于这个主题的背景信息，请参考这个讨论话题。

小开

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

# EYZ0

小开

为了让事情简单明了

# eyz0—> # eyz1

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

小开

当一个文件上传到github，你可以使用它作为外部源或免费托管。Troy Alford在上面已经解释过了。但是为了让它更简单，让我告诉你一些简单的步骤，然后你可以在你的网站上使用一个github原始文件:

这是你的文件链接:

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

现在要执行它，你必须删除https://和点(.)在生和githubusercontent之间

是这样的:

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

现在，当你访问这个链接时，你会得到一个链接，可以用来调用你的javascript:

这是最后一个链接:

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

类似地，如果你托管一个css文件，你必须这样做如上所述。这是最简单的方法来获得简单的链接来调用你的外部css或javascript文件托管在github上。

我希望这对你有帮助。

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

小开

我的用例是直接从我的Bitbucket帐户加载“bookmarklet”，该帐户与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注释是为了允许在浏览器的开发人员工具中调试脚本。

小开

最简单的方法:
# EYZ0 < br > 由GitHub提供，
和

非常

可靠 以# EYZ0 < br > enter image description here 没有# EYZ0 < br > # EYZ0 < / p >
小开

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

处理:

  • 将脚本放到user.github.io/repo
  • 使用第三方CDN，如rawgit.com。
小开

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

为了证明你可以尝试这两个文件的相同代码的容易分页:

without comment

with comment

小开

https://raw.githack.com/

发现这个网站提供了一个CDN

  • 删除nosniff http头
  • 修复mime type的ext name

这个网站:

< a href = " https://rawgit.com/ " rel = " noreferrer > https://rawgit.com/ < / >

注意:RawGit已经达到了它的使用寿命

小开

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

  1. # EYZ0,# EYZ1
  2. 修改头值:Firefox . sh . sh

使用请求方式删除X-Content-Type-Options响应头

  • 安装要求为您的浏览器
  • 打开# EYZ0
  • 单击“创建规则&选择修改报头 在Source字段中输入Url -># EYZ1→李# EYZ2 < / >
  • 在Response Headers部分，Remove -># EYZ1

Requestly Modify Headers截图

如何测试

我创建了一个简单的JS小提琴来测试我们是否可以使用原始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源执行脚本时存在一些问题

请注意这将只在您的机器上工作，因此您将无法部署到生产环境。这种方法允许您快速使用任何Github存储库中的文件，而没有太多麻烦。

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

小开
或者，如果生成您的标记服务器端，您可以只获取和注入。 例如，在JSTL中，你可以这样做:

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

他们不允许盗链是有原因的，所以如果你想成为一个好公民，这可能是很糟糕的形式。我建议你缓存javascript，只在你认为合适的时候定期重新获取。

小开

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

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

这对我很管用。

小开

GitHub页面是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页面托管你的回购在一个特殊的URL，所以你所要做的就是签入你的文件和推送。请注意，在大多数情况下，GitHub Pages要求你提交到一个特殊的分支，gh-pages。

在您的新站点(通常是https://‹user›.github.io/‹repo›)上，提交到gh-pages分支(最近提交的)的每个文件都出现在这个url中。然后你可以通过<script src="https://‹user›.github.io/‹repo›/file.js"></script>链接到你的js文件，这将是正确的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
小开

例子

原始

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

cdn.jsdelivr.net

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

提交答案