referenciar - script type= text/javascript src=

Vincula y ejecuta un archivo JavaScript externo alojado en GitHub

Question

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 forma de deshabilitar este comportamiento o existe un servicio que permita vincular archivos GitHub en bruto?

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>

Answer 1

Alternativamente, si genera su marca en el lado del servidor, puede simplemente obtener e inyectar. Por ejemplo, en JSTL puedes hacer esto:

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

No permiten hotlinks por una razón, así que probablemente de mala forma si quieres ser un buen ciudadano. Le sugeriría que almacene en caché ese javascript y que en realidad solo lo recupere periódicamente como lo considere oportuno.

Answer 2

Cuando se carga un archivo en github, puede usarlo como fuente externa o alojamiento gratuito. Troy Alford lo ha explicado bien arriba. Pero para que sea más fácil, permítame decirle algunos pasos sencillos y luego puede usar un archivo 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 tienes que eliminar https: // y el punto (.) Entre raw y githubusercontent

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 css o javascript externo 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

Answer 3

Encontré que el error se mostraba debido a los comentarios al principio del archivo. Puede resolver este problema, simplemente creando su propio archivo sin comentarios y presionando a 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

Answer 4

Esto ya no es posible. GitHub ha deshabilitado explícitamente el enlace dinámico de JavaScript, y las versiones más recientes de los navegadores respetan esa configuración.

Heads up: el soporte del encabezado nosniff llega a Chrome y Firefox

Answer 5

Hay una buena solución para esto, ahora, utilizando jsdelivr.net .

Pasos

1. Encuentre su enlace en GitHub y haga clic en la versión "Raw".
2. Copia la URL.
3. Cambie raw.githubusercontent.com a cdn.jsdelivr.net
4. Inserta /gh/ antes de tu nombre de usuario.
5. Eliminar el nombre de la branch .
6. (Opcional) Inserte la versión a la que desea vincular, como @version (si no lo hace, 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 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 cometer-hash en lugar de la rama. El uso del enlace más reciente puede resultar en un almacenamiento a largo plazo del archivo, lo que hace que su enlace no se actualice a medida que se insertan nuevas versiones. La vinculación a un archivo mediante comilla-hash o etiqueta hace que el enlace sea único para la versión.

¿Por qué se necesita esto?

En 2013, GitHub comenzó a usar X-Content-Type-Options: nosniff , que instruye a los navegadores más modernos para imponer una estricta comprobación de tipos MIME. A continuación, devuelve los archivos sin formato en un tipo MIME devuelto por el servidor, lo que impide que el navegador utilice el archivo como se pretende (si el navegador respeta la configuración).

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

Answer 6

La forma más sencilla:
<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
Sin text/plain

Answer 7

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 con AJAX para el script y ejecutar eval en la cadena de respuesta, a continuación, el fragmento de código 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 añadir el comentario de sourceURL es permitir la depuración del script dentro de las herramientas de desarrollo del navegador.

Answer 8

Para dejar las cosas claras y cortas.

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

Tenga en cuenta que esto es manejado por el hosting de desarrollo de rawgit y no por su cdn para el hosting de producción

Answer 9

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

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

Esto funciona para mi.

Answer 10

https://raw.githack.com/

encontrado este sitio suministrar un CDN para

• eliminar el nosniff http nosniff
• arreglar el mime type por nombre ext

y este sitio:

rawgit.com

Answer 11

raw.github.com no es raw.github.com acceso en bruto al activo de archivo, sino una vista representada por Rails. Por lo tanto, acceder a raw.github.com es mucho más pesado de lo necesario. No sé por qué raw.github.com se implementa como una vista de Rails. En lugar de solucionar este problema de ruta, GitHub agregó un encabezado de X-Content-Type-Options: nosniff .

Solución:

• Pon el script a user.github.io/repo
• Utilice un CDN de terceros como rawgit.com.

Answer 12

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

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

Answer 13

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

raw.githubusercontent hace que todos los archivos utilicen el tipo MIME text/plain , incluso si el archivo es un archivo CSS o JavaScript. Entonces, vaya a https://raw.githubusercontent.com/‹user›/‹repo›/‹branch›/‹filepath› no será el tipo MIME correcto sino un archivo de texto simple, y lo vinculará a través de <link href="..."/> o <script src="..."></script> no funcionará: el CSS no se aplicará / el JS no se ejecutará.

GitHub Pages alberga 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, GitHub Pages requiere que se comprometa con una rama especial, gh-pages .

En su nuevo sitio, que suele ser https://‹user›.github.io/‹repo› , todos los archivos confirmados en la rama de gh-pages (el compromiso más reciente) están presentes en esta URL. Entonces, puede enlazar a 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 paralela a la master . En la rama gh-pages , puede editar su archivo .gitignore 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 rama master . Esto es útil porque normalmente no desea realizar un seguimiento de los cambios en los archivos de compilación en su repositorio regular. Cada vez que desee actualizar sus archivos alojados, simplemente fusione el master en gh-pages , reconstruya, confirme y luego presione.

(protip: puede fusionar y reconstruir en el mismo compromiso 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

Answer 14

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

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

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

Si usa Requestly, puedo sugerirle dos soluciones.

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

Pasos

1. Instale 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: usar la regla de reemplazar host

1. Instale 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. Reemplace raw.githubusercontent.com con rawgit.com

Compruebe esta captura de pantalla para más detalles

Como probar

Creamos un JS Fiddle simple para probar si podemos usar archivos Github sin formato como scripts en nuestro código. Aquí está el Fiddle 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 ves Script evaluated successfully! , Significa que puede usar el archivo github sin formato en su código. De lo contrario Problem evaluating script indica que hay algún problema al ejecutar la secuencia de comandos desde el origen de github sin formato.

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

¡¡Espero eso ayude!!

Descargo de responsabilidad: soy autor de Requestly para que pueda culpar por cualquier cosa que no le guste.