로컬 JavaScript 파일의 연결된 참조를 GitHub 원시 버전으로 변경하려고하면 테스트 파일이 작동하지 않습니다. 오류는 다음과 같습니다

MIME 유형 ( text/plain)을 실행할 수없고 엄격한 MIME 유형 검사가 활성화되어 스크립트 실행을 거부했습니다 .

이 동작을 비활성화하는 방법이 있습니까, 아니면 GitHub 원시 파일에 링크 할 수있는 서비스가 있습니까?

작업 코드 :

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

작동하지 않는 코드 :

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

이 인 좋은 해결 방법은 사용하여, 지금,이에 대한 jsdelivr.net을 .

단계 :

1. GitHub에서 링크를 찾아 "Raw"버전을 클릭하십시오.
2. URL을 복사하십시오.
3. 변경 raw.githubusercontent.com에cdn.jsdelivr.net
4. /gh/사용자 이름 앞에 삽입하십시오 .
5. branch이름을 제거하십시오 .
6. (선택 사항) 링크하려는 버전을 다음과 같이 삽입하십시오 @version(이를 수행하지 않으면 최신 버전 이 제공되므로 장기 캐싱이 발생할 수 있음)

예 :

http://raw.githubusercontent.com/<username>/<repo>/<branch>/path/to/file.js

이 URL을 사용하여 최신 버전을 얻으십시오.

http://cdn.jsdelivr.net/gh/<username>/<repo>/path/to/file.js

이 URL을 사용하여 특정 버전을 얻거나 해시를 커밋하십시오.

http://cdn.jsdelivr.net/gh/<username>/<repo>@<version or hash>/path/to/file.js

프로덕션 환경의 경우 지점이 아닌 특정 태그 또는 커밋 해시를 타겟팅하는 것이 좋습니다. 최신 링크를 사용하면 파일이 장기간 캐싱되어 새 버전을 푸시 할 때 링크가 업데이트되지 않을 수 있습니다. commit-hash 또는 tag로 파일에 링크하면 링크가 버전에 고유합니다.

왜 이것이 필요한가요?

2013 년에 GitHub는을 사용하기 시작했으며 X-Content-Type-Options: nosniff, 이는 최신 브라우저에서 엄격한 MIME 유형 검사를 시행하도록 지시합니다. 그런 다음 서버가 리턴 한 MIME 유형으로 원시 파일을 리턴하여 브라우저가 의도 한대로 파일을 사용하지 못하게합니다 (브라우저가 설정을 준수하는 경우).

이 주제에 대한 배경 지식은 이 토론 스레드 를 참조하십시오 .

더 이상 불가능합니다. GitHub는 JavaScript 핫 링크를 명시 적으로 비활성화했으며 최신 버전의 브라우저는 해당 설정을 준수합니다.

헤즈 업 : Chrome 및 Firefox에서 nosniff 헤더 지원

rawgithub.com에 리디렉션 rawgit.com위의 예는 지금 것이다 그래서

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

GitHub Pages 는이 문제에 대한 GitHub의 공식 솔루션입니다.

raw.githubusercontenttext/plain파일이 CSS 또는 JavaScript 파일 인 경우에도 모든 파일이 MIME 유형을 사용하도록 합니다. 따라서 https://raw.githubusercontent.com/‹user›/‹repo›/‹branch›/‹filepath›올바른 MIME 형식이 아닌 일반 텍스트 파일이되고이를 통해 링크 <link href="..."/>하거나 <script src="..."></script>작동하지 않습니다. CSS가 적용되지 않습니다 / JS가 실행되지 않습니다.

GitHub Pages 는 리포지토리를 특수 URL로 호스팅하므로 파일을 체크인하고 푸시하기 만하면됩니다. 대부분의 경우, GitHub Pages에서는 특수 분기에 커밋해야합니다 gh-pages.

