Połącz i uruchom zewnętrzny plik JavaScript hostowany na GitHub


545

Kiedy próbuję zmienić odnośnik lokalnego pliku JavaScript na surową wersję GitHub, mój plik testowy przestaje działać. Błąd jest następujący:

Odmowa wykonania skryptu z ..., ponieważ jego typ MIME ( text/plain) nie jest wykonywalny, a ścisłe sprawdzanie typu MIME jest włączone.

Czy istnieje sposób, aby wyłączyć to zachowanie, czy też istnieje usługa pozwalająca na łączenie się z surowymi plikami GitHub?

Kod roboczy:

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

Kod niedziałający:

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

3
rawgit.com jest teraz nową domeną
Muhammad Umer


1
@MuhammadUmer - tylko jeśli pliki źródłowe nigdy się nie zmieniają . rawgitpamięć podręczna nigdy się nie aktualizuje .
vsync,

3
2019: PO PROSTU PRZECZYTAJ WSZYSTKIE ODPOWIEDZI, WZGLĘDNIE NA SUROWE LUB RAWGIT. Rawgit nie żyje. Zejdź do odpowiedzi z chharwey i głosuj tak długo, aż dojdzie do szczytu. To jest dobre: ​​najprostsze, które wykorzystuje oficjalne podejście preferowane przez GitHub.
Marco Faustinelli

1
Użyj jsdelivr.com/?docs=gh , to działa
AuthorProxy

Odpowiedzi:


1018

Nie jest to dobry obejście tego, teraz, za pomocą jsdelivr.net .

Kroki :

  1. Znajdź swój link na GitHub i kliknij wersję „Raw”.
  2. Skopiuj adres URL.
  3. Zmień raw.githubusercontent.comnacdn.jsdelivr.net
  4. Wstaw /gh/przed swoją nazwą użytkownika.
  5. Usuń branchnazwę.
  6. (Opcjonalnie) Wstaw wersję, do której chcesz utworzyć łącze, ponieważ @version(jeśli tego nie zrobisz, otrzymasz najnowszą - co może powodować długoterminowe buforowanie)

Przykłady :

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

Użyj tego adresu URL, aby uzyskać najnowszą wersję:

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

Użyj tego adresu URL, aby uzyskać konkretną wersję lub zatwierdzić skrót:

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

W środowiskach produkcyjnych rozważ wybranie określonego tagu lub skrótu zatwierdzania zamiast gałęzi. Użycie najnowszego linku może spowodować długoterminowe buforowanie pliku, co spowoduje, że nie będzie on aktualizowany podczas przesyłania nowych wersji. Łączenie do pliku za pomocą zatwierdzenia-skrótu lub znacznika czyni link unikalnym dla wersji.


Dlaczego jest to potrzebne?

W 2013 roku GitHub zaczął używać X-Content-Type-Options: nosniff, który instruuje bardziej nowoczesne przeglądarki, aby wymuszały ścisłe sprawdzanie typu MIME. Następnie zwraca nieprzetworzone pliki typu MIME zwrócone przez serwer, uniemożliwiając przeglądarce użycie pliku zgodnie z przeznaczeniem (jeśli przeglądarka zaakceptuje to ustawienie).

Informacje na ten temat znajdują się w tym wątku dyskusji .


14
Działa również dla mężczyzn. Udało mi się zamienić gist.githubusercontent.comz rawgist.comi dostał pracę.
haridsv

3
Nie wiem, kto zarządza tą witryną, ale nie używam jej w produkcji. Będziesz mieć nieznaną stronę trzecią, która może wstrzyknąć dowolny kod JavaScript w Twojej witrynie.
neves

1
@Maciej Krawczyk - tak - strona wyraźnie zachęca do korzystania z linku specyficznego dla zatwierdzenia, a nie linku do oddziału, właśnie z tego powodu.
Troy Alford,

4
rawgit zostało wycofane (stan na 08.10.2018): rawgit.com . zalecamy zaktualizowanie tej odpowiedzi.
chharvey

1
Dzięki za zwrócenie na to uwagi @chharvey - Zaktualizowałem odpowiedź, aby odzwierciedlić jsdelivr.net
Troy Alford


25

rawgithub.comprzekierowuje do rawgit.comTak więc powyższy przykład byłby teraz

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


Wejdź na rawgit.com i wklej adres URL pliku lub listy zadań. Wygeneruje dla Ciebie prawidłowy adres URL.
Marcelo Vani,

8
rawgit zostało wycofane (stan na 08.10.2018): rawgit.com . zalecamy zaktualizowanie tej odpowiedzi.
chharvey

10

GitHub Pages to oficjalne rozwiązanie tego problemu przez GitHub.

