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

JavaScript

卡卡西Mandy

2020-03-12

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

第1071篇《链接并执行托管在GitHub上的外部JavaScript文件》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

13个回答
西门逆天 2020.03.12


原版的

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

cdn.jsdelivr.net

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

我和你有同样的问题,我所做的就是更改为

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

这个对我有用。

达蒙西门 2020.03.12

另外,如果在服务器端生成标记,则只需获取并注入即可。例如,在JSTL中,您可以执行以下操作:

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

他们不允许进行热链接是有原因的,因此如果您想成为好公民,则可能是不好的形式。我建议您缓存该javascript,并仅在您认为合适时才定期重新获取。

神无逆天GO 2020.03.12

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

解决方法:

  • 将脚本放到 user.github.io/repo
  • 使用诸如rawgit.com之类的第三方CDN。
村村AL 2020.03.12

最简单的办法:
<script type="text/plain" src="http://raw.githubusercontent.com/user/repo/branch/file.js"></script>
通过GitHub上提供服务,

非常

可靠。
随着text/plain
在此处输入图片说明text/plain
在此处输入图片说明

樱JimPro 2020.03.12

将文件上传到github后,您可以将其用作外部源或免费托管。特洛伊·奥尔福德(Troy Alford)在上面已经做了充分解释。但是为了使操作更简单,让我告诉您一些简单的步骤,然后可以在站点中使用github原始文件:

这是您文件的链接:

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

现在要执行它,您必须删除https://以及rawgithubusercontent之间的dot(。)。

像这样:

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

JinJinPro 2020.03.12

我发现由于文件开头的注释而导致显示错误,您可以解决此问题,只需创建没有注释的自己的文件并推送至git,就不会显示任何错误

为了证明您可以使用易于分页的相同代码尝试这两个文件:

没有评论

有评论

古一达蒙 2020.03.12

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

raw.githubusercontent makes all files use the text/plain MIME type, even if the file is a CSS or JavaScript file. So going to https://raw.githubusercontent.com/‹user›/‹repo›/‹branch›/‹filepath› will not be the correct MIME type but instead a plaintext file, and linking it via <link href="..."/> or <script src="..."></script> won’t work—the CSS won’t apply / the JS won’t run.

GitHub Pages hosts your repo at a special URL, so all you have to do is check-in your files and push. Note that in most cases, GitHub Pages requires you to commit to a special branch, gh-pages.

On your new site, which is usually https://‹user›.github.io/‹repo›, every file committed to the gh-pages branch (the most recent commit) is present at this url. So then you can link to your js file via <script src="https://‹user›.github.io/‹repo›/file.js"></script>, and this will be the correct MIME type.

Do you have build files?

就个人而言,我的建议是将此分支并行运行mastergh-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
LEY老丝樱 2020.03.12

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

步骤

  1. 在GitHub上找到您的链接,然后单击“原始”版本。
  2. 复制URL。
  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

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


为什么需要这个?

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

有关此主题的背景,请参考此讨论线程

伽罗卡卡西 2020.03.12

https://raw.githack.com/

发现该站点提供了CDN

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

和这个网站:

https://rawgit.com/

注意:RawGit已达到使用寿命

An 2020.03.12

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

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

EvaEva斯丁 2020.03.12

弄清楚和简短

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

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

Mandy番长 2020.03.12

这不再可能。GitHub已明确禁用JavaScript热链接,并且较新版本的浏览器会遵守该设置。

注意:Chrome和Firefox支持nosniff标头

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android