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

2020/09/24 11:41 · javascript ·  · 0评论

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

这里一个很好的办法解决这一点,现在,通过使用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类型返回原始文件,从而防止浏览器按预期使用文件(如果浏览器接受该设置)。

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

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

注意:Chrome和Firefox支持nosniff标头

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

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

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类型。

您有构建文件吗?

就个人而言,我的建议是将此分支并行运行mastergh-pages分支上,您可以编辑.gitignore文件以检入站点所需的所有dist / build文件(例如,如果您有任何缩小/编译的文件),而分支忽略它们master这很有用,因为您通常不希望在常规存储库中跟踪构建文件中的更改。要更新您的托管文件,只需合并每次mastergh-pages,重建承诺,然后推。

(提示:您可以通过以下步骤在同一提交中合并和重建:)

$ git checkout gh-pages
$ git merge --no-ff --no-commit master  # prepare the merge but dont 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请求安装
  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.comrawgit.com

查看此屏幕截图以获取更多详细信息在此处输入图片说明

测试方法

我们创建了一个简单的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源执行脚本时存在一些问题。

我还在Requestly博客了一篇有关此的文章请参阅它以获取更多详细信息。

希望能帮助到你!!

免责声明:我是Requestly的作者,所以您可以为不喜欢的内容负责。

https://raw.githack.com/

发现此站点为提供CDN

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

和这个网站:

https://rawgit.com/

注意:RawGit已达到使用寿命

为了使事情简短明了

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

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

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

当文件上传到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

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

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

没有评论

有评论

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

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

这个对我有用。

最简单的方法:
<script type="text/plain" src="http://raw.githubusercontent.com/user/repo/branch/file.js"></script>

由GitHub提供,

并且

非常

可靠。

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

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

解决方法:

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

另外,如果在服务器端生成标记,则只需获取并注入即可。例如,在JSTL中,您可以这样做:

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

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


原版的

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

cdn.jsdelivr.net

https://cdn.jsdelivr.net/gh/antelove19/qrcodejs/qrcode.min.js
本文地址:http://javascript.askforanswer.com/lianjiebingzhixingtuoguanzaigithubshangdewaibujavascriptwenjian.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!