raw.githubusercontentsprawia, że ​​wszystkie pliki używają text/plaintypu MIME, nawet jeśli plik jest plikiem CSS lub JavaScript. Zatem https://raw.githubusercontent.com/‹user›/‹repo›/‹branch›/‹filepath›nie będzie to poprawny typ MIME, ale zamiast tego plik tekstowy i połączenie go za pomocą <link href="..."/>lub <script src="..."></script>nie będzie działać - CSS nie będzie obowiązywał / JS nie będzie działać.

Strony GitHub utrzymują Twoje repozytorium pod specjalnym adresem URL, więc wszystko, co musisz zrobić, to sprawdzić swoje pliki i wypchnąć. Należy zauważyć, że w większości przypadków, GitHub Strony wymaga, aby zobowiązać się do specjalnego oddziału gh-pages.

W nowej witrynie, którą zwykle jest https://‹user›.github.io/‹repo›każdy plik przypisany do gh-pagesoddziału (najnowsze zatwierdzenie), znajduje się w tym adresie URL. Więc możesz połączyć się z plikiem js przez <script src="https://‹user›.github.io/‹repo›/file.js"></script>, a to będzie prawidłowy typ MIME.

Czy masz pliki kompilacji?

Osobiście zalecam równoległe uruchomienie tej gałęzi master. W gh-pagesoddziale możesz edytować swój .gitignoreplik, aby sprawdzić wszystkie pliki dist / build, których potrzebujesz na swojej stronie (np. Jeśli masz jakieś zminimalizowane / skompilowane pliki), jednocześnie ignorując je w masteroddziale. Jest to przydatne, ponieważ zazwyczaj nie chcesz śledzić zmian w plikach kompilacji w swoim zwykłym repozytorium. Za każdym razem, gdy chcesz zaktualizować hostowane pliki, po prostu połącz mastersię gh-pages, przebuduj, zatwierdź, a następnie wypchnij.

(protip: możesz scalić i przebudować w tym samym zatwierdzeniu wykonując te kroki :)

$ git checkout gh-pages
$ git merge --no-ff --no-commit master  # prepare the merge but dont 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

8

Powyższe odpowiedzi wyraźnie odpowiadają na pytanie, ale chcę podać inną alternatywę - inne spojrzenie / podejście do rozwiązania podobnego problemu.

Możesz także użyć rozszerzenia przeglądarki, aby usunąć X-Content-Type-Optionsnagłówek odpowiedzi dla raw.githubusercontent.complików. Istnieje kilka rozszerzeń przeglądarki do modyfikowania nagłówków odpowiedzi.

  1. Na żądanie: Chrome + Firefox
  2. Zmień nagłówki: Firefox

Jeśli korzystasz z Requestly, mogę zaproponować dwa rozwiązania

Rozwiązanie 1: Użyj zmodyfikuj regułę nagłówków i usuń nagłówek odpowiedzi

Kroki

  1. Zainstaluj na żądanie z http://www.requestly.in
  2. Przejdź do strony z zasadami
  3. Kliknij Dodaj ikonę, aby utworzyć regułę
  4. Wybierz Zmień nagłówki
  5. Podaj nazwę i opis
  6. Wybierz Remove-> Response->X-Content-Type-Options
  7. W polu Źródło wpisz Url-> Contains->raw.githubusercontent.com

Rozwiązanie 2: Użyj opcji Zastąp regułę hosta

  1. Zainstaluj na żądanie z http://www.requestly.in
  2. Przejdź do strony z zasadami
  3. Kliknij Dodaj ikonę, aby utworzyć regułę
  4. wymienić raw.githubusercontent.comzrawgit.com

Sprawdź ten zrzut ekranu, aby uzyskać więcej informacjiwprowadź opis zdjęcia tutaj

Jak testować

Stworzyliśmy prosty JS Fiddle, aby sprawdzić, czy możemy używać surowych plików github jako skryptów w naszym kodzie. Oto skrzypce z następującym kodem

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

Jeśli widzisz Script evaluated successfully!, oznacza to, że możesz użyć surowego pliku github w swoim kodzie. W przeciwnym razie Problem evaluating scriptoznacza to, że wystąpił problem podczas wykonywania skryptu z surowego źródła github.

Napisałem również na ten temat artykuł na blogu Requestly . Proszę odnieść się do niego po więcej szczegółów.

Mam nadzieję, że to pomoże!!

Uwaga: Jestem autorem Requestly, więc możesz winić za wszystko, co ci się nie podoba.



5

Aby wszystko było jasne i krótkie

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

Zauważ, że jest to obsługiwane przez hosting deweloperski rawgit, a nie ich CDN do hostingu produkcyjnego


Domyślny nieprzetworzony adres URL zmienił się od czasu tej odpowiedzi, więc konwersja jest teraz https://raw.githubusercontent.com-> https://rawgit.comW przeciwnym razie ta odpowiedź jest najwyraźniejsza i działa.
mikeym

4
rawgit zostało wycofane (stan na 08.10.2018): rawgit.com . zalecamy zaktualizowanie tej odpowiedzi.
chharvey

