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    lt script src  bootstrap-wysiwyg js  gt  lt  script gt    Non-working code    lt script src  https   raw github com mindmup bootstrap-wysiwyg master bootstrap-wysiwyg js  gt  lt  script gt

User · Answer

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    Requestly  Chrome   Firefox  Modify Headers  Firefox   If you use Requestly  I can suggest two solutions  Solution 1  Use Modify Headers Rule and remove the response header  Steps   Install Requestly from http   www requestly in Go to Rules Page Click on Add Icon to create a rule Select Modify Headers Give a Name and Descripton Select Remove -  Response -  X-Content-Type-Options In Source field  enter Url -  Contains -  raw githubusercontent com   Solution 2  Use Replace host Rule   Install Requestly from http   www requestly in Go to Rules Page Click on Add Icon to create a rule Replace raw githubusercontent com with rawgit com   Check this screenshot for more details  How to test  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   lt center id  msg  gt  lt  center gt    lt script src  https   raw githubusercontent com sachinjain024 practicebook master web-extensions-master storage background js  gt  lt  script gt   lt script gt  try     if  typeof BG Methods      undefoned         document getElementById  msg   innerHTML    Script evaluated successfully          catch  e      document getElementById  msg   innerHTML    Problem evaluating script      lt  script gt    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

User · Answer

I had the same issue as you  what I did is change to    lt script type  application javascript  src  bootstrap-wysiwyg js  gt  lt  script gt    It works for me

User · Answer

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

User · Answer

rawgithub com redirects to rawgit com So the above example would now be  http   rawgit com user package master link min js

User · Answer

Most simple way   lt script type  text plain  src  http   raw githubusercontent com user repo branch file js  gt  lt  script gt  Served by GitHub  and very reliable  With text plain   Without text plain

User · Answer

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

User · Answer

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

User · Answer

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     lt script gt      var sScriptURL    lt script-URL-here gt         var oReq   new XMLHttpRequest         oReq addEventListener  load           function fLoad    eval this responseText     r n    sourceURL     sScriptURL          oReq open  GET   sScriptURL   oReq send    false   lt  script gt    Note that appending of sourceURL comment is to allow for debuging of the script within browser s developer tools

User · Answer

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  lt username gt   lt repo gt   lt branch gt  path to file js   Use this URL to get the latest version   http   cdn jsdelivr net gh  lt username gt   lt repo gt  path to file js   Use this URL to get a specific version or commit hash   http   cdn jsdelivr net gh  lt username gt   lt repo gt   lt version or hash gt  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

User · Answer

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

User · Answer

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  lt link href        gt  or  lt script src       gt  lt  script gt  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  lt script src  https      user    github io    repo    file js  gt  lt  script gt   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

User · Answer

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

User · Answer

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

User · Answer

Alternatively  if generating your markup server-side  you can just fetch and inject  For example  in JSTL you could do this    lt script type  text javascript  gt       lt c import url  https   raw github com mindmup bootstrap-wysiwyg master bootstrap-wysiwyg js    gt   lt  script gt    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

User · Answer

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

[javascript] Link and execute external JavaScript file hosted on GitHub

Solution 1: Use Modify Headers Rule and remove the response header

Steps

Solution 2: Use Replace host Rule

How to test

Examples related to javascript

Examples related to github