Verknüpfen und Ausführen einer externen JavaScript-Datei, die auf GitHub gehostet wird

Wenn ich versuche, die verknüpfte Referenz einer lokalen JavaScript-Datei in eine GitHub-Rohversion zu ändern, funktioniert meine Testdatei nicht mehr. Der Fehler ist:

Weigerte sich, Skript von … auszuführen, weil sein MIME-Typ (text/plain) ist nicht ausführbar und die strenge Überprüfung des MIME-Typs ist aktiviert.

Gibt es eine Möglichkeit, dieses Verhalten zu deaktivieren, oder gibt es einen Dienst, der das Verlinken von GitHub-Rohdateien ermöglicht?

Arbeitscode:

<script src="https://stackoverflow.com/questions/17341122/bootstrap-wysiwyg.js"></script>

Nicht funktionierender Code:

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

Dort ist eine gute Problemumgehung dafür, jetzt, indem Sie verwenden jsdelivr.net.

Schritte:

1. Suchen Sie Ihren Link auf GitHub und klicken Sie auf die „Raw“-Version.
2. Kopieren Sie die URL.
3. Ändern raw.githubusercontent.com zu cdn.jsdelivr.net
4. Einfügung /gh/ vor Ihrem Benutzernamen.
5. Entferne das branch Name.
6. (Optional) Fügen Sie die ein Ausführung Sie möchten verlinken, als @version (Wenn Sie dies nicht tun, erhalten Sie die neueste – was zu langfristigem Caching führen kann)

Beispiele:

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

Verwenden Sie diese URL, um die neueste Version zu erhalten:

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

Verwenden Sie diese URL, um eine bestimmte Version oder einen Commit-Hash zu erhalten:

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

Für Produktionsumgebungen, erwägen Sie, auf ein bestimmtes Tag oder einen bestimmten Commit-Hash statt auf den Zweig abzuzielen. Verwendung der neueste Link kann zu einem langfristigen Zwischenspeichern der Datei führen, was dazu führt, dass Ihr Link nicht aktualisiert wird, wenn Sie neue Versionen übertragen. Das Verlinken auf eine Datei per Commit-Hash oder Tag macht den Link eindeutig für die Version.

Warum wird das benötigt?

Im Jahr 2013 begann GitHub mit der Verwendung X-Content-Type-Options: nosniff, das modernere Browser anweist, eine strenge Überprüfung des MIME-Typs zu erzwingen. Anschließend werden die Rohdateien in einem vom Server zurückgegebenen MIME-Typ zurückgegeben, wodurch verhindert wird, dass der Browser die Datei wie vorgesehen verwendet (sofern der Browser die Einstellung berücksichtigt).

Hintergrundinformationen zu diesem Thema finden Sie unter diesen Diskussionsthread.

Dies ist nicht mehr möglich. GitHub hat JavaScript-Hotlinking ausdrücklich deaktiviert, und neuere Versionen von Browsern respektieren diese Einstellung.

Achtung: Nosniff-Header-Unterstützung für Chrome und Firefox

rawgithub.com Weiterleitungen zu rawgit.com Also das obige Beispiel wäre jetzt

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

GitHub-Seiten ist die offizielle Lösung von GitHub für dieses Problem.

raw.githubusercontent macht alle Dateien verwenden die text/plain MIME-Typ, auch wenn die Datei eine CSS- oder JavaScript-Datei ist. Also gehen https://raw.githubusercontent.com/‹user›/‹repo›/‹branch›/‹filepath› wird nicht der richtige MIME-Typ sein, sondern eine Klartextdatei, und die Verknüpfung über <link href="https://stackoverflow.com/questions/17341122/..."/> oder <script src="https://stackoverflow.com/questions/17341122/..."></script> wird nicht funktionieren – das CSS wird nicht angewendet / das JS wird nicht ausgeführt.

GitHub-Seiten hostet Ihr Repo unter einer speziellen URL, sodass Sie Ihre Dateien nur einchecken und pushen müssen. Beachten Sie, dass GitHub Pages in den meisten Fällen erfordert, dass Sie sich auf einen speziellen Zweig festlegen, gh-pages.

