Свяжите и выполните внешний файл JavaScript, размещенный на GitHub

Когда я пытаюсь изменить связанную ссылку локального файла JavaScript на необработанную версию GitHub, мой тестовый файл перестает работать. Ошибка:

Отказано выполнять сценарий из ..., потому что его тип MIME (text/plain) не является исполняемым и включена строгая проверка типа MIME.

Есть ли способ отключить это поведение или есть служба, которая позволяет ссылаться на необработанные файлы GitHub?

Рабочий код:

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

Нерабочий код:

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

person AuthorProxy    schedule 27.06.2013    source источник
comment
rawgit.com - это новый домен   -  person Muhammad Umer    schedule 14.06.2014
comment
то же, что и stackoverflow.com/questions/8779197 /   -  person Nitesh    schedule 26.06.2014
comment
@MuhammadUmer - только если ваши исходные файлы никогда не меняются. rawgit кеш никогда не обновляется.   -  person vsync    schedule 05.07.2018
comment
очень хороший момент.   -  person Muhammad Umer    schedule 05.07.2018
comment
@vsync, вы можете добавить дату к URL-адресу в качестве параметра запроса, и он обновится (не будет использовать кеш, принудительно выполнить новое чтение)   -  person Alexander Mills    schedule 08.12.2018
comment
2019: ПРОСТО ПРОПУСТИТЕ ВСЕ ОТВЕТЫ, УКАЗЫВАЮЩИЕ RAW ИЛИ RAWGIT. Rawgit мертв. Спуститесь к ответу от chharwey и голосуйте за него, пока он не дойдет до вершины. Это хороший вариант: самый простой, в котором используется официальный подход, предпочтительный для GitHub.   -  person Marco Faustinelli    schedule 26.01.2019
comment
Используйте jsdelivr.com/?docs=gh, это работает   -  person AuthorProxy    schedule 26.02.2019


Ответы (15)


Для этого есть хороший обходной путь, который теперь использует jsdelivr.net.

Шаги:

  1. Найдите свою ссылку на GitHub и перейдите к «сырой» версии.
  2. Скопируйте URL.
  3. Измените raw.githubusercontent.com на cdn.jsdelivr.net
  4. Вставьте /gh/ перед своим именем пользователя.
  5. Удалите имя branch.
  6. (Необязательно) Вставьте версию, на которую вы хотите создать ссылку, как @version (если вы этого не сделаете, вы получите последнюю - что может вызвать долгосрочное кеширование)

Примеры:

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

Используйте этот URL, чтобы получить последнюю версию:

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

Используйте этот URL-адрес, чтобы получить конкретную версию или хэш фиксации:

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

Для производственных сред рассмотрите вариант таргетинга на конкретный тег или хэш фиксации, а не на ветку. Использование ссылки последняя может привести к долгосрочному кэшированию файла, в результате чего ваша ссылка не будет обновляться по мере того, как вы отправляете новые версии. Связывание с файлом с помощью хеш-кода фиксации или тега делает ссылку уникальной для версии.


Зачем это нужно?

В 2013 году GitHub начал использовать X-Content-Type-Options: nosniff, который предписывает более современным браузерам применять строгую проверку типов MIME. Затем он возвращает необработанные файлы в MIME-типе, возвращенные сервером, не позволяя браузеру использовать файл по назначению (если браузер соблюдает настройку).

Для получения дополнительной информации по этой теме обратитесь к этой ветке обсуждения.

