Vincule y ejecute un archivo JavaScript externo alojado en GitHub

8 minutos de lectura

Vincule y ejecute un archivo JavaScript externo alojado en GitHub
AuthorProxy

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

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

¿Hay alguna manera de deshabilitar este comportamiento o hay un servicio que permite vincular archivos sin procesar de GitHub?

Código de trabajo:

<script src="https://stackoverflow.com/questions/17341122/bootstrap-wysiwyg.js"></script>

Código que no funciona:

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

  • rawgit.com es el nuevo dominio ahora

    – Muhammad Umer

    14 de junio de 2014 a las 18:28

  • igual que stackoverflow.com/questions/8779197/…

    – Nitesh

    26 de junio de 2014 a las 8:35

  • @MuhammadUmer: solo si sus archivos fuente nunca cambies. rawgit caché nunca se actualiza.

    – vsync

    5 de julio de 2018 a las 14:43


  • 2019: SIMPLEMENTE SALTE TODAS LAS RESPUESTAS QUE MENCIONEN RAW O RAWGIT. Rawgit está muerto. Vaya a la respuesta de chharwey y vótela hasta que llegue a la cima. Ese es el bueno: el más simple, que usa el enfoque preferido oficial de GitHub.

    – Marco Faustinelli

    26 de enero de 2019 a las 19:47


  • Utilizar jsdelivr.com/?docs=ghfunciona

    – AuthorProxy

    26 de febrero de 2019 a las 16:49


1646757672 291 Vincule y ejecute un archivo JavaScript externo alojado en GitHub
troy alford

Ahí es una buena solución para esto, ahora, usando 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.com para cdn.jsdelivr.net
  4. Insertar /gh/ antes de su nombre de usuario.
  5. Eliminar el branch nombre.
  6. (Opcional) Inserte el versión desea enlazar, como @version (si no hace esto, obtendrá el más reciente – lo que puede causar 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 un hash de confirmación:

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 un hash de confirmación en lugar de la rama. Utilizando el más reciente El enlace puede resultar en el almacenamiento en caché a largo plazo del archivo, lo que hace que su enlace no se actualice a medida que impulsa nuevas versiones. Vincular a un archivo mediante commit-hash o etiqueta hace que el vínculo sea único para la versión.


¿Por qué es necesario?

En 2013, GitHub comenzó a usar X-Content-Type-Options: nosniff, que indica a los navegadores más modernos que apliquen una estricta verificación de tipos 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 conocer los antecedentes de este tema, consulte este hilo de discusión.

  • También funciona para gists. pude reemplazar gist.githubusercontent.com con rawgist.com y lo hice funcionar.

    – haridsv

    31 de enero de 2015 a las 12:50

  • 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

    5 oct 2017 a las 18:58

  • @Maciej Krawczyk: sí, la página lo alienta explícitamente a usar un enlace específico de compromiso, en lugar de un enlace de rama, exactamente por este motivo.

    – Troy Alford

    12 oct 2017 a las 16:06

  • crudo ahora está descontinuado (a partir del 2018-10-08): rawgit.com . Recomiendo actualizar esta respuesta.

    – charvey

    22 de octubre de 2018 a las 2:52

  • Gracias por señalarlo @chharvey: actualicé la respuesta para reflejar jsdelivr.net

    – Troy Alford

    22 oct 2018 a las 15:13

1646757673 523 Vincule y ejecute un archivo JavaScript externo alojado en GitHub
Peja

Esto ya no es posible. GitHub ha deshabilitado explícitamente los enlaces directos de JavaScript y las versiones más nuevas de los navegadores respetan esa configuración.

Atención: la compatibilidad con el encabezado nosniff llegará a Chrome y Firefox

rawgithub.com redirige a rawgit.com Así que el ejemplo anterior sería ahora

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

  • Visita rawgit.com y pegue la URL del archivo o esencia. Generará una URL válida para usted.

    –Marcelo Vani

    20 de enero de 2017 a las 1:05

  • crudo ahora está descontinuado (a partir del 2018-10-08): rawgit.com . Recomiendo actualizar esta respuesta.

    – charvey

    22 de octubre de 2018 a las 2:56

  • RawGit ahora se encuentra en una fase de extinción y pronto se cerrará. Leer más rawgit.com

    – Lo siento, no te lo diré

    26 de junio de 2020 a las 12:21

Páginas de GitHub es la solución oficial de GitHub para este problema.

raw.githubusercontent hace que todos los archivos usen el text/plain tipo MIME, incluso si el archivo es un archivo CSS o JavaScript. así que yendo 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="https://stackoverflow.com/questions/17341122/..."/> o <script src="https://stackoverflow.com/questions/17341122/..."></script> no funcionará: el CSS no se aplicará / el JS no se ejecutará.

Páginas de GitHub aloja su repositorio en una URL especial, por lo que todo lo que tiene que hacer es registrar sus archivos y enviarlos. Tenga en cuenta que, en la mayoría de los casos, las páginas de GitHub requieren que se comprometa con una rama especial, gh-pages.

En su nuevo sitio, que suele ser https://‹user›.github.io/‹repo›cada archivo comprometido con el gh-pages branch (la confirmación más reciente) está presente en esta url. Entonces puede vincular su archivo js a través de <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 en paralelo a master. Sobre el gh-pages rama, puede editar su .gitignore archivo a registrarse todos los archivos dist/build que necesita para su sitio (por ejemplo, si tiene archivos minificados/compilados), mientras que manteniéndolos ignorados en tu master rama. 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, simplemente fusione master dentro gh-pagesreconstruir, confirmar y luego empujar.

(consejo profesional: puede fusionar y reconstruir en la misma confirmación con estos pasos 🙂

$ 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

1646757674 527 Vincule y ejecute un archivo JavaScript externo alojado en GitHub
sachin

Las respuestas anteriores responden claramente a la pregunta, pero quiero brindar otra alternativa: una vista/enfoque diferente para resolver el problema similar.

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

  1. Solicitud: 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 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 de reemplazo de host

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

Consulte esta captura de pantalla para obtener más detalles.ingrese la descripción de la imagen aquí

como probar

Creamos un JS Fiddle simple 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 tú ves Script evaluated successfully!Significa que puede usar el archivo github sin procesar en su código De lo contrario Problem evaluating script indica que hay algún problema al ejecutar el script desde la fuente de github sin formato.

yo tambien escribi un artículo en Blog solicitado sobre esto. Por favor consúltelo para más detalles.

¡¡Espero eso ayude!!

Descargo de responsabilidad: soy autor de Solicitado Así que puedes culpar por cualquier cosa que no te guste.

https://raw.githack.com/

Encontré este sitio proporcionar un CDN para

  • retirar nosniff encabezado http
  • reparar mime type por nombre externo

y este sitio:

https://rawgit.com/

NOTA: RawGit ha llegado al final de su vida útil

1646757675 0 Vincule y ejecute un archivo JavaScript externo alojado en GitHub
Chris Marisic

Para hacer las cosas claras y breves.

//raw.githubusercontent.com –> //rawgit.com

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

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

    – mikeym

    2 de noviembre de 2015 a las 19:24

  • crudo ahora está descontinuado (a partir del 2018-10-08): rawgit.com . Recomiendo actualizar esta respuesta.

    – charvey

    22 de octubre de 2018 a las 2:55

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad