GitHub에서 호스트되는 외부 JavaScript 파일 링크 및 실행

GitHub에서 호스트되는 외부 JavaScript 파일 링크 및 실행

로컬 JavaScript 파일의 링크된 참조를 GitHub raw 버전으로 변경하려고 하면 테스트 파일이 작동을 멈춥니다.에러는 다음과 같습니다.

의 MIME 타입 「MIME」( ))이 있기 때문에, ...로부터의 스크립트 실행을 했습니다.에서 스크립트 실행을 거부했습니다.text/plain수 한 MIME 가 유효하게 되어 는 실행할 수 없습니다.MIME을 사용합니다.

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

작업 코드:

<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. 를제 remove remove remove를 remove remove 를 remove 。branchdisclossible을 클릭합니다.
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

실제 가동 환경의 경우 지점이 아닌 특정 태그 또는 커밋 해시를 대상으로 하는 것이 좋습니다.최신 링크를 사용하면 파일이 장기간 캐싱되어 새 버전을 푸시할 때 링크가 업데이트되지 않을 수 있습니다.커밋 해시 또는 태그로 파일에 링크하면 링크는 버전에 따라 고유해집니다.

---

이게 왜 필요하죠?

, GitHub은 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★.X-Content-Type-Options: nosniff이는 보다 최신 브라우저가 엄격한 MIME 유형 검사를 수행하도록 지시합니다.그런 다음 서버에서 반환된 MIME 유형의 원시 파일을 반환하여 브라우저가 원하는 대로 파일을 사용할 수 없도록 합니다(브라우저가 설정을 따르는 경우).

이 토픽의 배경은, 이 토론 스레드를 참조해 주세요.

이것은 더 이상 가능하지 않다.GitHub는 JavaScript 핫링크를 명시적으로 비활성화하였으며 새로운 버전의 브라우저는 이 설정을 준수합니다.

주의사항: nosniff 헤더 지원은 Chrome 및 Firefox에서 제공 예정

rawgithub.comrawgit.com위의 예는 다음과 같습니다.

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

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

raw.githubusercontent에 「」를 하도록 설정합니다.text/plainCSS JavaScript MIME. ★★★★★★★★★★★★★★★★★https://raw.githubusercontent.com/‹user›/‹repo›/‹branch›/‹filepath› MIME 이 되어, 「MIME」를 개입시켜 링크 .<link href="..."/> ★★★★★★★★★★★★★★★★★」<script src="..."></script>동작하지 않습니다.CSS c c c c c c c c 。JS에 관한 것입니다.

GitHub Pages는 특별한 URL에서 당신의 레포(repo)를 호스트하기 때문에 당신이 해야 할 일은 당신의 파일을 체크인하고 푸시하는 것입니다.대부분의 경우 GitHub Pages는 특별한 브랜치에 커밋해야 합니다.gh-pages.

통상은 「 」, 「 」, 「 」입니다.https://‹user›.github.io/‹repo› 모든 " " "gh-pagesbranch 커밋url.branch(「」)에 .URL 입니다.할 수 있습니다.<script src="https://‹user›.github.io/‹repo›/file.js"></script>MIME을 사용하다

빌드 파일이 있습니까?

개인적으로 추천하는 것은 이 브런치를 다음과 같이 병행하여 실행하는 것입니다.master. 에서에서gh-pages 브런치, 브런치 합니다..gitignore사이트에 필요한 모든 dist/build 파일(미니파이드 파일 또는 디스트리뷰트 파일 등)을 체크 인하는 한편, 이러한 파일은 무시합니다.master this 。빌드 합니다.일반적으로 일반 재포에서 빌드 파일의 변경 내용을 추적하지 않으려는 경우 이 방법이 유용합니다. 파일을는, 「」를 Marge 만 하면 .mastergh-pages 커밋, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , .

(protip: 다음 순서로 같은 커밋으로 Marge 및 재구축할 수 있습니다).

$ 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

https://raw.githack.com/

이 사이트에서 CDN을 제공하고 있는 것을 발견했습니다.

• nosniffhttp 헤
• mime type

및 다음 사이트:

https://rawgit.com/

메모: RawGit의 내용연수가 종료되었습니다.

.X-Content-Type-Options( 「」의 경우)raw.githubusercontent.com응답 헤더를 수정하기 위한 브라우저 확장자가 몇 개 있습니다.

