When I try to change the linked reference of a local JavaScript file to a GitHub raw version my test file stops working. The error is:
Refused to execute script from ... because its MIME type (
text/plain
) is not executable, and strict MIME type checking is enabled.
Is there a way to disable this behavior or is there a service that allows linking to GitHub raw files?
Working code:
<script src="bootstrap-wysiwyg.js"></script>
Non-working code:
<script src="https://raw.github.com/mindmup/bootstrap-wysiwyg/master/bootstrap-wysiwyg.js"></script>
This question is related to
javascript
github
Above answers clearly answer the question but I want to provide another alternative - A different view/approach to solve the similar problem.
You can also use browser extension to remove X-Content-Type-Options
response header for raw.githubusercontent.com
files. There are couple of browser extensions to modify response headers.
If you use Requestly, I can suggest two solutions
Remove
-> Response
-> X-Content-Type-Options
Url
-> Contains
-> raw.githubusercontent.com
raw.githubusercontent.com
with rawgit.com
Check this screenshot for more details
We created a simple JS Fiddle to test out if we can use raw github files as scripts in our code. Here is the Fiddle with the following code
<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>
If you see Script evaluated successfully!
, It means you are able to use raw github file in your code
Otherwise Problem evaluating script
indicates that there is some problem while executing script from raw github source.
I also wrote an article on Requestly blog about this. Please refer it for more details.
Hope it helps!!
Disclaimer: I am author of Requestly So you can blame for anything you don't like.
rawgithub.com
redirects to rawgit.com
So the above example would now be
http://rawgit.com/user/package/master/link.min.js
found this site supply a CDN for
nosniff
http headermime type
by ext nameand this site:
NOTE: RawGit has reached the end of its useful life
GitHub Pages is GitHub’s official solution to this problem.
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.
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.
(protip: you can merge and rebuild in the same commit with these steps:)
$ 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
raw.github.com
is not truely raw access to file asset,
but a view rendered by Rails.
So accessing raw.github.com
is much heavier than needed.
I don't know why raw.github.com
is implemented as a Rails view.
Instead of fix this route issue, GitHub added a X-Content-Type-Options: nosniff
header.
Workaround:
user.github.io/repo
Example
original
https://raw.githubusercontent.com/antelove19/qrcodejs/master/qrcode.min.js
cdn.jsdelivr.net
https://cdn.jsdelivr.net/gh/antelove19/qrcodejs/qrcode.min.js
I had the same issue as you, what I did is change to
<script type="application/javascript" src="bootstrap-wysiwyg.js"></script>
It works for me.
When a file is uploaded to github you can use it as external source or free hosting. Troy Alford has explained it well above. But to make it easier let me tell you some easy steps then you can use a github raw file in your site:
Here is your file's link:
https://raw.githubusercontent.com/mindmup/bootstrap-wysiwyg/master/bootstrap-wysiwyg.js
Now to execute it you have to remove https:// and the dot( . ) between raw and githubusercontent
Like this:
rawgithubusercontent.com/mindmup/bootstrap-wysiwyg/master/bootstrap-wysiwyg.js
Now when you will visit this link you will get a link that can be used to call your javascript:
Here is the final link:
https://rawgit.com/mindmup/bootstrap-wysiwyg/master/bootstrap-wysiwyg.js
Similarly if you host a css file you have to do it as mentioned above. It is the easiest way to get simple link to call your external css or javascript file hosted on github.
I hope this is helpful.
Referance URL: http://101helper.blogspot.com/2015/11/store-blogger-codes-on-github-boost-blogger-speed.html
Alternatively, if generating your markup server-side, you can just fetch and inject. For example, in JSTL you could do this:
<script type="text/javascript">
<c:import url="https://raw.github.com/mindmup/bootstrap-wysiwyg/master/bootstrap-wysiwyg.js" />
</script>
They don't allow hotlinking for a reason, so probably bad form if you want to be a good citizen. I'd suggest you cache that javascript and only actually re-fetch periodically as you see fit.
This is no longer possible. GitHub has explicitly disabled JavaScript hotlinking, and newer versions of browsers respect that setting.
Heads up: nosniff header support coming to Chrome and Firefox
My use case was to load 'bookmarklets' direclty from my Bitbucket account which has same restrictions as Github. The work around I came up with was to AJAX for the script and run eval
on the response string, below snippet is based on that approach.
<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>
Note that appending of sourceURL
comment is to allow for debuging of the script within browser's developer tools.
I found the error was shown due to the comments at the beginning of file , You can solve this issue , by simply creating your own file without comment and push to git, it shows no error
For proof you can try these two file with same code of easy pagination :
To make things clear and short
//raw.githubusercontent.com
--> //rawgit.com
Note that this is handled by rawgit's development hosting and not their cdn for production hosting
Source: Stackoverflow.com