Chrome에서이 자바 스크립트 파일을 실행하지 않았습니다.

내 HTML 페이지의 머리에는 다음이 있습니다.

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

브라우저 (Google Chrome v 27.0.1453.116)에 페이지를로드하고 개발자 도구를 활성화하면 다음과 같이 표시됩니다.

MIME 유형 ( 'text / plain')이 실행 가능하지 않으므로 ' https://raw.github.com/cloudhead/less.js/master/dist/less-1.3.3.js ' 에서 스크립트 실행을 거부했습니다. 엄격한 MIME 유형 검사가 활성화되었습니다.

실제로 스크립트가 실행되지 않습니다. Chrome에서 이것이 일반 텍스트 파일이라고 생각하는 이유는 무엇입니까? .js파일 확장자 가 분명히 있습니다 .

HTML5를 사용하고 있기 때문에 type속성을 생략 했기 때문에 문제가 발생할 수 있다고 생각했습니다. 그래서 나는 추가 type="text/javascript"받는 <script>태그와 같은 결과를 얻었다. 나는 시도했지만 type="application/javascript"여전히 같은 오류가 발생했습니다.

그런 다음 type="text/plain"호기심으로 바꾸려고했습니다 . 브라우저는 오류를 반환하지 않았지만 물론 JavaScript도 실행되지 않았습니다.

마지막으로 파일 이름의 마침표로 인해 브라우저가 중단 될 수 있다고 생각했습니다. 따라서 HTML 코드에서 모든 마침표를 URL 이스케이프 문자로 변경했습니다 %2E.

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

이것은 여전히 ​​작동하지 않았습니다. 실제로 작동하는 유일한 방법은 (예 : 브라우저에서 오류가 발생하지 않고 JS가 성공적으로 실행 됨) 파일을 다운로드하여 로컬 디렉토리에 업로드 한 다음 src값을 로컬 파일 로 변경하는 것 입니다. 내 웹 사이트의 공간을 절약하려고하기 때문에 오히려이 작업을 수행하지 않습니다.

연결된 파일이 실제로 자바 스크립트 유형임을 Chrome에서 인식하도록하려면 어떻게해야하나요?

언급 한 경로에서 호스팅이 Github에서 설정되는 방식이기 때문에 문제가 있습니다. 웹 호스팅은 파일을 실행하는 데있어 확장 유형이 유일한 요인이 아니라 웹 호스팅이 브라우저가 파일을 렌더링합니다.

호스트가 설정되어 있다면 .zip 파일을 .html 파일로 렌더링 할 수 있습니다. 파이어 버그를 사용하고 요청 된 내용에 대한 헤더 응답을 확인하여 직접 확인할 수 있습니다 .... 요청하는 경우 JS 파일이지만 헤더 응답이 다른 예상 값을 반환하면 브라우저는 요청 된 내용이 아닌 헤더 응답을 존중합니다 ...

원시 하위 도메인에서 호스팅하는 github Content-Type text/plain; charset=utf-8는 MIME 유형으로 반환 됩니다. 즉, JS로 실행되지 않고 원시 텍스트로 실행됩니다. 아래는 파일을 렌더링하기 위해 서버가 반환 해야하는 예입니다. github에 의해 반환되는 코드

JS MIME 유형을 지원하는 서버는 다음과 같습니다.

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

그리고 이것은 https://raw.github.com/cloudhead/less.js/master/dist/less-1.3.3.js헤더가 (RAW VIEW)로 응답하는 것입니다.

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

2018 년 12 월 편집

RawGit은 현재 악의적 인 사용으로 인해 노후화되고 있으므로 대신 다음 서비스 중 하나를 사용하는 것이 좋습니다.

• jsDelivr
• GitHub 페이지
• 코드 샌드 박스
• unpkg

원본 게시물

Rawgithub.com을 통해 사용자는 Git의 "Raw"버전을 가져 와서 <script>태그 에서 사용 가능한 URL로 바꿀 수 있습니다. 사용하기 쉽습니다 .. 원시 URL에서 첫 번째 URL을 제거하십시오 . 예를 들면 다음과 같습니다.

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

이것으로 바뀔 것입니다

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

그런 다음 <script>적절한 유형 의 태그에 넣습니다 . 간단합니다!

프로덕션이 아니라 개발 목적으로 만 사용되므로 요청 수를 제한합니다.

2014 년 편집

Reinderien이 언급했듯이 rawgithub는 이제 rawgit이므로 새 스크립트 링크는 다음과 같습니다.

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

파일 확장자는 중요하지 않으며 중요한 Content-Type 헤더이며 해당 파일은 text/plain컨텐츠 유형으로 제공됩니다 (Github의 "원시"보기의 목적 임).

실제로 파일 사본을 로컬로 사이트에 다운로드하여 포함시켜야합니다. Github에서 작동 한 경우에도 JS 파일을 비동기식으로로드하지 않으므로 해당 <script>태그를 페이지 헤더에 넣으면 사이트가 Github의 가용성에 종속됩니다.

이것은 특정 XSS 공격 을 방지하기위한 의도적 인 기능입니다 .

로 마이크 웨스트 설명 , 사용하지 않는 raw.github.com는 CDN으로; 사용 GitHub의 페이지 대신.

또한 예약되지 않은 문자를 명시 적으로 인코딩해도 URL 처리 방식이 변경되지 않습니다.

문제가 지적한 바와 같이 raw.github.com 이 제공하는 거의 모든 내용은 텍스트 파일로 전송됩니다. 그러면 다른 응용 프로그램이나 문제가 발생하지 않고 브라우저에서 내용이 일반 텍스트로 렌더링됩니다. 그렇지 않으면 .js 파일을 보려고 시도하면 브라우저가 파일을 표시하지 않고 실행하려고 할 수 있습니다.

게다가 github 또는 pages.github는 CDN이 되려고하지 않습니다. 당신은 정말로 :

1. 파일을 직접 호스팅하십시오. 그렇게 크지는 않습니다.
2. 이 파일 및 사이트의 다른 정적 파일에는 전용 CDN을 사용하십시오.
3. 다양한 버전의 lessjs를 사용할 수 있는 cdnjs.com 과 같은 것을 사용하십시오 .