person Troy Alford    schedule 05.08.2013
comment
@FrankvanPuffelen Обновлено, чтобы отразить это. Спасибо, что заметили это! - person Troy Alford; 17.07.2014
comment
Отлично, я долго искал это для тестирования jsFiddle, спасибо - person AbdelHady; 25.07.2014
comment
Также работает для сути. Я смог заменить gist.githubusercontent.com на rawgist.com, и он заработал. - person haridsv; 31.01.2015
comment
Я не знаю, кто поддерживает этот сайт в rawgit, но не использую его в продакшене. У вас будет неизвестная третья сторона, которая может внедрить любой javascript на ваш сайт. - person neves; 05.10.2017
comment
Имейте в виду, что его файлы кешируются постоянно. Поэтому, когда вы обновляете свой файл, он сохранит старую версию. - person Maciej Krawczyk; 11.10.2017
comment
@Maciej Krawczyk - да - на странице явно рекомендуется использовать ссылку для фиксации, а не ссылку на ветку, именно по этой причине. - person Troy Alford; 12.10.2017
comment
Это далеко не идеально, поскольку rawgit никогда не обновляет файл, если он был обновлен на github. , поэтому нужно обновлять все URL-адреса, используя rawgit везде ... отстой. - person vsync; 05.07.2018
comment
@vsync Хотя я думаю, что я уже рассмотрел это ограничение в ответе, я только что отредактировал, чтобы сделать его еще более ясным / явным как в чем проблема, так и в том, как ее преодолеть для людей, желающих использовать функции CDN. - person Troy Alford; 05.07.2018
comment
Поддержка rawgit прекращена (по состоянию на 8 октября 2018 г.): rawgit.com. рекомендую обновить этот ответ. - person chharvey; 22.10.2018
comment
Спасибо, что указали на это @chharvey - я обновил ответ, чтобы отразить jsdelivr.net - person Troy Alford; 22.10.2018
comment
Вот сценарий, который меняет URL-адрес на правильную (последнюю) версию jsdelivr для вас: var path = window.location.pathname.split('/'); path = [...path.slice(1, 3), ...path.slice(4, path.length)]; path = path.join('/'); window.location = 'http://cdn.jsdelivr.net/gh/' + path; - person Stephen Saucier; 27.12.2018
comment
удалите ссылки raw.github, теперь они мертвы, и добавьте прямые ссылки на jsdelivr.com/?docs= gh - person AuthorProxy; 26.02.2019

Это уже невозможно. GitHub явно отключил горячие ссылки JavaScript, и новые версии браузеров соблюдают этот параметр.

Внимание: поддержка заголовков nosniff появится в Chrome и Firefox

person Peeja    schedule 28.06.2013

rawgithub.com перенаправляет на rawgit.com Таким образом, приведенный выше пример теперь будет

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

person Paul Browne    schedule 21.05.2014
comment
Посетите rawgit.com и вставьте URL-адрес файла или содержания. Он сгенерирует для вас действительный URL-адрес. - person Marcelo Vani; 20.01.2017
comment
Поддержка rawgit прекращена (по состоянию на 8 октября 2018 г.): rawgit.com. рекомендую обновить этот ответ. - person chharvey; 22.10.2018
comment
RawGit сейчас находится на стадии заката и скоро будет закрыт. Подробнее на rawgit.com - person Sorry IwontTell; 26.06.2020

GitHub Pages - официальное решение этой проблемы на GitHub.

raw.githubusercontent заставляет все файлы использовать text/plain тип MIME, даже если файл является файлом CSS или JavaScript. Таким образом, переход к https://raw.githubusercontent.com/‹user›/‹repo›/‹branch›/‹filepath› не будет правильным типом MIME, это будет обычный текстовый файл, и связать его через <link href="..."/> или <script src="..."></script> не получится - CSS не будет применяться / JS не запустится.

GitHub Pages размещает ваше репо по специальному URL-адресу, поэтому все, что вам нужно сделать, это зарегистрировать свои файлы и нажать . Обратите внимание, что в большинстве случаев GitHub Pages требует, чтобы вы выполняли фиксацию в специальной ветке gh-pages.

На вашем новом сайте, который обычно https://‹user›.github.io/‹repo›, каждый файл, зафиксированный в ветке gh-pages (самая последняя фиксация), присутствует по этому URL-адресу. Итак, вы можете связать свой файл js через <script src="https://‹user›.github.io/‹repo›/file.js"></script>, и это будет правильный тип MIME.

У вас есть файлы сборки?

