Ionică Bizău Ionică Bizău - 7 months ago 89
Javascript Question

Hotlink resources like JavaScript files directly from GitHub

I asked a question about including resources from GitHub and the answer was to use the raw link:

https://raw.github.com/username/repository/branch/file.js


I am trying to include a script using:

<script
type="text/javascript"
src="https://raw.github.com/username/repo/master/src/file.js"
></script>


but I get the following error:


Refused to execute script from 'https://raw.github.com/username/repo/master/src/file.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.


Are there any alternatives to fix this error?

Usage example



I don't use this in the production but for a demo page:

project-repository-from-github
├─ master
│ ├─ src
│ │ └─ my-jQuery-plugin.js
│ └─ README.md
└─ gh-pages
├─ css
│ └─ style.css
└─ index.html


In the index.html page I want to have the latest build of my-jQuery-plugin.js. So, I would include the raw URL to the script.

How do I fix the error?

Answer

Yes, Github changed this in April, 2013:

We added the X-Content-Type-Options: nosniff header to our raw URL responses way back in 2011 as a first step in combating hotlinking. This has the effect of forcing the browser to treat content in accordance with the Content-Type header. That means that when we set Content-Type: text/plain for raw views of files, the browser will refuse to treat that file as JavaScript or CSS.

But thanks to http://rawgit.com/ we can include GH scripts. The only change is to remove the dot from raw.github.com that becomes rawgithub.com:

<script
   type="text/javascript"
   src="https://rawgit.com/username/repo/master/src/file.js"
></script>

The project is hosted on Github being open-source.

And yes, @Lix is correct. The files are not being served from Github but from the rawgit site.


Another workaround I found is that instead of:

<script
   type="text/javascript"
   src="https://raw.github.com/username/repo/master/src/file.js"
></script>

you can use $.getScript jQuery function:

<script>
  $.getScript("https://raw.github.com/username/repo/master/src/file.js", function () {
    /* do something when loaded */
  });
</script>