Including JavaScript files from GitHub into HTML pages

Question

PAY ATTENTION!

You can't include Github scripts directly from Github after this change.

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 there are alternatives. Check my answer to this question.

---

I am trying to include a JavaScript file from GitHub into a local HTML file for testing (like an image found on the internet: <img src="http://...">).

I would like something like this:

<script src="https://github.com/[username]/[repository]/blob/master/public/[fileName].js"></script> 

The problem is that this doesn't work.

How can I do this?

Answer 1

You will be able to do it with a URL similar to this:

https://rawgit.com/h5bp/html5-boilerplate/master/src/js/plugins.js 

Note that this is not the same as clicking on the "raw" button within GitHub; that button will also give you a clean version of the file, but it will be sent with the wrong headers.

---

A Word of warning; the file is not not being served from GitHub. It is being redirected through the rawgit.com domain. As is stated on https://rawgit.com:

Hey! rawgit.com is just for fun and is not associated with GitHub in any way.

Keep in mind that the owner of that domain is now in control of the traffic and is able to manipulate it as they see fit.

Answer 2

After enabling GitHub pages of your Repository, use following link:

<script src="https://[username].github.io/[repository]/[filename].js"></script>