Enlace y ejecute un archivo JavaScript externo alojado en GitHub


546

Cuando intento cambiar la referencia vinculada de un archivo JavaScript local a una versión sin procesar de GitHub, mi archivo de prueba deja de funcionar. El error es:

Se negó a ejecutar el script desde ... porque su tipo MIME ( text/plain) no es ejecutable y la verificación estricta del tipo MIME está habilitada.

¿Hay alguna manera de deshabilitar este comportamiento o hay un servicio que permita vincular a los archivos sin formato de GitHub?

Código de trabajo:

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

Código que no funciona:

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

3
rawgit.com es el nuevo dominio ahora
Muhammad Umer


1
@MuhammadUmer: solo si sus archivos de origen nunca cambian . rawgitel caché nunca se actualiza .
vsync

3
2019: SOLO SALTAR TODAS LAS RESPUESTAS MENCIONANDO RAW O RAWGIT. Rawgit está muerto. Baja a la respuesta de chharwey y vota hasta que llegue a la cima. Ese es el bueno: el más simple, que utiliza el enfoque preferido oficial de GitHub.
Marco Faustinelli

Respuestas:


1018

No es una buena solución para esto, ahora, mediante el uso de jsdelivr.net .

Pasos :

  1. Encuentre su enlace en GitHub y haga clic en la versión "Sin procesar".
  2. Copia la URL.
  3. Cambiar raw.githubusercontent.comacdn.jsdelivr.net
  4. Insertar /gh/antes de su nombre de usuario.
  5. Elimina el branchnombre.
  6. (Opcional) Inserte la versión a la que desea vincular, ya que @version(si no hace esto, obtendrá la última versión, lo que puede causar el almacenamiento en caché a largo plazo)

Ejemplos :

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

Use esta URL para obtener la última versión:

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

Use esta URL para obtener una versión específica o confirmar hash:

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

Para entornos de producción , considere apuntar a una etiqueta específica o commit-hash en lugar de la rama. El uso del último enlace puede ocasionar el almacenamiento en caché a largo plazo del archivo, lo que hace que su enlace no se actualice a medida que avanza nuevas versiones. La vinculación a un archivo mediante commit-hash o etiqueta hace que el enlace sea exclusivo de la versión.


¿Por qué se necesita esto?

En 2013, GitHub comenzó a usar X-Content-Type-Options: nosniff, lo que instruye a los navegadores más modernos a aplicar una estricta verificación de tipo MIME. Luego devuelve los archivos sin formato en un tipo MIME devuelto por el servidor, evitando que el navegador use el archivo según lo previsto (si el navegador respeta la configuración).

Para obtener información sobre este tema, consulte este hilo de discusión .


14
También funciona para lo esencial. Yo era capaz de sustituir gist.githubusercontent.comcon rawgist.comy tengo trabajo.
haridsv

3
No sé quién mantiene este sitio rawgit, pero no lo use en producción. Tendría un tercero desconocido que puede inyectar cualquier javascript en su sitio.
neves

1
@Maciej Krawczyk, sí, la página lo alienta explícitamente a usar un enlace específico de confirmación, en lugar de un enlace de rama, exactamente por esta razón.
Troy Alford

44
rawgit ahora está descontinuado (a partir de 2018-10-08): rawgit.com . Recomiendo actualizar esta respuesta.
chharvey

1
Gracias por señalarlo @chharvey - He actualizado la respuesta para reflejar jsdelivr.net
Troy Alford


25

rawgithub.comredirige a rawgit.comEntonces el ejemplo anterior ahora sería

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


Visite rawgit.com y pegue la url para el archivo o la esencia. Generará una URL válida para ti.
Marcelo Vani

8
rawgit ahora está descontinuado (a partir de 2018-10-08): rawgit.com . Recomiendo actualizar esta respuesta.
chharvey

10

GitHub Pages es la solución oficial de GitHub a este problema.

raw.githubusercontenthace que todos los archivos usen el text/plaintipo MIME, incluso si el archivo es un archivo CSS o JavaScript. Por lo tanto, ir a https://raw.githubusercontent.com/‹user›/‹repo›/‹branch›/‹filepath›no será el tipo MIME correcto, sino un archivo de texto sin formato, y vincularlo a través de <link href="..."/>o <script src="..."></script>no funcionará: el CSS no se aplicará / el JS no se ejecutará.

