Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Link and execute external JavaScript file hosted on GitHub

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> 
like image 459
AuthorProxy Avatar asked Jun 27 '13 10:06

AuthorProxy


People also ask

How do I link an external JavaScript code?

To include an external JavaScript file, we can use the script tag with the attribute src . You've already used the src attribute when using images. The value for the src attribute should be the path to your JavaScript file. This script tag should be included between the <head> tags in your HTML document.

How do I link to a GitHub file?

Linking to code On GitHub.com, navigate to the main page of the repository. Locate the code you'd like to link to: To link to code from a file, navigate to the file. To link to code from a pull request, navigate to the pull request and click Files changed.


2 Answers

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

Steps:

  1. Find your link on GitHub, and click to the "Raw" version.
  2. Copy the URL.
  3. Change raw.githubusercontent.com to cdn.jsdelivr.net
  4. Insert /gh/ before your username.
  5. Remove the branch name.
  6. (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.

like image 152
Troy Alford Avatar answered Oct 18 '22 00:10

Troy Alford


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

like image 29
Peeja Avatar answered Oct 18 '22 00:10

Peeja