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>

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 .

To nie jest już możliwe. GitHub wyraźnie wyłączył hotlinkowanie JavaScript, a nowsze wersje przeglądarek przestrzegają tego ustawienia.

Heads up: obsługa nagłówków nosniff w Chrome i Firefox

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

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

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

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 informacji

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.

https://raw.githack.com/

znalazłem tę witrynę, dostarczając CDN dla

• usuń nosniffnagłówek http
• napraw mime typeprzez nazwę ext

i ta strona:

https://rawgit.com/

UWAGA: RawGit dobiegł końca

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

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.

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

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

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

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

Mi to pasuje.

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

bardzo

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.

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.

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