Auf Ihrer neuen Website, was normalerweise der Fall ist https://‹user›.github.io/‹repo›jede Datei, die der gh-pages branch (der neueste Commit) ist unter dieser URL vorhanden. Dann können Sie Ihre js-Datei über verlinken <script src="https://‹user›.github.io/‹repo›/file.js"></script>und dies ist der richtige MIME-Typ.

Hast du Build-Dateien?

Meine persönliche Empfehlung ist, diesen Zweig parallel zu betreiben master. Auf der gh-pages Filiale, können Sie Ihre bearbeiten .gitignore Datei zu Einchecken alle Dist/Build-Dateien, die Sie für Ihre Site benötigen (z. B. wenn Sie minifizierte/kompilierte Dateien haben), während sie ignoriert zu lassen auf Ihrem master sich verzeigen. Dies ist nützlich, da Sie normalerweise keine Änderungen in Build-Dateien in Ihrem regulären Repository nachverfolgen möchten. Jedes Mal, wenn Sie Ihre gehosteten Dateien aktualisieren möchten, führen Sie sie einfach zusammen master hinein gh-pagesneu erstellen, committen und dann pushen.

(Tipp: Mit diesen Schritten können Sie im selben Commit zusammenführen und neu erstellen:)

$ 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

Die obigen Antworten beantworten die Frage eindeutig, aber ich möchte eine andere Alternative anbieten – eine andere Ansicht / einen anderen Ansatz zur Lösung des ähnlichen Problems.

Sie können auch die Browsererweiterung zum Entfernen verwenden X-Content-Type-Options Antwortheader für raw.githubusercontent.com Dateien. Es gibt einige Browsererweiterungen zum Ändern von Antwortheadern.

1. Auf Anfrage: Chrome + Firefox
2. Kopfzeilen ändern: Firefox

Wenn Sie Requestly verwenden, kann ich zwei Lösungen vorschlagen

Lösung 1: Verwenden Sie die Modify Headers Rule und entfernen Sie den Response-Header

Schritte

1. Installieren Sie Requestly von http://www.requestly.in
2. Gehe zu Regelseite
3. Klicken Sie auf Symbol hinzufügen, um eine Regel zu erstellen
4. Wählen Sie Kopfzeilen ändern aus
5. Geben Sie einen Namen und eine Beschreibung an
6. Auswählen Remove -> Response -> X-Content-Type-Options
7. Geben Sie im Feld Quelle ein Url -> Contains -> raw.githubusercontent.com

Lösung 2: Verwenden Sie die Regel zum Ersetzen des Hosts

1. Installieren Sie Requestly von http://www.requestly.in
2. Gehe zu Regelseite
3. Klicken Sie auf Symbol hinzufügen, um eine Regel zu erstellen
4. Ersetzen raw.githubusercontent.com mit rawgit.com

Überprüfen Sie diesen Screenshot für weitere Details

Wie man testet

Wir haben eine einfache JS-Fiddle erstellt, um zu testen, ob wir rohe Github-Dateien als Skripte in unserem Code verwenden können. Hier ist das Geige
mit folgendem 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>

Wenn du siehst Script evaluated successfully!Dies bedeutet, dass Sie in Ihrem Code eine rohe Github-Datei verwenden können Problem evaluating script zeigt an, dass beim Ausführen des Skripts aus der rohen Github-Quelle ein Problem aufgetreten ist.

Ich habe auch geschrieben ein Artikel an Bitte bloggen darüber. Bitte beziehen Sie sich für weitere Details darauf.

Ich hoffe es hilft!!

Haftungsausschluss: Ich bin Autor von Bitte Also kannst du für alles verantwortlich machen, was dir nicht gefällt.

https://raw.githack.com/

fand diese Seite ein CDN für

• Löschen nosniff http-Header
• Fix mime type nach externem Namen

und diese Seite:

https://rawgit.com/

HINWEIS: RawGit hat das Ende seiner Nutzungsdauer erreicht

Um die Dinge klar und kurz zu machen

//raw.githubusercontent.com –> //rawgit.com

Beachten Sie, dass dies vom Entwicklungshosting von rawgit und nicht von deren cdn für das Produktionshosting gehandhabt wird