4

Mój przypadek użycia polegał na załadowaniu katalogu „ bookmarklets ” z mojego konta Bitbucket, które ma takie same ograniczenia jak Github. Praca, którą wymyśliłem, dotyczyła AJAX-a dla skryptu i działającego evalna ciągu odpowiedzi, poniżej fragment oparty jest na tym podejściu.

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

Pamiętaj, że dodanie sourceURLkomentarza ma umożliwić debugowanie skryptu w narzędziach programistycznych przeglądarki.


1

Po przesłaniu pliku do github możesz go użyć jako źródła zewnętrznego lub darmowego hostingu. Troy Alford wyjaśnił to znacznie powyżej. Ale aby było to łatwiejsze, pozwól, że powiem ci kilka prostych kroków, a następnie możesz użyć surowego pliku github na swojej stronie:

Oto link do pliku:

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

Teraz, aby go wykonać, musisz usunąć https: // i kropkę (.) Pomiędzy raw a githubusercontent

Lubię to:

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

Teraz, kiedy odwiedzisz ten link, otrzymasz link, który może być użyty do wywołania twojego javascript:

Oto ostatni link:

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

Podobnie, jeśli hostujesz plik css, musisz to zrobić, jak wspomniano powyżej. Jest to najprostszy sposób, aby uzyskać prosty link do wywołania zewnętrznego pliku css lub javascript hostowanego na github.

Mam nadzieję, że to jest pomocne.

Adres URL odwołania: http://101helper.blogspot.com/2015/11/store-blogger-codes-on-github-boost-blogger-speed.html


3
rawgit zostało wycofane (stan na 08.10.2018): rawgit.com . zalecamy zaktualizowanie tej odpowiedzi.
chharvey

1

Odkryłem, że błąd został wyświetlony z powodu komentarzy na początku pliku. Możesz rozwiązać ten problem, po prostu tworząc własny plik bez komentarza i naciskając przycisk „git”, nie pokazuje żadnego błędu

Na dowód możesz wypróbować te dwa pliki z tym samym kodem łatwej paginacji:

bez komentarza

z komentarzem


1

Miałem ten sam problem co ty, zmieniłem

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

Mi to pasuje.


zmienić z czego na co? pokaż przed i po
Alexander Mills,

0

Najprostszy sposób:
<script type="text/plain" src="http://raw.githubusercontent.com/user/repo/branch/file.js"></script>
obsługiwany przez GitHub
i

bardzo

niezawodny.
Z text/plain
wprowadź opis zdjęcia tutaj beztext/plain
wprowadź opis zdjęcia tutaj


To najlepsze rozwiązanie, po prostu działa i ma tyle sensu.
a20

2
Nie. wszystko to uniemożliwia nawet uruchomienie skryptu
Steven Penny,

2
To już nie będzie działać. Z mojego logcat urządzenia z Androidem: „Pobieranie skryptów z niepoprawnymi atrybutami typu / języka jest przestarzałe i zostanie usunięte w M56 około stycznia 2017 r. Więcej informacji na chromestatus.com/features/5760718284521472 ”.
Jens Hauke

0

raw.github.comnie jest naprawdę surowym dostępem do zasobu pliku, ale widokiem renderowanym przez Railsy. Dostęp raw.github.comjest znacznie trudniejszy niż potrzeba. Nie wiem, dlaczego raw.github.comzostał zaimplementowany jako widok Railsów. Zamiast naprawić ten problem z trasą, GitHub dodał X-Content-Type-Options: nosniffnagłówek.

Obejście:

  • Umieść skrypt w user.github.io/repo
  • Użyj zewnętrznego CDN, takiego jak rawgit.com.

Dla wszystkich innych, którzy się tym pomylili, zrobili to celowo. Kiedyś byłeś w stanie po prostu używać raw.github.comdo ładowania plików - a następnie github zdał sobie sprawę, że były one używane jako CDN, co powodowało o wiele za dużo ruchu. W rezultacie zmienili go na ten rodzaj renderowania z X-Content-Type-Options: nosniffnagłówkiem, aby uniemożliwić użytkownikom korzystanie z ich usług w ten sposób.
Troy Alford,

0

Alternatywnie, jeśli generujesz znaczniki po stronie serwera, możesz po prostu pobrać i wstrzyknąć. Na przykład w JSTL możesz to zrobić:

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

Z jakiegoś powodu nie pozwalają na hotlinkowanie, więc prawdopodobnie jest to zła forma, jeśli chcesz być dobrym obywatelem. Sugeruję buforowanie tego javascript i pobieranie go tylko okresowo, jeśli uważasz to za stosowne.


0

Przykład


oryginalny

https://raw.githubusercontent.com/antelove19/qrcodejs/master/qrcode.min.js

cdn.jsdelivr.net

https://cdn.jsdelivr.net/gh/antelove19/qrcodejs/qrcode.min.js
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.