Chrome se recusou a executar este arquivo JavaScript

32

No cabeçalho da minha página HTML, tenho:

<script src="https://raw.github.com/cloudhead/less.js/master/dist/less-1.3.3.js"></script>

Quando carrego a página no meu navegador (Google Chrome v 27.0.1453.116) e habilito as ferramentas de desenvolvedor, ele diz:

Recusou-se a executar o script em ' https://raw.github.com/cloudhead/less.js/master/dist/less-1.3.3.js ' porque seu tipo MIME ('text / plain') não é executável e a verificação estrita do tipo MIME está ativada.

De fato, o script não será executado. Por que o Chrome acha que este é um arquivo de texto sem formatação? Claramente, tem uma .jsextensão de arquivo.

Como estou usando HTML5, omiti o typeatributo, então pensei que isso poderia estar causando o problema. Então eu adicionei type="text/javascript"à <script>tag e obtive o mesmo resultado. Eu até tentei type="application/javascript"e ainda tenho o mesmo erro.

Então eu tentei mudar para type="text/plain"apenas por curiosidade. O navegador não retornou um erro, mas é claro que o JavaScript também não foi executado.

Finalmente, pensei que os períodos no nome do arquivo estivessem jogando o navegador fora. Então, no meu código HTML, mudei todos os períodos para o caractere de escape da URL %2E:

<script src="https://raw.github.com/cloudhead/less%2Ejs/master/dist/less-1%2E3%2E3.js"></script>

Isso ainda não funcionou. A única coisa que realmente funciona (ou seja, o navegador não dá erro e o JS é executado com êxito) é se eu fizer o download do arquivo, carregá-lo em um diretório local e depois alterar o srcvalor para o arquivo local. Prefiro não fazer isso, pois estou tentando economizar espaço no meu próprio site.

Como faço para o Chrome reconhecer que o arquivo vinculado é realmente um tipo JavaScript?

chharvey
fonte

Respostas:

16

O problema que você tem está fora de controle, pois é assim que a hospedagem é configurada no Github no caminho que você mencionou. O tipo de extensão não é apenas o fator quando se trata de executar arquivos, pois a hospedagem na web pode sobrepor como navegador renderiza um arquivo.

Você pode ter uma renderização de arquivo .zip como um arquivo .html se o host tiver sido configurado para fazer isso, você mesmo pode verificar isso usando o firebug e visualizando a resposta do cabeçalho com base no que está sendo solicitado ... então, se você solicitar um arquivo JS, mas a resposta do cabeçalho retornar um valor esperado diferente, os navegadores respeitarão a resposta do cabeçalho e não o que está sendo solicitado ...

O host do github no subdomínio bruto está retornando Content-Type text/plain; charset=utf-8como o tipo MIME, o que significa que não será exercido como JS, mas como texto não processado. Abaixo está um exemplo do que você precisaria que o servidor retornasse para renderizar o arquivo, e mais abaixo é o código que está sendo retornado pelo github.

Um servidor que suporte o tipo JS MIME será parecido com:

Accept-Ranges   bytes
Connection  Keep-Alive
Content-Encoding    gzip
Content-Length  31097
Content-Type    application/javascript
Vary    Accept-Encoding
Request Headersview source
Accept  text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

E é isso que o https://raw.github.com/cloudhead/less.js/master/dist/less-1.3.3.jscabeçalho está respondendo como (VISTA CRUA).

Accept-Ranges   bytes
Connection  Keep-Alive
Content-Disposition inline
Content-Encoding    gzip
Content-Length  41354
Content-Transfer-Encoding   binary
Content-Type    text/plain; charset=utf-8
Simon Hayter
fonte
Er o que? Então, qual é a solução?
Pabrams
2
@pabrams usando uma série adequada dentro de seu controle é a correção ou o uso rawgit
Simon Hayter
25

Dezembro de 2018

Agora, o RawGit está desativando devido ao uso mal-intencionado; portanto, eles recomendam o uso de um dos seguintes serviços:


Postagem original

O Rawgithub.com permite aos usuários pegar as versões "Raw" de um Git e transformá-lo em um URL utilizável em <script>tags. É muito fácil de usar, basta remover o primeiro .do URL bruto. Por exemplo, isto:

https://raw.github.com/joelambert/CSS-Animation-Store/master/cssanimationstore.js

se tornaria isso

https://rawgithub.com/joelambert/CSS-Animation-Store/master/cssanimationstore.js

e então você o coloca em uma <script>tag com o tipo apropriado. Que simples!

Eles limitam o número de solicitações, porque se destinam apenas a fins de desenvolvimento, não a produção.

2014 editar

Como Reinderien mencionou, o rawgithub agora é apenas rawgit, então o novo link do script seria

https://rawgit.com/joelambert/CSS-Animation-Store/master/cssanimationstore.js
Zach Saucier
fonte
6
Diz na página inicial do rawgithub, não o use para sites de produção . Também não parece ser um site oficial do Github.
usar o seguinte
1
Eu nunca disse que não ...
Zach Saucier 1/01
1
Nota - isso agora redireciona para rawgit.com. E funciona!
Reinderien
1
Agora, este site fornece 403s para solicitações e os cabeçalhos informam que está caindo.
Michael
@ Michael triste :( Felizmente rawgit forneceu algumas alternativas em seu site, então eu atualizei a minha resposta com as previstas.
Zach Saucier
6

A extensão do arquivo é irrelevante, é o cabeçalho do tipo de conteúdo que importa e esse arquivo é fornecido com um text/plaintipo de conteúdo (que é o objetivo da exibição "bruta" do Github).

Você realmente deve baixar uma cópia do arquivo localmente no seu site e incluí-lo a partir daí. Mesmo que funcione no Github, como você não carrega o arquivo JS de forma assíncrona, colocar essa <script>tag no cabeçalho da página torna seu site dependente da disponibilidade do Github.

Fonte de Tim
fonte
8
"Você realmente deve baixar uma cópia do arquivo localmente no seu site e incluí-lo a partir daí", é a chave. Não é para ser hospedado no GitHub.
Octopus
@Octopus podemos configurar para baixar e armazenar uma cópia local do que e depois apontar o script para programaticamente ..
Sudip Bhandari
2

Esse é um recurso intencional projetado para impedir certos ataques XSS .

Como Mike West explica , não use raw.github.comcomo CDN; use as páginas do GitHub .

Além disso, a codificação explícita de caracteres não reservados não altera a maneira como a URL é tratada.

Lèse majesté
fonte
1

Como bybe ressalta, o problema é que quase todo o conteúdo exibido pelo raw.github.com é enviado como um arquivo de texto - dessa forma, o conteúdo é renderizado em texto sem formatação no seu navegador sem que outros aplicativos ou problemas atrapalhem. Caso contrário, você entraria na situação em que a tentativa de visualizar um arquivo .js pode fazer com que o navegador tente executá-lo, em vez de mostrá-lo.

Além disso, nem o github nem o pages.github estão tentando ser uma CDN. Você realmente deve:

  1. Hospede o arquivo você mesmo, não é tão grande.
  2. Use uma CDN dedicada para este e outros arquivos estáticos no seu site.
  3. Use algo como cdnjs.com que possui várias versões do lessjs disponíveis .
Zhaph - Ben Duguid
fonte