1. 요청 사항: Chrome & Firefox
2. 헤더 값 변경: Firefox

Requestly를 사용하여 X-Content-Type-Options 응답 헤더 제거

• 브라우저에 대한 요청으로 설치
• 규칙 페이지 열기
• rule ]및 [ Modify In ]필드를 [Create rule][ Select Modify Headers In Source ]라고 입력합니다.드를 클릭하여 다음과 같이 입력합니다.Url->Contains->raw.githubusercontent.com
• [ 에서 [Response Headers]는Remove->X-Content-Type-Options

테스트 방법

코드의 스크립트로 raw github 파일을 사용할 수 있는지 테스트하기 위해 간단한 JS Fielen을 만들었습니다.여기 아래 코드가 있는 바이올린입니다.

<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!할 수 .그렇지 않으면 raw github 파일을 사용할 수 있습니다.그렇지 않으면Problem evaluating script는 스크립트를 raw github 소스에서 실행하는 동안 문제가 발생했음을 나타냅니다.

주의: 이것은 사용의 머신에서만 동작하기 때문에, 실가동 환경에 도입할 수 없습니다.이 방법을 사용하면 Github 저장소 내의 파일을 쉽게 사용할 수 있습니다.

면책사항:난 Requestly의 저자니까 마음에 안 드는 건 다 비난할 수 있어.

저의 사용 사례는 Github과 동일한 제한을 가진 Bitbucket 계정에서 'bookmarklets' dircly를 로드하는 것이었습니다.제가 생각해낸 건 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도구 를 디버깅할 수 하기 것입니다.

간결하고 알기 쉽게 하다

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

이 작업은 프로덕션 호스팅용 cdn이 아닌 rawgit의 개발 호스팅에 의해 처리됩니다.

파일이 github에 업로드되면 외부 소스 또는 무료 호스팅으로 사용할 수 있습니다.Troy Alford는 위에서 그것을 잘 설명했다.하지만 쉽게 하기 위해 몇 가지 간단한 단계를 알려드리겠습니다. 그러면 사이트에서 github raw 파일을 사용할 수 있습니다.

다음은 파일 링크입니다.

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

이를 실행하려면 https:// 및 raw와 githubuser 콘텐츠 사이의 닷()을 삭제해야 합니다.

다음과 같이 합니다.

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

이 링크를 방문하면 Javascript 호출에 사용할 수 있는 링크가 나타납니다.

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

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

마찬가지로 css 파일을 호스트하는 경우에도 위와 같이 해야 합니다.이것은 github에서 호스트되는 외부 css 또는 javascript 파일을 호출하는 간단한 링크를 얻는 가장 쉬운 방법입니다.

이게 도움이 됐으면 좋겠어요.

레퍼런스 URL:http://101helper.blogspot.com/2015/11/store-blogger-codes-on-github-boost-blogger-speed.html

파일의 선두에 코멘트가 있기 때문에 에러가 표시되고 있는 것을 알았습니다.코멘트 없이 자신의 파일을 만들고 git을 누르면, 에러는 표시되지 않습니다.

이 2개의 파일을 같은 코드(페이지 매기기 쉬운 코드)로 시험해 볼 수 있습니다.

코멘트 없이

코멘트와 함께

나도 너와 같은 문제가 있었어, 내가 한 일은 로 바뀌는 거야.

<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이 하고 있습니다.
★★★★★★★★★★★★★★★★★」

아주

reliable.
With text/plain
Without text/plain

raw.github.com파일 자산에 대한 실제 원시 액세스가 아니라 Rails에 의해 렌더링된 보기입니다. 세에 접속하다raw.github.com필요 이상으로 무겁다. 그런지 raw.github.com는 레일 뷰로 구현됩니다. GitHub은 GitHub을 했습니다.X-Content-Type-Options: nosniff머리글

회피책:

• 을 크음음음음음음음 put put put put put put put put put put에 붙이다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>

그들은 어떤 이유로든 핫링크를 허용하지 않기 때문에 좋은 시민이 되고 싶다면 아마도 나쁜 형태를 취할 것이다.Javascript를 캐시하고, 실제로 당신이 적합하다고 생각되는 대로 주기적으로 다시 가져오기를 권장합니다.

예

---

원래의

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

cdn.jsdelivr.net

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

언급URL : https://stackoverflow.com/questions/17341122/link-and-execute-external-javascript-file-hosted-on-github