Chrome refused to execute this JavaScript file

Question

In the head of my HTML page, I have:

<script src="https://raw.github.com/cloudhead/less.js/master/dist/less-1.3.3.js"></script>

When I load the page in my browser (Google Chrome v 27.0.1453.116) and enable the developer tools, it says:

Refused to execute script from 'https://raw.github.com/cloudhead/less.js/master/dist/less-1.3.3.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.

Indeed, the script won't run. Why does Chrome think this is a plain text file? It clearly has a .js file extension.

Since I'm using HTML5, I omitted the type attribute, so I thought that might be causing the problem. So I added type="text/javascript" to the <script> tag, and got the same result. I even tried type="application/javascript" and still got the same error.

Then I tried changing it to type="text/plain" just out of curiosity. The browser did not return an error, but of course the JavaScript did not run either.

Finally I thought the periods in the filename might be throwing the browser off. So in my HTML code, I changed all the periods to the URL escape character %2E:

<script src="https://raw.github.com/cloudhead/less%2Ejs/master/dist/less-1%2E3%2E3.js"></script>

This still did not work. The only thing that truly works (i.e. the browser does not give an error and the JS successfully runs) is if I download the file, upload it to a local directory, and then change the src value to the local file. I'd rather not do this since I'm trying to save space on my own website.

How do I get Chrome to recognize that the linked file is actually a JavaScript type?

Answer 1

Dec. 2018 edit

RawGit is now sunsetting due to malicious usage, so they recommend to use one of the following services instead:

• jsDelivr
• GitHub Pages
• CodeSandbox
• unpkg

---

Original post

Rawgithub.com allows users to take the "Raw" versions of a Git and turn it into a URL usable in <script> tags. It's quite easy to use, simply remove the first . from the raw URL. For example, this:

https://raw.github.com/joelambert/CSS-Animation-Store/master/cssanimationstore.js

would turn into this

https://rawgithub.com/joelambert/CSS-Animation-Store/master/cssanimationstore.js

and then you put it into a <script> tag with the appropriate type. That simple!

They do limit the number of requests because it is meant for development purposes only, not production.

2014 edit

As Reinderien mentioned, rawgithub is now just rawgit, so the new script link would be

https://rawgit.com/joelambert/CSS-Animation-Store/master/cssanimationstore.js

Answer 2

The problem you have is out of your control since this is how the hosting is setup at Github on the path that you have mentioned, Extension type is not only the factor when it comes to executing files since the web hosting can over-rule how a browser renders a file.

You could have a .zip file rendering as a .html file if the host was setup to do so, you can check this yourself by using firebug and viewing the header response against that is what is being requested.... so if you request a JS file but the header response returns a different expected value then the browsers will respect the header response and not whats being requested...

The github hosting on the raw subdomain is returning Content-Type text/plain; charset=utf-8 as the MIME type that means it will not exercute as JS but rather as raw text, below is an example what you would need the server to return in order to render the file, and further down is the code that is being returned by github.

A server that supports the JS MIME type will look something like:

Accept-Ranges   bytes
Connection  Keep-Alive
Content-Encoding    gzip
Content-Length  31097
Content-Type    application/javascript
Vary    Accept-Encoding
Request Headersview source
Accept  text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

And this is what https://raw.github.com/cloudhead/less.js/master/dist/less-1.3.3.js header is responding as as (RAW VIEW).

Accept-Ranges   bytes
Connection  Keep-Alive
Content-Disposition inline
Content-Encoding    gzip
Content-Length  41354
Content-Transfer-Encoding   binary
Content-Type    text/plain; charset=utf-8

Answer 3

The file extension is irrelevant, it's the Content-Type header that matters, and that file is served with a text/plain content type (which is the purpose of Github's "raw" view).

You should really download a copy of the file locally to your site and include it from there. Even if it did work from Github, since you're not loading the JS file asynchronously, putting that <script> tag in your page header makes your site dependent on Github's availability.

Answer 4

This is an intentional feature designed to prevent certain XSS attacks.

As Mike West explains, don't use raw.github.com as a CDN; use GitHub Pages instead.

Also, explicitly encoding unreserved characters won't change how the URL is treated.

Answer 5

As bybe points out the issue is that almost all content served up by raw.github.com is sent down as a text file - that way the content is rendered in plain text in your browser without any other applications or issues getting in the way. Otherwise you would get into the situation where attempting to view a .js file might cause the browser to attempt to run it rather than show it to you.

On top of that, neither github nor pages.github are trying to be a CDN. You should really either:

1. Host the file yourself, it's not that large.
2. Use a dedicated CDN for this and other static files on your site.
3. Use something like cdnjs.com who have various versions of lessjs available.