Link and execute external JavaScript file hosted on GitHub

Question

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>

same as http://stackoverflow.com/questions/8779197/linking-files-directly-from-github/24425890#24425890 — Nitesh, Jun 26 '14 at 08:35
@MuhammadUmer - only if your source files *never change*. `rawgit` cache [never updates](https://stackoverflow.com/q/23537239/104380). — vsync, Jul 05 '18 at 14:43
@vsync you can append the date to the url as a query param and it will update (won't use the cache, force new read) — Alexander Mills, Dec 08 '18 at 09:37
2019: JUST SKIP ALL ANSWERS MENTIONING RAW OR RAWGIT. Rawgit is dead. Go down to the answer from chharwey and upvote it until it gets to the top. That is the good one: the simplest, that uses the official GitHub preferred approach. — Marco Faustinelli, Jan 26 '19 at 19:47
Related (but older) question: https://stackoverflow.com/questions/62901066/raw-github-js-file-not-loading-direct-link-like-cdn — Hello, Aug 13 '22 at 17:40

score 1080 · Accepted Answer · edited Oct 22 '18 at 15:17

1080

There is a good workaround for this, now, by using jsdelivr.net.

Steps:

Find your link on GitHub, and click to the "Raw" version.
Copy the URL.
Change raw.githubusercontent.com to cdn.jsdelivr.net
Insert /gh/ before your username.
Remove the branch name.
(Optional) Insert the version you want to link to, as @version (if you do not do this, you will get the latest - which may cause long-term caching)

Examples:

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

Use this URL to get the latest version:

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

Use this URL to get a specific version or commit hash:

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

For production environments, consider targeting a specific tag or commit-hash rather than the branch. Using the latest link may result in long-term caching of the file, causing your link to not be updated as you push new versions. Linking to a file by commit-hash or tag makes the link unique to version.

Why is this needed?

In 2013, GitHub started using X-Content-Type-Options: nosniff, which instructs more modern browsers to enforce strict MIME type checking. It then returns the raw files in a MIME type returned by the server, preventing the browser from using the file as-intended (if the browser honors the setting).

For background on this topic, please refer to this discussion thread.

edited Oct 22 '18 at 15:17

chharvey

8,580
9
56
95

answered Aug 05 '13 at 02:34

Troy Alford

26,660
10
64
82

14

Also works for gists. I was able to replace `gist.githubusercontent.com` with `rawgist.com` and got it working. – haridsv Jan 31 '15 at 12:50
7

I don't know who mantains this site rawgit, but don't use it in production. You would have an unknown third party that can inject any javascript in your site. – neves Oct 05 '17 at 18:58
Keep in mind that its caching files permanently. So when you update your file it will keep the old version. – Maciej Krawczyk Oct 11 '17 at 14:57
2

@Maciej Krawczyk - yes - the page explicitly encourages you to use a commit-specific link, rather than a branch link, for exactly this reason. – Troy Alford Oct 12 '17 at 16:06
This is far from ideal, since the *rawgit* [never updates](https://stackoverflow.com/q/23537239/104380) the file if it was updated on github, therefor one must update all the urls using the rawgit everywhere... sucks. – vsync Jul 05 '18 at 14:41
@vsync Though I think I already covered that limitation in the answer, I edited just now to make it even more clear/explicit both what the problem is - and how to overcome it for folks wanting to use the CDN features. – Troy Alford Jul 05 '18 at 16:53
Here's a script that change the URL to the correct (latest) jsdelivr version for you: `var path = window.location.pathname.split('/'); path = [...path.slice(1, 3), ...path.slice(4, path.length)]; path = path.join('/'); window.location = 'http://cdn.jsdelivr.net/gh/' + path; ` – Stephen Saucier Dec 27 '18 at 13:36
Come on, people, seriously?! Approach with `jsdelivr` or `rawgit` introduces a huge vulnerability. You basically trust some random guys your fronted app. @chharvey answer is way much better. – Hades Architect Jul 25 '22 at 13:29

score 61 · Answer 2 · edited Dec 24 '16 at 00:25

61

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

edited Dec 24 '16 at 00:25

Zombo

1
62
391
407

answered Jun 28 '13 at 20:47

Peeja

13,683
11
58
77

score 26 · Answer 3 · answered May 21 '14 at 14:18

26

rawgithub.com redirects to rawgit.com So the above example would now be

http://rawgit.com/user/package/master/link.min.js

answered May 21 '14 at 14:18

Paul Browne

752
1
7
14

Visit https://rawgit.com/ and paste the url for the file or gist. It will generate a valid url for you. – Marcelo Vani Jan 20 '17 at 01:05
10

**rawgit** is now discontinued (as of 2018-10-08): https://rawgit.com/ . recommend updating this answer. – chharvey Oct 22 '18 at 02:56
1

RawGit is now in a sunset phase and will soon shut down. Read more https://rawgit.com/ – Sorry IwontTell Jun 26 '20 at 12:21

score 19 · Answer 4 · answered Oct 22 '18 at 03:16

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.

Do you have build files?

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

yurenchen · Answer 5 · 2019-01-11T19:02:05.357

9

https://raw.githack.com/

found this site supply a CDN for

remove nosniff http header
fix mime type by ext name

and this site:

https://rawgit.com/

NOTE: RawGit has reached the end of its useful life

edited Jan 11 '19 at 19:02

answered Mar 06 '17 at 10:35

yurenchen

1,897
19
17

Sachin Jain · Answer 6 · 2022-08-19T00:58:03.097

You can also use a browser extension to remove the X-Content-Type-Options response header for raw.githubusercontent.com files. There are a couple of browser extensions to modify response headers.

Remove X-Content-Type-Options response header using Requestly

Install Requestly for your browser
Open Rules Page
Click create rule & Select Modify Headers In Source field, enter Url -> Contains -> raw.githubusercontent.com
In Response Headers section, Remove -> X-Content-Type-Options

How to test

I 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 the script from raw github source.

Note This will only work on your machine So you won't be able to deploy to production. This approach lets you quickly use the files in any Github repostiory without much hassle.

Disclaimer: I am the author of Requestly So you can blame for anything you don't like.

rawgit.com is no longer a thing so your post needs updating @Paul — Hello, Aug 13 '22 at 17:46
Thanks, @Hello! Updated my answer and removed the solution referring to rawgit.com — Sachin Jain, Aug 19 '22 at 00:48

Daniel Sokolowski · Answer 7 · 2016-05-13T16:37:44.897

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.

score 5 · Answer 8 · edited Jan 20 '16 at 18:19

5

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

edited Jan 20 '16 at 18:19

Chris Marisic

32,487
24
164
258

answered Oct 04 '15 at 17:53

Tomer Ben David

8,286
1
43
24

Default raw URL seems to have changed since this answer so conversion is now `https://raw.githubusercontent.com` --> `https://rawgit.com` Otherwise this answer is clearest and works. – mikeym Nov 02 '15 at 19:24
4

**rawgit** is now discontinued (as of 2018-10-08): https://rawgit.com/ . recommend updating this answer. – chharvey Oct 22 '18 at 02:55

score 1 · Answer 9 · answered Jan 04 '16 at 08:57

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

**rawgit** is now discontinued (as of 2018-10-08): https://rawgit.com/ . recommend updating this answer. — chharvey, Oct 22 '18 at 02:56

score 1 · Answer 10 · answered Jan 29 '17 at 06:49

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 :

without comment

with comment

score 1 · Answer 11 · answered Jun 10 '18 at 02:23

1

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.

answered Jun 10 '18 at 02:23

Yiting Gu

11
1

change from what to what? please show the before and after – Alexander Mills Dec 08 '18 at 09:11

score 1 · Answer 12 · answered Feb 07 '20 at 06:24

1

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

answered Feb 07 '20 at 06:24

antelove

3,216
26
20

score 0 · Answer 13 · answered May 31 '16 at 02:12

0

Most simple way:
<script type="text/plain" src="http://raw.githubusercontent.com/user/repo/branch/file.js"></script>
Served by GitHub,
and

very

reliable.
With text/plain

Without text/plain

answered May 31 '16 at 02:12

This is the best solution, it just works and makes so much sense. – a20 Aug 10 '16 at 05:49
2

no. all this does is prevent the script from even running – Zombo Dec 24 '16 at 00:44
2

It wont work anymore soon. From my Android device logcat: "Fetching scripts with an invalid type/language attributes is deprecated and will be removed in M56, around January 2017. See https://www.chromestatus.com/features/5760718284521472 for more details." – Jens Hauke Jan 31 '17 at 11:48

score 0 · Answer 14 · answered Aug 27 '16 at 13:34

0

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:

Put the script to user.github.io/repo
Use a third party CDN like rawgit.com.

answered Aug 27 '16 at 13:34

weakish

28,682
5
48
60

For anyone else confused by this, they did it intentionally. You used to be able to simply use `raw.github.com` to load files - and then github realized they were being used as a CDN, which was causing them far too much traffic. As a result, they changed it to this type of rendering with the `X-Content-Type-Options: nosniff` header, specifically to preclude people from using their service that way. – Troy Alford Nov 07 '19 at 16:53

score 0 · Answer 15 · answered May 16 '17 at 13:58

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.

Link and execute external JavaScript file hosted on GitHub

15 Answers15

Do you have build files?

Remove X-Content-Type-Options response header using Requestly

How to test

very

Linked

Related