Vincule y ejecute un archivo JavaScript externo alojado en GitHub

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>

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.

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

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

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.

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

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