일반적으로의 새 사이트 https://‹user›.github.io/‹repo›에서 gh-pages브랜치에 커밋 된 모든 파일 (가장 최근 커밋)이이 URL에 있습니다. 따라서를 통해 js 파일에 연결할 수 <script src="https://‹user›.github.io/‹repo›/file.js"></script>있으며 이것이 올바른 MIME 유형입니다.

빌드 파일이 있습니까?

개인적으로이 분기를에 병렬로 실행하는 것이 좋습니다 master. 온 gh-pages지점, 당신은 당신의 편집 할 수 있습니다 .gitignore할 파일을 체크인 하는 동안, 당신이 당신의 위치 (예를 들어, 당신이 어떤 축소 된 경우 / 컴파일 된 파일)에 필요한 모든 DIST / 빌드 파일 무시를 유지하는 당신에 master지점입니다. 일반적으로 일반 리포지토리에서 빌드 파일의 변경 내용을 추적하지 않기 때문에 유용합니다. 당신은 단순히 병합, 호스팅 된 파일을 업데이트 할 때마다 master로 gh-pages, 다시, 커밋 한 다음 누릅니다.

(팁 : 다음 단계를 통해 동일한 커밋에서 병합 및 재 구축 할 수 있습니다.)

$ 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

위의 답변은 분명히 질문에 대답하지만 다른 대안을 제공하고 싶습니다-비슷한 문제를 해결하기위한 다른 견해 / 접근법.

브라우저 확장을 사용 X-Content-Type-Options하여 raw.githubusercontent.com파일의 응답 헤더 를 제거 할 수도 있습니다 . 응답 헤더를 수정하기위한 몇 가지 브라우저 확장이 있습니다.

1. 요청 : Chrome + Firefox
2. 헤더 수정 : Firefox

Requestly를 사용하면 두 가지 해결책을 제안 할 수 있습니다.

해결 방법 1 : 헤더 수정 규칙 사용 및 응답 헤더 제거

단계

1. http://www.requestly.in 에서 Requestly 설치
2. 규칙 페이지로 이동
3. 규칙 추가를 위해 아이콘 추가를 클릭하십시오
4. 헤더 수정을 선택하십시오.
5. 이름과 설명을 해주세요
6. 선택 Remove-> Response->X-Content-Type-Options
7. 소스 필드에 Url-> Contains->를 입력하십시오.raw.githubusercontent.com

해결 방법 2 : 호스트 규칙 교체 사용

1. http://www.requestly.in 에서 Requestly 설치
2. 규칙 페이지로 이동
3. 규칙 추가를 위해 아이콘 추가를 클릭하십시오
4. 교체 raw.githubusercontent.com로rawgit.com

자세한 내용은이 스크린 샷을 확인하십시오.

테스트하는 방법

코드에서 원시 github 파일을 스크립트로 사용할 수 있는지 테스트하기 위해 간단한 JS Fiddle을 만들었습니다. 다음 코드 가있는 바이올린 입니다.

<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>

이 표시 Script evaluated successfully!되면 코드에서 원시 github 파일을 사용할 수 있음을 의미합니다. 그렇지 않으면 Problem evaluating script원시 github 소스에서 스크립트를 실행하는 동안 문제가 있음을 나타냅니다.

또한 Requestly 블로그 에 이것에 관한 기사 를 썼습니다 . 자세한 내용은 참조하십시오.

그것이 도움이되기를 바랍니다!

면책 조항 : 나는 Requestly의 저자이므로 원하지 않는 것을 비난 할 수 있습니다.

https://raw.githack.com/

이 사이트에서

• nosniffhttp 헤더 제거
• mime type내선 이름으로 수정

이 사이트 :

https://rawgit.com/

참고 : RawGit의 수명이 다했습니다

일을 명확하고 짧게 만들려면

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

이는 프로덕션 호스팅을위한 cdn이 아니라 rawgit의 개발 호스팅에 의해 처리됩니다.

