web-dev-qa-db-fra.com

Lier et exécuter un fichier JavaScript externe hébergé sur GitHub

Lorsque j'essaie de modifier la référence liée d'un fichier JavaScript local en une version brute GitHub, mon fichier de test cesse de fonctionner. L'erreur est:

A refusé d'exécuter le script à partir de ... car son type MIME (text/plain) n'est pas exécutable et la vérification de type MIME stricte est activée.

Existe-t-il un moyen de désactiver ce comportement ou existe-t-il un service permettant de créer des liens vers des fichiers bruts GitHub?

Code de travail:

<script src="bootstrap-wysiwyg.js"></script>

Code non fonctionnel:

<script src="https://raw.github.com/mindmup/bootstrap-wysiwyg/master/bootstrap-wysiwyg.js"></script>
javascriptgithub
518
AuthorProxy

Là est une bonne solution de contournement pour cela, maintenant, en utilisant jsdelivr.net .

Étapes :

  1. Recherchez votre lien sur GitHub et cliquez sur la version "brute".
  2. Copiez l'URL.
  3. Remplacez raw.githubusercontent.com par cdn.jsdelivr.net
  4. Insérez /gh/ avant votre nom d'utilisateur.
  5. Supprimez le nom branch.
  6. (Facultatif) Insérez la version à laquelle vous souhaitez créer un lien, comme @version (si vous ne le faites pas, vous obtiendrez la dernière ). - pouvant entraîner une mise en cache à long terme)

Exemples :

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

Utilisez cette URL pour obtenir la dernière version:

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

Utilisez cette URL pour obtenir une version spécifique ou un hachage de validation:

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

Pour les environnements de production , envisagez de cibler une balise ou une validation spécifique plutôt que la branche. L'utilisation du lien latest peut entraîner la mise en cache à long terme du fichier et empêcher votre lien d'être mis à jour lors de l'envoi de nouvelles versions. La liaison à un fichier par commit-hash ou tag rend le lien unique à la version.

Pourquoi est-ce nécessaire?

En 2013, GitHub a commencé à utiliser X-Content-Type-Options: nosniff, qui demande aux navigateurs plus modernes d'appliquer une vérification de type MIME stricte. Il renvoie ensuite les fichiers bruts dans un type MIME renvoyé par le serveur, empêchant le navigateur d’utiliser le fichier tel que prévu (si le navigateur respecte le paramètre).

Pour plus d'informations sur ce sujet, veuillez vous référer à ce fil de discussion .

986
Troy Alford

Ce n'est plus possible. GitHub a explicitement désactivé la liaison chaude JavaScript, et les versions les plus récentes des navigateurs respectent ce paramètre.

Attention: le support de l'entête nosniff arrive sur Chrome et Firefox

55
Peeja

rawgithub.com redirige vers rawgit.com Ainsi, l'exemple ci-dessus serait maintenant

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

25
Paul Browne

Les réponses ci-dessus répondent clairement à la question mais je souhaite proposer une autre alternative - Un point de vue/approche différent pour résoudre le même problème.

Vous pouvez également utiliser une extension de navigateur pour supprimer l'en-tête de réponse X-Content-Type-Options des fichiers raw.githubusercontent.com. Il existe plusieurs extensions de navigateur permettant de modifier les en-têtes de réponse.

  1. Requestly: Chrome + Firefox
  2. Modifier les en-têtes: Firefox

Si vous utilisez Requestly, je peux suggérer deux solutions

Solution 1: utilisez la règle de modification des en-têtes et supprimez l'en-tête de la réponse.

Pas

  1. Installez Requestly depuis http://www.requestly.in
  2. Allez à page des règles
  3. Cliquez sur Ajouter une icône pour créer une règle.
  4. Sélectionnez Modifier les en-têtes.
  5. Donnez un nom et une description
  6. Sélectionnez Remove -> Response -> X-Content-Type-Options
  7. Dans le champ Source, entrez Url -> Contains -> raw.githubusercontent.com

Solution 2: utilisez la règle de remplacement d'hôte

  1. Installez Requestly depuis http://www.requestly.in
  2. Allez à page des règles
  3. Cliquez sur Ajouter une icône pour créer une règle.
  4. Remplacez raw.githubusercontent.com par rawgit.com

Vérifiez cette capture d'écran pour plus de détails enter image description here

Comment tester

Nous avons créé un simple JS Fiddle pour vérifier si nous pouvons utiliser des fichiers github bruts comme scripts dans notre code. Voici le Fiddle avec le code suivant

<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>

Si vous voyez Script evaluated successfully!, cela signifie que vous pouvez utiliser un fichier github brut dans votre code. Sinon Problem evaluating script indique qu'il y a un problème lors de l'exécution du script à partir de la source github brute.

J'ai aussi écrit n article sur blog Requestly à ce sujet. S'il vous plaît se référer pour plus de détails.

J'espère que ça aide!!

Disclaimer: Je suis l'auteur de Requestly Vous pouvez donc blâmer tout ce que vous n'aimez pas.

7
sachinjain024

Rendre les choses claires et courtes

//raw.githubusercontent.com -> //rawgit.com

Notez que ceci est géré par l'hébergement de développement de rawgit et non par leur cdn pour l'hébergement de production

6
Tomer Ben David

https://raw.githack.com/

trouvé ce site fournir un CDN pour

  • supprimer nosniff en-tête http
  • correction de mime type par nom d'ext

et ce site:

https://rawgit.com/

NOTE: RawGit a atteint la fin de sa vie utile

5
yurenchen