GitHub Pages aloja su repositorio en una URL especial, por lo que todo lo que tiene que hacer es registrar sus archivos y presionar. Tenga en cuenta que en la mayoría de los casos, GitHub Páginas requiere que se comprometan a una rama especial, gh-pages.

En su nuevo sitio, que generalmente es https://‹user›.github.io/‹repo›, todos los archivos comprometidos con la gh-pagesrama (el compromiso más reciente) están presentes en esta url. Entonces puede vincular a su archivo js a través <script src="https://‹user›.github.io/‹repo›/file.js"></script>, y este será el tipo MIME correcto.

¿Tienes archivos de compilación?

Personalmente, mi recomendación es ejecutar esta rama paralela a master. En la gh-pagesrama, puede editar su .gitignorearchivo para registrar todos los archivos dist / build que necesita para su sitio (por ejemplo, si tiene archivos minificados / compilados), mientras los mantiene ignorados en su masterrama. Esto es útil porque normalmente no desea realizar un seguimiento de los cambios en los archivos de compilación en su repositorio habitual. Cada vez que desee actualizar sus archivos alojados, sólo tiene que fusionar masteren gh-pages, reconstruir, comprometerse, y luego empuje.

(protip: puedes fusionar y reconstruir en el mismo commit con estos pasos :)

$ 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

Las respuestas anteriores responden claramente la pregunta, pero quiero proporcionar otra alternativa: una visión / enfoque diferente para resolver el problema similar.

También puede usar la extensión del navegador para eliminar el X-Content-Type-Optionsencabezado de respuesta para los raw.githubusercontent.comarchivos. Hay un par de extensiones del navegador para modificar los encabezados de respuesta.

  1. Requestly: Chrome + Firefox
  2. Modificar encabezados: Firefox

Si usa Requestly, puedo sugerir dos soluciones

Solución 1: use la regla Modificar encabezados y elimine el encabezado de respuesta

Pasos

  1. Instalar Requestly desde http://www.requestly.in
  2. Ir a la página de reglas
  3. Haga clic en Agregar icono para crear una regla
  4. Seleccione Modificar encabezados
  5. Dar un nombre y descripción
  6. Seleccione Remove-> Response->X-Content-Type-Options
  7. En el campo Fuente, ingrese Url-> Contains->raw.githubusercontent.com

Solución 2: use la regla Reemplazar host

  1. Instalar Requestly desde http://www.requestly.in
  2. Ir a la página de reglas
  3. Haga clic en Agregar icono para crear una regla
  4. Reemplazar raw.githubusercontent.comconrawgit.com

Mira esta captura de pantalla para más detallesingrese la descripción de la imagen aquí

Cómo probar

Creamos un simple JS Fiddle para probar si podemos usar archivos github sin procesar como scripts en nuestro código. Aquí está el violín con el siguiente código

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

Si ve Script evaluated successfully!, significa que puede usar un archivo github sin procesar en su código. De lo contrario, Problem evaluating scriptindica que hay algún problema al ejecutar el script desde la fuente github sin procesar.

También escribí un artículo en el blog de Requestly sobre esto. Por favor refiéralo para más detalles.

¡¡Espero eso ayude!!

Descargo de responsabilidad: soy autor de Requestly. Así que puedes culpar por todo lo que no te gusta.



5

Para hacer las cosas claras y cortas

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

Tenga en cuenta que esto lo maneja el hosting de desarrollo de rawgit y no su cdn para hosting de producción


La URL sin procesar predeterminada parece haber cambiado desde esta respuesta, por lo que la conversión es ahora https://raw.githubusercontent.com-> https://rawgit.comDe lo contrario, esta respuesta es más clara y funciona.
mikeym

44
rawgit ahora está descontinuado (a partir de 2018-10-08): rawgit.com . Recomiendo actualizar esta respuesta.
chharvey

4

