Chrome odmówił wykonania tego pliku JavaScript

W nagłówku mojej strony HTML mam:

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

Gdy ładuję stronę w przeglądarce (Google Chrome w wersji 27.0.1453.116) i włączam narzędzia programistyczne, mówi:

Odmówiono wykonania skryptu z „ https://raw.github.com/cloudhead/less.js/master/dist/less-1.3.3.js ”, ponieważ jego typ MIME („tekst / zwykły”) nie jest wykonywalny, oraz ścisłe sprawdzanie typu MIME jest włączone.

Rzeczywiście, skrypt nie uruchomi się. Dlaczego Chrome uważa, że ​​jest to zwykły plik tekstowy? Wyraźnie ma .jsrozszerzenie pliku.

Ponieważ używam HTML5, pominąłem ten typeatrybut, więc pomyślałem, że to może być przyczyną problemu. Dodałem więc type="text/javascript"do <script>tagu i uzyskałem ten sam wynik. Próbowałem nawet type="application/javascript"i nadal mam ten sam błąd.

Potem spróbowałem zmienić to na type="text/plain"ciekawość. Przeglądarka nie zwróciła błędu, ale oczywiście JavaScript też nie działał.

Wreszcie pomyślałem, że kropki w nazwie pliku mogą powodować wyłączenie przeglądarki. W moim kodzie HTML zmieniłem wszystkie kropki na znak zmiany znaczenia adresu URL %2E:

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

To wciąż nie działało. Jedyne, co naprawdę działa (tzn. Przeglądarka nie wyświetla błędu i JS działa poprawnie), to jeśli pobiorę plik, załaduję go do lokalnego katalogu, a następnie zmienię srcwartość na plik lokalny. Wolałbym tego nie robić, ponieważ staram się oszczędzać miejsce na własnej stronie internetowej.

Jak sprawić, by Chrome rozpoznał, że połączony plik jest w rzeczywistości typem JavaScript?

Problem, na który masz wpływ, jest poza twoją kontrolą, ponieważ w ten sposób skonfigurowano hosting w Github na wspomnianej ścieżce. Typ rozszerzenia jest nie tylko czynnikiem decydującym o wykonywaniu plików, ponieważ hosting może przesadzić, jak przeglądarka renderuje plik.

Mógłbyś mieć renderowanie pliku .zip jako plik .html, jeśli host był skonfigurowany, aby to zrobić, możesz to sprawdzić samodzielnie, używając firebug i przeglądając odpowiedź nagłówka w stosunku do tego, o co jest proszony .... więc jeśli poprosisz plik JS, ale odpowiedź nagłówka zwraca inną oczekiwaną wartość, wtedy przeglądarki będą respektować odpowiedź nagłówka, a nie to, o co jest proszony ...

Hosting github w surowej subdomenie powraca Content-Type text/plain; charset=utf-8jako typ MIME, co oznacza, że ​​nie będzie wykonywany jako JS, ale raczej jako surowy tekst, poniżej znajduje się przykład tego, co serwer powinien zwrócić, aby renderować plik, a dalej jest kod zwracany przez github.

Serwer obsługujący typ JS MIME będzie wyglądał mniej więcej tak:

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

I tak https://raw.github.com/cloudhead/less.js/master/dist/less-1.3.3.jsodpowiada nagłówek jako (WIDOK RAW).

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

Edycja z grudnia 2018 r

RawGit zachodzi obecnie z powodu złośliwego użycia, dlatego zamiast tego zaleca się skorzystanie z jednej z następujących usług:

• jsDelivr
• Strony GitHub
• CodeSandbox
• rozpakuj

Oryginalny post

Rawgithub.com pozwala użytkownikom pobrać „surowe” wersje Git i przekształcić go w URL dostępny w <script>tagach. Jest dość łatwy w użyciu, wystarczy usunąć pierwszy .z nieprzetworzonego adresu URL. Na przykład :

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

zamieniłoby się w to

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

a następnie umieścisz go w <script>tagu odpowiedniego typu. Tak proste!

Ograniczają liczbę żądań, ponieważ są one przeznaczone wyłącznie do celów programistycznych, a nie produkcyjnych.

Edycja 2014

Jak wspomniał Reinderien, rawgithub jest teraz po prostu rawgit, więc nowy link do skryptu będzie

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

Rozszerzenie pliku jest nieistotne, liczy się nagłówek Content-Type, a ten plik jest obsługiwany z text/plaintypem zawartości (co jest celem „surowego” widoku Githuba).

Powinieneś naprawdę pobrać kopię pliku lokalnie na swoją stronę i dołączyć ją stamtąd. Nawet jeśli zadziałało z Github, ponieważ nie ładujesz pliku JS asynchronicznie, umieszczenie tego <script>tagu w nagłówku strony uzależnia twoją witrynę od dostępności Github.

Jest to celowa funkcja zaprojektowana w celu zapobiegania niektórym atakom XSS .

Jak wyjaśnia Mike West , nie używaj raw.github.comjako CDN; zamiast tego użyj stron GitHub .

Również jawne kodowanie niezarezerwowanych znaków nie zmieni sposobu traktowania adresu URL.

Jak bybe podkreśla, problem polega na tym, że prawie cała treść obsługiwana przez raw.github.com jest wysyłana jako plik tekstowy - w ten sposób treść jest renderowana jako zwykły tekst w przeglądarce bez żadnych innych aplikacji lub problemów. W przeciwnym razie dostaniesz się do sytuacji, w której próba wyświetlenia pliku .js może spowodować, że przeglądarka spróbuje go uruchomić, zamiast go pokazać.

Ponadto ani github, ani pages.github nie próbują być CDN. Naprawdę powinieneś:

1. Sam hostuj plik, nie jest on tak duży.
2. Użyj dedykowanego CDN dla tego i innych plików statycznych w swojej witrynie.
3. Użyj czegoś takiego jak cdnjs.com, które mają różne wersje lessjs .