Лично я рекомендую запустить эту ветку параллельно с master. В ветке gh-pages вы можете отредактировать свой .gitignore файл, чтобы вернуть все файлы dist / build, которые вам нужны для вашего сайта (например, если у вас есть минифицированные / скомпилированные файлы), при сохранении их игнорируется в вашей master ветке. Это полезно, потому что обычно вы не хотите отслеживать изменения в файлах сборки в обычном репозитории. Каждый раз, когда вы хотите обновить размещенные файлы, просто объединяйте master в gh-pages, перестраивайте, фиксируйте и затем нажимайте.

(совет: вы можете объединить и перестроить в одном коммите, выполнив следующие действия :)

$ 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
person chharvey    schedule 22.10.2018

Приведенные выше ответы четко отвечают на вопрос, но я хочу предложить другую альтернативу - другой взгляд / подход для решения аналогичной проблемы.

Вы также можете использовать расширение браузера, чтобы удалить X-Content-Type-Options заголовок ответа для raw.githubusercontent.com файлов. Есть несколько расширений браузера для изменения заголовков ответов.

  1. Запрос: Chrome + Firefox
  2. Изменить заголовки: Firefox

Если вы используете Requestly, я могу предложить два решения

Решение 1. Используйте правило изменения заголовков и удалите заголовок ответа.

Шаги

  1. Запросить установку с http://www.requestly.in
  2. Перейдите на страницу правил
  3. Нажмите на значок «Добавить», чтобы создать правило.
  4. Выберите "Изменить заголовки"
  5. Дайте имя и описание
  6. Выберите Remove -> Response -> X-Content-Type-Options
  7. В поле "Источник" введите Url -> Contains -> raw.githubusercontent.com.

Решение 2. Используйте правило замены хоста

  1. Запросить установку с http://www.requestly.in
  2. Перейдите на страницу правил
  3. Нажмите на значок «Добавить», чтобы создать правило.
  4. Заменить raw.githubusercontent.com на rawgit.com

Посмотрите этот снимок экрана для получения дополнительных сведений.  введите описание изображения здесь

Как проверить

Мы создали простой скрипт JS Fiddle, чтобы проверить, можем ли мы использовать необработанные файлы github в качестве скриптов в нашем коде. Вот Fiddle со следующим кодом

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

Если вы видите Script evaluated successfully!, это означает, что вы можете использовать необработанный файл github в своем коде. В противном случае Problem evaluating script указывает на наличие некоторой проблемы при выполнении скрипта из исходного кода github.

Я также написал статью на Запросить блог об этом . Пожалуйста, обратитесь к нему для получения более подробной информации.

Надеюсь, это поможет!!

Отказ от ответственности: я являюсь автором Requestly, так что вы можете винить все, что вам не нравится.

person sachinjain024    schedule 06.04.2017

https://raw.githack.com/

обнаружил, что этот сайт предоставляет CDN для

  • удалить nosniff http-заголовок
  • исправить mime type по внешнему имени

и этот сайт:

https://rawgit.com/

ПРИМЕЧАНИЕ: срок полезного использования RawGit подошел к концу.

person yurenchen    schedule 06.03.2017

Чтобы все было ясно и коротко

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

Обратите внимание, что это обрабатывается хостингом разработки rawgit, а не их cdn для производственного хостинга.

person Tomer Ben David    schedule 04.10.2015
comment
Исходный URL-адрес по умолчанию, похоже, изменился с момента этого ответа, поэтому преобразование теперь https://raw.githubusercontent.com - ›https://rawgit.com В противном случае этот ответ наиболее ясен и работает. - person mikeym; 02.11.2015
comment
Поддержка rawgit прекращена (по состоянию на 8 октября 2018 г.): rawgit.com. рекомендую обновить этот ответ. - person chharvey; 22.10.2018

Мой вариант использования заключался в том, чтобы загрузить директиву «букмарклеты» из моей учетной записи Bitbucket, которая имеет те же ограничения, что и Github. Работа, которую я придумал, заключалась в использовании AJAX для сценария и запуске eval в строке ответа, приведенный ниже фрагмент основан на этом подходе.

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

Обратите внимание, что добавление комментария sourceURL позволяет отладить сценарий в инструментах разработчика браузера.

person Daniel Sokolowski    schedule 07.05.2016

