当我试图将本地JavaScript文件的链接引用更改为GitHub原始版本时,我的测试文件停止工作。错误是:
拒绝执行脚本…因为它的MIME类型(文本/纯)是不可执行的,并且启用了严格的MIME类型检查。
有没有办法禁用这种行为,或者有没有服务允许链接到GitHub原始文件?
工作代码:
<script src="bootstrap-wysiwyg.js"></script>
故障代码:
<script src="https://raw.github.com/mindmup/bootstrap-wysiwyg/master/bootstrap-wysiwyg.js"></script>
现在有一个很好的解决方法,使用jsdelivr.net。
步骤:
在GitHub上找到你的链接,然后点击“原始”版本。
复制URL。
将raw.githubusercontent.com更改为cdn.jsdelivr.net
在用户名之前插入/gh/。
删除分支名称。
(可选)插入你想要链接到的版本,如@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
对于生产环境,考虑针对特定的标记或提交哈希,而不是针对分支。使用最新的链接可能会导致文件的长期缓存,导致在推送新版本时无法更新链接。通过提交散列或标记链接到文件使链接对版本唯一。
为什么需要这样做?
2013年,GitHub开始使用X-Content-Type-Options: nosniff,它指导更现代的浏览器强制执行严格的MIME类型检查。然后,它以服务器返回的MIME类型返回原始文件,防止浏览器按预期使用该文件(如果浏览器遵守设置)。
关于这个主题的背景知识,请参考这个讨论线程。
当一个文件上传到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上。
我希望这对你有帮助。
其引用形式
我的用例是直接从我的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注释是为了允许在浏览器的开发人员工具中调试脚本。
您还可以使用浏览器扩展来删除raw.githubusercontent.com文件的X-Content-Type-Options响应头。有两个浏览器扩展可以修改响应头。
请求:Chrome和Firefox
修改头值:Firefox
使用请求方式删除X-Content-Type-Options响应头
为您的浏览器请求安装
开放规则页面
单击“创建规则”并选择“修改头部”
在Source字段中输入Url -> Contains -> raw.githubusercontent.com
在Response Headers部分,Remove -> X-Content-Type-Options
如何测试
我创建了一个简单的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>
如果您看到“脚本评估成功!”,这意味着你可以在你的代码中使用原始的github文件
否则,问题评估脚本表明有一些问题,而从原始的github源执行脚本。
注意:这将只在您的机器上工作,因此您将无法部署到生产环境。这种方法允许您快速使用任何Github存储库中的文件,而没有太多麻烦。
免责声明:我是Requestly的作者,所以你可以责怪任何你不喜欢的东西。
GitHub Pages是GitHub针对这个问题的官方解决方案。
生的。githubusercontent使所有文件都使用文本/纯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›,提交到g -pages分支的每个文件(最近提交的)都出现在这个url中。所以你可以通过<script src="https:// user›.github.io/ repo›/file.js"></script>链接到你的js文件,这将是正确的MIME类型。
你有构建文件吗?
Personally, my recommendation is to run this branch parallel to master. On the gh-pages branch, you can edit your .gitignore file to check in all the dist/build files you need for your site (e.g. if you have any minified/compiled files), while keeping them ignored on your master branch. This is useful because you typically don’t want to track changes in build files in your regular repo. Every time you want to update your hosted files, simply merge master into gh-pages, rebuild, commit, and then push.
(提示:你可以通过以下步骤在同一个提交中合并和重建:)
$ 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