내 유스 케이스는 Github과 동일한 제한 사항이있는 Bitbucket 계정에서 ' bookmarklets'direclty 를로드하는 것이 었습니다 . 내가 생각해 낸 해결 방법은 스크립트를 위해 AJAX eval에 대한 응답 문자열에서 실행 하는 것입니다. 아래 스 니펫은 해당 접근법을 기반으로합니다.

<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>

주석을 추가 sourceURL하면 브라우저 개발자 도구 내에서 스크립트를 디버깅 할 수 있습니다.

파일이 github에 업로드되면 외부 소스 또는 무료 호스팅으로 사용할 수 있습니다. 트로이 알포 드는 위에서 잘 설명했습니다. 그러나 더 쉽게하기 위해 몇 가지 쉬운 단계를 알려면 사이트에서 github 원시 파일을 사용할 수 있습니다.

파일의 링크는 다음과 같습니다.

https://raw.githubusercontent.com/mindmup/bootstrap-wysiwyg/master/bootstrap-wysiwyg.js

이제 그것을 실행하려면 https : // 와 raw 및 githubusercontent 사이의 dot (.) 을 제거해야합니다

이처럼 :

rawgithubusercontent.com/mindmup/bootstrap-wysiwyg/master/bootstrap-wysiwyg.js

이제이 링크를 방문하면 자바 스크립트를 호출하는 데 사용할 수있는 링크가 제공됩니다.

마지막 링크는 다음과 같습니다.

https://rawgit.com/mindmup/bootstrap-wysiwyg/master/bootstrap-wysiwyg.js

마찬가지로 CSS 파일을 호스팅하는 경우 위에서 언급 한대로 수행해야합니다. github에서 호스팅되는 외부 CSS 또는 자바 스크립트 파일을 호출하는 간단한 링크를 얻는 가장 쉬운 방법입니다.

도움이 되길 바랍니다.

참조 URL : http://101helper.blogspot.com/2015/11/store-blogger-codes-on-github-boost-blogger-speed.html

파일 시작 부분의 주석으로 인해 오류가 표시되는 것을 발견했습니다. 주석없이 자신의 파일을 만들고 git으로 푸시하면이 문제를 해결할 수 있습니다. 오류가 없습니다.

증거를 위해 동일한 두 페이지의 쉬운 페이지 매김 으로이 두 파일을 시도 할 수 있습니다.

코멘트없이

코멘트와 함께

나는 당신과 같은 문제를 겪었습니다.

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

그것은 나를 위해 작동합니다.

가장 간단한 방법 :
<script type="text/plain" src="http://raw.githubusercontent.com/user/repo/branch/file.js"></script>
GitHub의에 의해 제공,
및

대단히

raw.github.com파일 자산에 대한 진정한 원시 액세스는 아니지만 Rails가 렌더링 한 뷰입니다. 따라서 액세스 raw.github.com는 필요한 것보다 훨씬 무겁습니다. 왜 raw.github.comRails 뷰로 구현 되는지 모르겠습니다 . 이 경로 문제를 해결하는 대신 GitHub가 X-Content-Type-Options: nosniff헤더를 추가했습니다 .

해결 방법 :

• 스크립트를 user.github.io/repo
• rawgit.com과 같은 타사 CDN을 사용하십시오.

또는 마크 업 서버 측을 생성하는 경우 가져 와서 주입 할 수 있습니다. 예를 들어 JSTL에서 다음을 수행 할 수 있습니다.

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

그들은 이유 때문에 핫 링크를 허용하지 않으므로 좋은 시민이되고 싶다면 나쁜 형태 일 것입니다. 나는 당신이 그 자바 스크립트를 캐시하고 실제로 당신이 적합하다고 생각하는 경우에만 정기적으로 다시 가져 오는 것이 좋습니다.

예

기발한

https://raw.githubusercontent.com/antelove19/qrcodejs/master/qrcode.min.js

cdn.jsdelivr.net

https://cdn.jsdelivr.net/gh/antelove19/qrcodejs/qrcode.min.js