Mi caso de uso fue cargar directamente ' bookmarklets ' desde mi cuenta de Bitbucket que tiene las mismas restricciones que Github. El trabajo que se me ocurrió fue AJAX para el script y ejecutar evalen la cadena de respuesta, el fragmento a continuación se basa en ese enfoque.

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

Tenga en cuenta que la adición de sourceURL comentarios es permitir la depuración del script dentro de las herramientas de desarrollo del navegador.


1

Cuando se carga un archivo en github, puede usarlo como fuente externa o alojamiento gratuito. Troy Alford lo ha explicado muy arriba. Pero para que sea más fácil, permítame decirle algunos pasos fáciles, luego puede usar un archivo sin formato github en su sitio:

Aquí está el enlace de su archivo:

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

Ahora para ejecutarlo, debe eliminar https: // y el punto (.) Entre el contenido en bruto y githubuser

Me gusta esto:

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

Ahora, cuando visite este enlace, obtendrá un enlace que se puede usar para llamar a su javascript:

Aquí está el enlace final:

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

Del mismo modo, si aloja un archivo CSS, debe hacerlo como se mencionó anteriormente. Es la forma más fácil de obtener un enlace simple para llamar a su archivo externo CSS o JavaScript alojado en Github.

Espero que esto sea útil.

URL de referencia: http://101helper.blogspot.com/2015/11/store-blogger-codes-on-github-boost-blogger-speed.html


3
rawgit ahora está descontinuado (a partir de 2018-10-08): rawgit.com . Recomiendo actualizar esta respuesta.
chharvey

1

Encontré que el error se mostró debido a los comentarios al comienzo del archivo. Puede resolver este problema, simplemente creando su propio archivo sin comentarios y presionando git, no muestra ningún error

Como prueba, puede probar estos dos archivos con el mismo código de paginación fácil:

sin comentario

con comentario


1

Tuve el mismo problema que tú, lo que hice fue cambiar a

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

Esto funciona para mi.


cambiar de qué a qué? muestra el antes y el después
Alexander Mills

0

La forma más simple:
<script type="text/plain" src="http://raw.githubusercontent.com/user/repo/branch/file.js"></script>
Servido por GitHub,
y

muy

de confianza.
Con text/plain
ingrese la descripción de la imagen aquí sintext/plain
ingrese la descripción de la imagen aquí


Esta es la mejor solución, simplemente funciona y tiene mucho sentido.
a20

2
No. Todo esto hace es evitar que el script desde incluso corriendo
Steven Penny

2
Ya no funcionará pronto. Desde el logcat de mi dispositivo Android: "Recuperar secuencias de comandos con atributos de tipo / idioma no válidos está en desuso y se eliminará en M56, alrededor de enero de 2017. Consulte chromestatus.com/features/5760718284521472 para obtener más detalles".
Jens Hauke ​​el

0

raw.github.comno es un acceso verdaderamente sin formato al activo de archivo, sino una vista representada por Rails. Entonces acceder raw.github.comes mucho más pesado de lo necesario. No sé por qué raw.github.comse implementa como una vista de Rails. En lugar de solucionar este problema de ruta, GitHub agregó un X-Content-Type-Options: nosniffencabezado.

Solución alterna:

  • Pon el guión a user.github.io/repo
  • Use un CDN de terceros como rawgit.com.

Para cualquier otra persona confundida por esto, lo hicieron intencionalmente. Solía ​​poder simplemente usar raw.github.compara cargar archivos, y luego github se dio cuenta de que se estaban utilizando como CDN, lo que les estaba causando demasiado tráfico. Como resultado, lo cambiaron a este tipo de representación con el X-Content-Type-Options: nosniffencabezado, específicamente para evitar que las personas usen su servicio de esa manera.
Troy Alford el

0

Alternativamente, si genera su marcado en el lado del servidor, puede buscar e inyectar. Por ejemplo, en JSTL podría hacer esto:

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

No permiten el enlace directo por una razón, por lo que probablemente sea una mala forma si quieres ser un buen ciudadano. Te sugiero que guardes en caché ese javascript y solo vuelvas a buscarlo periódicamente como mejor te parezca.


0

Ejemplo


original

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

cdn.jsdelivr.net

https://cdn.jsdelivr.net/gh/antelove19/qrcodejs/qrcode.min.js
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.