GitHub Pages est la solution officielle de GitHub pour résoudre ce problème.

raw.githubusercontent oblige tous les fichiers à utiliser le type MIME text/plain, même s'il s'agit d'un fichier CSS ou JavaScript. Donc, aller à https://raw.githubusercontent.com/‹user›/‹repo›/‹branch›/‹filepath› ne sera pas le type MIME correct, mais un fichier texte brut, et le relier via <link href="..."/> ou <script src="..."></script> ne fonctionnera pas - le CSS ne s'appliquera pas/le JS ne courra pas.

GitHub Pages héberge votre référentiel à une URL spéciale. Il vous suffit donc d’archiver vos fichiers et de Push. Notez que dans la plupart des cas, GitHub Pages vous oblige à vous engager dans une branche spéciale, gh-pages.

Sur votre nouveau site, qui est généralement https://‹user›.github.io/‹repo›, tous les fichiers validés dans la branche gh-pages (le dernier commit) sont présents dans cette URL. Vous pouvez alors créer un lien vers votre fichier js via <script src="https://‹user›.github.io/‹repo›/file.js"></script>, et ce sera le type MIME correct.

Avez-vous des fichiers de construction?

Personnellement, je vous recommande d’exécuter cette branche parallèlement à master. Sur la branche gh-pages, vous pouvez éditer votre fichier .gitignore pour archiver tous les fichiers dist/build dont vous avez besoin pour votre site (par exemple, si vous avez fichiers minifiés/compilés), tout en en les gardant ignorés sur votre branche master. Ceci est utile car vous ne souhaitez généralement pas suivre les modifications dans les fichiers de construction de votre référentiel habituel. À chaque fois que vous souhaitez mettre à jour vos fichiers hébergés, il vous suffit de fusionner master dans gh-pages, de reconstruire, de valider, puis de Push.

(protip: vous pouvez fusionner et reconstruire dans le même commit en procédant comme suit:) 

$ 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
5
chharvey

Mon cas d'utilisation était de charger ' bookmarklets ' directement depuis mon compte Bitbucket qui a les mêmes restrictions que Github. Le travail autour duquel j'ai trouvé consistait à AJAX pour le script et à exécuter eval sur la chaîne de réponse. L'extrait ci-dessous est basé sur cette approche.

<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>

Notez que l'ajout du commentaire sourceURL permet d'autoriser le débogage du script dans les outils de développement du navigateur.

4
Daniel Sokolowski

Lorsqu'un fichier est téléchargé sur github, vous pouvez l'utiliser comme source externe ou comme hébergement gratuit. Troy Alford l'a bien expliqué ci-dessus. Mais pour que ce soit plus facile, laissez-moi vous expliquer quelques étapes faciles, puis vous pourrez utiliser un fichier brut github sur votre site:

Voici le lien de votre fichier:

https://raw.githubusercontent.com/mindmup/bootstrap-wysiwyg/master/bootstrap-wysiwyg.js

Maintenant, pour l'exécuter, vous devez supprimer https: // et le point (.) Entre raw et contenu githubus

Comme ça:

rawgithubusercontent.com/mindmup/bootstrap-wysiwyg/master/bootstrap-wysiwyg.js

Maintenant, lorsque vous visiterez ce lien, vous obtiendrez un lien qui peut être utilisé pour appeler votre javascript:

Voici le dernier lien:

https://rawgit.com/mindmup/bootstrap-wysiwyg/master/bootstrap-wysiwyg.js

De même, si vous hébergez un fichier css, vous devez le faire comme mentionné ci-dessus. C'est le moyen le plus simple d'obtenir un lien simple pour appeler votre fichier css ou javascript externe hébergé sur github.

J'espère que ceci est utile.

URL de référence: http://101helper.blogspot.com/2015/11/store-blogger-codes-on-github-boost-blogger-speed.html

1
Fahim Raza

J'ai eu le même problème que vous, ce que j'ai fait est de changer à

<script type="application/javascript" src="bootstrap-wysiwyg.js"></script>

Ça marche pour moi.

1
Yiting Gu

J'ai trouvé que l'erreur était due aux commentaires au début du fichier, vous pouvez résoudre ce problème en créant simplement votre propre fichier sans commentaire et Push to git, cela ne montre aucune erreur

Pour preuve, vous pouvez essayer ces deux fichiers avec le même code de pagination facile:

sans commentaire

avec commentaire

1
santosh

raw.github.com n'est pas vraiment un accès brut au fichier, mais une vue rendue par Rails. Donc, accéder à raw.github.com est beaucoup plus lourd que nécessaire. Je ne sais pas pourquoi raw.github.com est implémenté sous la forme d'une vue Rails. Au lieu de résoudre ce problème de route, GitHub a ajouté un en-tête X-Content-Type-Options: nosniff.

Solution de contournement:

  • Mettez le script à user.github.io/repo
  • Utilisez un CDN tiers tel que rawgit.com.
0
weakish

Sinon, si vous générez votre balise côté serveur, vous pouvez simplement extraire et injecter. Par exemple, dans JSTL, vous pouvez faire ceci:

<script type="text/javascript">
    <c:import url="https://raw.github.com/mindmup/bootstrap-wysiwyg/master/bootstrap-wysiwyg.js" />
</script>

Ils n'autorisent pas la création de liens pour une raison quelconque, donc probablement une mauvaise forme si vous voulez être un bon citoyen. Je vous suggérerais de mettre en cache ce code javascript et de ne le récupérer que de temps à autre à votre guise.

0
matt burns