Link und Ausführen der externen JavaScript-Datei, die auf GitHub gehostet wird

Question

Wenn ich versuche, den verlinkten Verweis einer lokalen JavaScript-Datei auf eine GitHub-Rohversion zu ändern, funktioniert meine Testdatei nicht mehr. Der Fehler lautet:

Die Ausführung des Skripts wurde abgelehnt, ... da ihr MIME-Typ (text/plain) nicht ausführbar ist und die strikte MIME-Typ-Überprüfung aktiviert ist.

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

Funktionierender Code:

Nicht funktionierender Code:

Answer 1

Es gibt jetzt einen guten Workaround für dieses Problem, indem Sie jsdelivr.net verwenden.

Schritte:

1. Finden Sie Ihren Link auf GitHub und klicken Sie auf die "Raw"-Version.
2. Kopieren Sie die URL.
3. Ändern Sie raw.githubusercontent.com in cdn.jsdelivr.net
4. Fügen Sie /gh/ vor Ihrem Benutzernamen ein.
5. Entfernen Sie den Branch-Namen.
6. (Optional) Fügen Sie die Version hinzu, zu der Sie verlinken möchten, als @version (wenn Sie dies nicht tun, erhalten Sie die aktuellste - was langfristiges Caching verursachen kann)

---

Beispiele:

http://raw.githubusercontent.com////path/to/file.js

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

http://cdn.jsdelivr.net/gh///path/to/file.js

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

http://cdn.jsdelivr.net/gh//@/path/to/file.js

Für Produktionsumgebungen ist es ratsam, ein spezifisches Tag oder Commit-Hash anstelle des Branches anzugeben. Die Verwendung des aktuellsten Links kann dazu führen, dass die Datei langfristig gecacht wird, was dazu führt, dass Ihr Link nicht aktualisiert wird, wenn Sie neue Versionen veröffentlichen. Durch Verlinken einer Datei über den Commit-Hash oder das Tag wird der Link eindeutig für die Version.

---

Warum ist dies erforderlich?

Im Jahr 2013 begann GitHub, X-Content-Type-Options: nosniff zu verwenden, was modernere Browser dazu anweist, eine strenge MIME-Typ-Überprüfung durchzusetzen. Anschließend gibt es die Rohdateien in einem MIME-Typ zurück, der vom Server zurückgegeben wird, wodurch verhindert wird, dass der Browser die Datei wie beabsichtigt verwendet (wenn der Browser die Einstellung respektiert).

Weitere Informationen zu diesem Thema finden Sie in diesem Diskussions-Thread.

Answer 2

Dies ist nicht mehr möglich. GitHub hat die JavaScript-Hotlinking explizit deaktiviert, und neuere Browser-Versionen respektieren diese Einstellung.

Achtung: Unterstützung für nosniff-Header kommt in Chrome und Firefox

Answer 3

rawgithub.com leitet um zu rawgit.com So würde das obige Beispiel jetzt sein

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

Answer 4

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

raw.githubusercontent sorgt dafür, dass alle Dateien den MIME-Typ text/plain verwenden, auch wenn es sich um eine CSS- oder JavaScript-Datei handelt. Wenn Sie also zu https://raw.githubusercontent.com/‹user›/‹repo›/‹branch›/‹filepath› gehen, handelt es sich nicht um den richtigen MIME-Typ, sondern um eine Klartextdatei, und das Verlinken über oder funktioniert nicht - das CSS wird nicht angewendet / das JS wird nicht ausgeführt.

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

Auf Ihrer neuen Website, die normalerweise https://‹user›.github.io/‹repo› ist, wird jede in den gh-pages-Branch eingecheckte Datei (der aktuellste Commit) unter dieser URL angezeigt. Sie können also Ihre JS-Datei über verlinken, und dies wird der richtige MIME-Typ sein.

Haben Sie Build-Dateien?

Persönlich empfehle ich, diesen Branch parallel zu master laufen zu lassen. Im gh-pages-Branch können Sie Ihre .gitignore-Datei bearbeiten, um alle Dist-/Build-Dateien einzuchecken, die Sie für Ihre Website benötigen (z.B. wenn Sie irgendwelche minifizierten/kompilierten Dateien haben), während Sie sie auf Ihrem master-Branch weiterhin ignorieren. Dies ist nützlich, da Sie in der Regel keine Änderungen an Build-Dateien in Ihrem regulären Repo verfolgen möchten. Jedes Mal, wenn Sie Ihre gehosteten Dateien aktualisieren möchten, mergen Sie einfach master in gh-pages, bauen, commiten und pushen dann.

(Profi-Tipp: Sie können mergen und neu aufbauen in demselben Commit mit folgenden Schritten:)

$ git checkout gh-pages
$ git merge --no-ff --no-commit master  # Bereiten Sie den Merge vor, commiten Sie ihn aber nicht (als ob es einen Merge-Konflikt gäbe)
$ npm run build                         # (oder was auch immer Ihr Build-Prozess ist)
$ git add .                             # Stagen der neu erstellten Dateien
$ git merge --continue                  # Commit des Merges
$ git push origin gh-pages

Answer 5

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 hat das Ende seiner Lebensdauer erreicht