Когда файл загружается на github, вы можете использовать его как внешний источник или как бесплатный хостинг. Трой Элфорд хорошо объяснил это выше. Но для упрощения позвольте мне рассказать вам несколько простых шагов, после чего вы можете использовать необработанный файл github на своем сайте:

Вот ссылка на ваш файл:

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

Теперь, чтобы выполнить его, вам нужно удалить https: // и точку (.) Между raw и githubusercontent.

Нравится:

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

Теперь, когда вы перейдете по этой ссылке, вы получите ссылку, которую можно использовать для вызова вашего javascript:

Вот последняя ссылка:

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

Точно так же, если вы размещаете файл css, вы должны сделать это, как указано выше. Это самый простой способ получить простую ссылку для вызова вашего внешнего файла css или javascript, размещенного на github.

Надеюсь, это поможет.

Ссылка URL: http://101helper.blogspot.com/2015/11/store-blogger-codes-on-github-boost-blogger-speed.html

person Fahim Raza    schedule 04.01.2016
comment
Поддержка rawgit прекращена (по состоянию на 8 октября 2018 г.): rawgit.com. рекомендую обновить этот ответ. - person chharvey; 22.10.2018

Я обнаружил, что ошибка была показана из-за комментариев в начале файла. Вы можете решить эту проблему, просто создав свой собственный файл без комментариев и нажав на git, он не показывает ошибки

В качестве доказательства вы можете попробовать эти два файла с одним и тем же кодом простой разбивки на страницы:

без комментариев

с комментарием

person santosh    schedule 29.01.2017

У меня была та же проблема, что и у вас, я изменил на

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

Меня устраивает.

person Yiting Gu    schedule 10.06.2018
comment
изменить с чего на что? пожалуйста, покажите до и после - person Alexander Mills; 08.12.2018

Most simple way:
<script type="text/plain" src="http://raw.githubusercontent.com/user/repo/branch/file.js"></script>
Served by GitHub,
and

очень

reliable.
With text/plain
enter image description here Without text/plain
enter image description here

person Community    schedule 31.05.2016
comment
Это лучшее решение, оно просто работает и имеет много смысла. - person a20; 10.08.2016
comment
нет. все это препятствует запуску скрипта - person Steven Penny; 24.12.2016
comment
Скоро это больше не будет работать. Из журнала logcat моего устройства Android: получение сценариев с недопустимыми атрибутами типа / языка устарело и будет удалено в M56 примерно в январе 2017 года. См. chromestatus.com/features/5760718284521472, чтобы получить дополнительные сведения. - person Jens Hauke; 31.01.2017

raw.github.com - это не настоящий прямой доступ к файловому ресурсу, а представление, отображаемое Rails. Так что доступ к raw.github.com намного сложнее, чем нужно. Я не знаю, почему raw.github.com реализован как представление Rails. Вместо того, чтобы исправить эту проблему с маршрутом, GitHub добавил заголовок X-Content-Type-Options: nosniff.

Обходной путь:

  • Поместите скрипт в user.github.io/repo
  • Используйте сторонний CDN, например rawgit.com.
person weakish    schedule 27.08.2016
comment
Для всех, кого это смущает, они сделали это намеренно. Раньше вы могли просто использовать raw.github.com для загрузки файлов - а потом github понял, что они используются в качестве CDN, что вызывало слишком много трафика. В результате они изменили его на этот тип рендеринга с заголовком X-Content-Type-Options: nosniff, в частности, чтобы люди не могли использовать их сервис таким образом. - person Troy Alford; 07.11.2019

В качестве альтернативы, если вы генерируете свою разметку на стороне сервера, вы можете просто получить и вставить. Например, в JSTL вы можете сделать это:

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

Они не разрешают хотлинкинг по какой-то причине, так что это, вероятно, плохой тон, если вы хотите быть хорошим гражданином. Я бы посоветовал вам кэшировать этот javascript и периодически выполнять повторную загрузку по своему усмотрению.

person matt burns    schedule 16.05.2017

Пример


оригинал

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

cdn.jsdelivr.net

https://cdn.jsdelivr.net/gh/antelove19/qrcodejs/qrcode.min.js
person antelove    schedule 07.02.2020