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

时间:2013-06-27 10:49:20

标签: javascript github

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

15 个答案:

答案 0 :(得分:979)

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

<强>步骤

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

  7. <强>实施例

    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类型的原始文件,阻止浏览器按预期使用该文件(如果浏览器遵循该设置)。

    有关此主题的背景信息,请参阅this discussion thread

答案 1 :(得分:55)

这已经不可能了。 GitHub明确禁用了JavaScript hotlinking和较新版本的浏览器都尊重该设置。

Heads up: nosniff header support coming to Chrome and Firefox

答案 2 :(得分:25)

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

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

答案 3 :(得分:7)

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

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

  1. Requestly: Chrome + Firefox
  2. Modify Headers: Firefox
  3. 如果您使用Requestly,我可以建议两种解决方案

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

    步骤

    1. http://www.requestly.in
    2. 安装请求
    3. 转到Rules Page
    4. 点击添加图标以创建规则
    5. 选择修改标题
    6. 提供姓名和描述
    7. 选择Remove - &gt; Response - &gt; X-Content-Type-Options
    8. 在“来源”字段中,输入Url - &gt; Contains - &gt; raw.githubusercontent.com
    9. 解决方案2:使用替换主机规则

      1. http://www.requestly.in
      2. 安装请求
      3. 转到Rules Page
      4. 点击添加图标以创建规则
      5. raw.githubusercontent.com替换为rawgit.com
      6. 查看此屏幕截图,了解更多详情enter image description here

        如何测试

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

        <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源执行脚本时出现问题。

        我还在an article上就此问题撰写了Requestly blog。请参阅更多详情。

        希望它有所帮助!!

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

答案 4 :(得分:6)

使事情清晰明白

//raw.githubusercontent.com - &gt; //rawgit.com

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

答案 5 :(得分:5)

https://raw.githack.com/

发现此网站提供了CDN

  • 删除nosniff http标头
  • 通过分机名称修复mime type

和本网站:

https://rawgit.com/

  

注意:RawGit已达到其使用寿命

答案 6 :(得分:5)

GitHub Pages 是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 Pages将您的存储库托管在一个特殊的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

答案 7 :(得分:4)

我的用例是从我的Bitbucket帐户加载'bookmarklets'direclty,该帐户与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评论是为了允许在浏览器的开发者工具中对脚本进行调试。

答案 8 :(得分:1)

当文件上传到github时,您可以将其用作外部源或免费托管。特洛伊·奥尔福德已经在上面解释了这一点。但为了让它更容易让我告诉你一些简单的步骤,那么你可以在你的网站中使用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文件,则必须如上所述进行操作。这是获取简单链接以调用github上托管的外部css或javascript文件的最简单方法。

我希望这有用。

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

答案 9 :(得分:1)

我发现错误是由于文件开头的注释而显示的,您可以通过简单地创建自己的文件而无需评论来解决此问题并推送到git,它显示没有错误

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

without comment

with comment

答案 10 :(得分:1)

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

composer dump autoload

它对我有用。

答案 11 :(得分:0)

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

非常

可靠 使用text/plain
enter image description here  没有text/plain
enter image description here

答案 12 :(得分:0)

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

解决方法:

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

答案 13 :(得分:0)

或者,如果生成标记服务器端,则可以只获取并注入。 例如,在JSTL中你可以这样做:

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

他们不允许因为某个原因而进行热链接,所以如果你想成为一个好公民,可能是糟糕的形式。我建议您缓存该javascript,并且只会在您认为合适时定期重新获取。

答案 14 :(得分:-1)

示例


原始

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

cdn.jsdelivr.net

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