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


546

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

Отказался от выполнения скрипта из ..., потому что его тип 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>

3
rawgit.com теперь новый домен
Мухаммед Умер


1
@MuhammadUmer - только если ваши исходные файлы никогда не меняются . rawgitкеш никогда не обновляется .
vsync

3
2019: ПРОСТО ПРОЧИТАЙТЕ ВСЕ ОТВЕТЫ, МЕНЯЮЩИЕ СЫРЬ ИЛИ СЫРЬЕВ Rawgit мертв. Спуститесь к ответу от Chharwey и поднимите его, пока он не достигнет вершины. Это хороший вариант: самый простой, который использует официальный подход GitHub.
Марко Фаустинелли

1
Используйте jsdelivr.com/?docs=gh , все работает
AuthorProxy

Ответы:


1018

Для этого есть хороший обходной путь, используя 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-типе, возвращенном сервером, не позволяя браузеру использовать файл по назначению (если браузер учитывает настройку).

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


14
Также работает для гистологов. Я был в состоянии заменить gist.githubusercontent.comс rawgist.comи получил это работает.
Харидсв

3
Я не знаю, кто поддерживает этот сайт rawgit, но не использую его в производстве. У вас будет неизвестная третья сторона, которая может внедрить любой javascript на вашем сайте.
NEVES

1
@Maciej Krawczyk - да - страница явно рекомендует вам использовать ссылку для фиксации, а не ссылку ветки, именно по этой причине.
Трой Алфорд,

4
rawgit больше не выпускается (по состоянию на 2018-10-08): rawgit.com . рекомендуем обновить этот ответ.
Чарви

1
Спасибо за указание на это @chharvey - я обновил ответ, чтобы отразить jsdelivr.net
Трой Алфорд


25

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

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


Посетите rawgit.com и вставьте URL для файла или суть. Он сгенерирует действительный URL для вас.
Марсело Вани

8
rawgit больше не выпускается (по состоянию на 2018-10-08): rawgit.com . рекомендуем обновить этот ответ.
Чарви

10

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, пересоберите, зафиксируйте и затем нажмите.

(protip: вы можете объединить и перестроить в одном коммите с этими шагами :)

$ 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

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

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

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

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

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

меры

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

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

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

Проверьте этот скриншот для более подробной информациивведите описание изображения здесь

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

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

<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 об этом. Пожалуйста, обратитесь к нему для более подробной информации.

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

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



5

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

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

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


Необработанный URL-адрес по умолчанию, похоже, изменился с тех пор, как этот ответ, поэтому преобразование теперь https://raw.githubusercontent.com-> https://rawgit.comВ противном случае этот ответ является ясным и работает.
Микейм

4
rawgit больше не выпускается (по состоянию на 2018-10-08): rawgit.com . рекомендуем обновить этот ответ.
Чхарви

4

Мой случай использования было нагрузки « Букмарклеты direclty» с моего счета 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комментария позволяет отлаживать скрипт в инструментах разработчика браузера.


1

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

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

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


3
rawgit больше не выпускается (по состоянию на 2018-10-08): rawgit.com . рекомендуем обновить этот ответ.
Чарви

1

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

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

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

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


1

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

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

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


изменить с чего на что? Пожалуйста, покажите до и после
Александр Миллс

0

Самый простой способ:
<script type="text/plain" src="http://raw.githubusercontent.com/user/repo/branch/file.js"></script>
обслуживается GitHub,
и

очень

надежный.
С text/plain
введите описание изображения здесь безtext/plain
введите описание изображения здесь


Это лучшее решение, оно просто работает и имеет много смысла.
20

2
нет. все, что это делает, это препятствует тому, чтобы сценарий даже работал
Стивен Пенни

2
Это больше не будет работать в ближайшее время. С моего устройства Android logcat: «Извлечение сценариев с недопустимыми атрибутами типа / языка устарело и будет удалено в M56 примерно в январе 2017 года. Для получения дополнительной информации см. Chromestatus.com/features/5760718284521472 ».
Йенс Хауке

0

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

Временное решение:

  • Поместите скрипт в user.github.io/repo
  • Используйте сторонние CDN, такие как rawgit.com.

Для всех, кто был смущен этим, они сделали это намеренно. Раньше вы могли просто использовать raw.github.comдля загрузки файлов - и затем Github понял, что они используются в качестве CDN, что вызывало у них слишком большой трафик. В результате они изменили его на этот тип рендеринга с X-Content-Type-Options: nosniffзаголовком, специально для того, чтобы люди не могли использовать их сервис таким образом.
Трой Алфорд

0

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

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

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


0

пример


оригинал

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

cdn.jsdelivr.net

https://cdn.jsdelivr.net/gh/antelove19/qrcodejs/qrcode.min.js
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.