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


Link and execute external JavaScript file hosted on GitHub

当我尝试将本地javascript文件的链接引用更改为Github原始版本时，我的测试文件将停止工作。错误是：

Refused to execute script from ... because its MIME type (text/plain) is not executable, and strict MIME type checking is enabled.

是否有方法禁用此行为，或者是否有允许链接到Github原始文件的服务？

工作代码：

1
<script src="bootstrap-wysiwyg.js">

非工作代码：

1
<script src="https://raw.github.com/mindmup/bootstrap-wysiwyg/master/bootstrap-wysiwyg.js">
相关讨论

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

步骤：

  • 在Github上找到你的链接，然后点击"原始"版本。
  • 复制URL。
  • 将raw.githubusercontent.com改为cdn.jsdelivr.net。
  • 在用户名前插入/gh/。
  • 删除branch名称。
  • (可选)插入您要链接的版本，如@version(如果不这样做，您将获得最新版本，这可能会导致长期缓存)

    • 实例：

    1
    http://raw.githubusercontent.com/<username>/<repo>/<branch>/path/to/file.js

    使用此URL获取最新版本：

    1
    http://cdn.jsdelivr.net/gh/<username>/<repo>/path/to/file.js

    使用此URL获取特定版本或提交哈希：

    1
    http://cdn.jsdelivr.net/gh/<username>/<repo>@<version or hash>/path/to/file.js

    对于生产环境，考虑以特定的标记或提交哈希为目标，而不是以分支为目标。使用最新的链接可能会导致文件的长期缓存，导致在推送新版本时链接无法更新。通过提交哈希或标记链接到文件使链接对于版本是唯一的。

    为什么需要这样做？

    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

    相关讨论

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

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

  • 请求：chrome+firefox
  • 修改邮件头：火狐

    • 如果您需要使用，我可以建议两种解决方案

    解决方案1：使用修改头规则并删除响应头步骤

  • 从http://www.requestly.in请求安装
  • 转到规则页
  • 单击添加图标创建规则
  • 选择修改标题
  • 给出名称和描述
  • 选择Remove->Response->X-Content-Type-Options
  • 在"源"字段中，输入Url->Contains->raw.githubusercontent.com

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

  • 从http://www.requestly.in请求安装
  • 转到规则页
  • 单击添加图标创建规则
  • 用rawgit.com替换raw.githubusercontent.com。

    • 查看此屏幕截图了解更多详细信息enter image description here

    如何测试

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <center id="msg"></center>

    <script src="https://raw.githubusercontent.com/sachinjain024/practicebook/master/web-extensions-master/storage/background.js">

    try {
      if (typeof BG.Methods !== 'undefoned') {
        document.getElementById('msg').innerHTML = 'Script evaluated successfully!';
      }
    } catch (e) {
      document.getElementById('msg').innerHTML = 'Problem evaluating script';
    }

    如果您看到Script evaluated successfully!，这意味着您可以在代码中使用原始的github文件。否则，Problem evaluating script表示从原始Github源代码执行脚本时出现问题。

    我还写了一篇关于这个的请求博客文章。详情请参阅。

    希望它有帮助！！

    免责声明：我是《请求》的作者，所以你可以为任何你不喜欢的事情负责。

    把事情弄清楚和简短

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

    请注意，这是由rawgit的开发宿主处理的，而不是由其生产宿主的cdn处理的。

    相关讨论

    GitHub页面是GitHub对此问题的官方解决方案。

    raw.githubusercontent使所有文件都使用text/plainmime类型，即使文件是css或javascript文件。因此，访问https://raw.githubusercontent.com/?user?/?repo?/?branch?/?filepath?将不是正确的mime类型，而是一个纯文本文件，并且通过或

    https://raw.githack.com网站/

    发现此网站为提供一个cdn

    • 删除nosniffHTTP头
    • 用ext名称固定mime type。

    这个网站：

    网址：https://rawgit.com/

    NOTE: RawGit has reached the end of its useful life

    我的用例是从我的BitBucket帐户加载"bookmarklets"direclty，该帐户与GitHub具有相同的限制。我想到的解决方法是为脚本使用Ajax，并在响应字符串上运行eval，下面的代码片段是基于这种方法的。

    1
    2
    3
    4
    5
    6
    7
        var sScriptURL ='<script-URL-here>';
        var oReq = new XMLHttpRequest();
        oReq.addEventListener("load",
           function fLoad() {eval(this.responseText + '

    //# sourceURL='     + sScriptURL)});
        oReq.open("GET", sScriptURL); oReq.send(); false;

    注意，附加sourceURL注释是为了允许在浏览器的开发人员工具中调试脚本。

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

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

    它对我有用。

    相关讨论

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

    为了证明这两个文件可以使用相同的代码轻松分页：

    不加评论

    带评论

    当文件上载到GitHub时，可以将其用作外部源或免费宿主。TroyAlford已经在上面很好地解释了这一点。但是为了更简单，让我告诉您一些简单的步骤，然后您可以在您的站点中使用Github原始文件：

    这是您的文件链接：

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

    现在要执行它，必须删除https://和点(.)。在raw和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

    相关讨论

    或者，如果在服务器端生成标记，则只需获取和注入即可。例如，在JSTL中，可以这样做：

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

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

    raw.github.com不是对文件资产的真正原始访问，但是由Rails呈现的视图。所以访问raw.github.com比需要的要重得多。我不知道为什么raw.github.com被实现为Rails视图。Github没有解决这个路由问题，而是添加了一个X-Content-Type-Options: nosniff头文件。

    解决办法：

    • 把脚本放到user.github.io/repo上
    • 使用第三方cdn，如rawgit.com。

    最简单的方法：