Chrome hat die Ausführung dieser JavaScript-Datei abgelehnt

Im Kopf meiner HTML-Seite habe ich:

<script src="https://raw.github.com/cloudhead/less.js/master/dist/less-1.3.3.js"></script>

Wenn ich die Seite in meinen Browser lade (Google Chrome v 27.0.1453.116) und die Entwicklertools aktiviere, heißt es:

Es wurde abgelehnt, ein Skript von " https://raw.github.com/cloudhead/less.js/master/dist/less-1.3.3.js " auszuführen , da sein MIME-Typ ("text / plain") nicht ausführbar ist Die strikte Überprüfung des MIME-Typs ist aktiviert.

In der Tat wird das Skript nicht ausgeführt. Warum ist Chrome der Ansicht, dass dies eine reine Textdatei ist? Es hat eindeutig eine .jsDateierweiterung.

Da ich HTML5 verwende, habe ich das typeAttribut weggelassen , sodass ich dachte, dass dies das Problem verursachen könnte. Also habe ich type="text/javascript"den <script>Tag erweitert und das gleiche Ergebnis erzielt. Ich habe es sogar versucht type="application/javascript"und trotzdem den gleichen Fehler erhalten.

Dann versuchte ich es type="text/plain"aus Neugierde zu ändern . Der Browser hat keinen Fehler zurückgegeben, aber natürlich lief auch das JavaScript nicht.

Schließlich dachte ich, die Punkte im Dateinamen könnten den Browser ausschalten. Daher habe ich in meinem HTML-Code alle Punkte in das URL-Escape-Zeichen geändert %2E:

<script src="https://raw.github.com/cloudhead/less%2Ejs/master/dist/less-1%2E3%2E3.js"></script>

Das hat immer noch nicht funktioniert. Das einzige, was wirklich funktioniert (dh der Browser gibt keinen Fehler aus und der JS wird erfolgreich ausgeführt), ist, dass ich die Datei herunterlade, in ein lokales Verzeichnis hochlade und dann den srcWert in die lokale Datei ändere . Ich mache das lieber nicht, da ich versuche, Platz auf meiner eigenen Website zu sparen.

Woran erkennt Chrome, dass es sich bei der verknüpften Datei um einen JavaScript-Typ handelt?

Das Problem, das Sie haben, liegt außerhalb Ihrer Kontrolle, da auf diese Weise das Hosting bei Github auf dem von Ihnen angegebenen Pfad eingerichtet wird. Der Erweiterungstyp ist nicht nur der Faktor, wenn es um die Ausführung von Dateien geht, da das Webhosting übersteuern kann, wie ein Browser rendert eine Datei.

Sie könnten eine .zip-Datei als .html-Datei rendern lassen, wenn der Host dafür eingerichtet wurde. Sie können dies selbst überprüfen, indem Sie Firebug verwenden und die Header-Antwort anhand der angeforderten Werte anzeigen Eine JS-Datei, aber die Header-Antwort gibt einen anderen erwarteten Wert zurück, als die Browser die Header-Antwort berücksichtigen und nicht, was angefordert wird.

Das Github-Hosting auf der unformatierten Unterdomäne gibt Content-Type text/plain; charset=utf-8als MIME-Typ zurück, dh es wird nicht als JS, sondern als unformatierter Text ausgeführt. Nachfolgend sehen Sie ein Beispiel, das der Server zum Rendern der Datei zurückgeben müsste Der Code, der von Github zurückgegeben wird.

Ein Server, der den JS-MIME-Typ unterstützt, sieht folgendermaßen aus:

Accept-Ranges   bytes
Connection  Keep-Alive
Content-Encoding    gzip
Content-Length  31097
Content-Type    application/javascript
Vary    Accept-Encoding
Request Headersview source
Accept  text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

Und das ist, was https://raw.github.com/cloudhead/less.js/master/dist/less-1.3.3.jsHeader als (RAW VIEW) reagiert.

Accept-Ranges   bytes
Connection  Keep-Alive
Content-Disposition inline
Content-Encoding    gzip
Content-Length  41354
Content-Transfer-Encoding   binary
Content-Type    text/plain; charset=utf-8

Dezember 2018 bearbeiten

RawGit geht jetzt aufgrund böswilliger Nutzung unter, daher wird empfohlen, stattdessen einen der folgenden Dienste zu verwenden:

• jsDelivr
• GitHub-Seiten
• CodeSandbox
• auspacken

Ursprünglicher Beitrag

Mit Rawgithub.com können Benutzer die "Raw" -Versionen eines Git in eine in <script>Tags verwendbare URL umwandeln . Es ist ganz einfach zu bedienen, entfernen Sie einfach die erste .von der rohen URL. Zum Beispiel das:

https://raw.github.com/joelambert/CSS-Animation-Store/master/cssanimationstore.js

würde sich in diese verwandeln

https://rawgithub.com/joelambert/CSS-Animation-Store/master/cssanimationstore.js

und dann setzen Sie es in ein <script>Tag mit dem entsprechenden Typ. So einfach!

Sie begrenzen die Anzahl der Anforderungen, da sie nur für Entwicklungszwecke und nicht für die Produktion bestimmt sind.

2014 bearbeiten

Wie Reinderien bereits erwähnt hat, ist rawgithub jetzt nur noch rawgit, also wäre der neue Skriptlink

https://rawgit.com/joelambert/CSS-Animation-Store/master/cssanimationstore.js

Die Dateierweiterung ist irrelevant, es kommt auf den Content-Type-Header an und diese Datei wird mit einem Content-Type geliefert text/plain(was der Zweck von Githubs "Raw" -Ansicht ist).

Sie sollten wirklich eine Kopie der Datei lokal auf Ihre Site herunterladen und von dort einbinden. Selbst wenn es von Github aus funktioniert hat, da Sie die JS-Datei nicht asynchron laden, macht das Einfügen dieses <script>Tags in den Seitenkopf Ihre Site von der Verfügbarkeit von Github abhängig.

Dies ist eine beabsichtigte Funktion, mit der bestimmte XSS-Angriffe verhindert werden sollen .

Wie Mike West erklärt , nicht raw.github.comals CDN verwenden; Verwenden Sie stattdessen GitHub Pages .

Das explizite Codieren nicht reservierter Zeichen ändert auch nichts an der Behandlung der URL.

Wie bybe feststellt, liegt das Problem darin, dass fast alle von raw.github.com bereitgestellten Inhalte als Textdatei gesendet werden. Auf diese Weise werden die Inhalte in Ihrem Browser im Klartext wiedergegeben, ohne dass andere Anwendungen oder Probleme im Weg stehen. Andernfalls könnte es vorkommen, dass der Browser versucht, eine .js-Datei anzuzeigen, und versucht, sie auszuführen, anstatt sie Ihnen anzuzeigen.

Außerdem versuchen weder github noch pages.github, eine CDN zu sein. Sie sollten wirklich entweder:

1. Hosten Sie die Datei selbst, sie ist nicht so groß.
2. Verwenden Sie eine dedizierte CDN für diese und andere statische Dateien auf Ihrer Site.
3. Verwenden Sie etwas wie cdnjs.com, für das verschiedene Versionen von lessjs verfügbar sind .