web-dev-qa-db-ja.com

GitHubでホストされている外部のJavaScriptファイルをリンクして実行する

ローカルのJavaScriptファイルのリンク参照をGitHubのRAWバージョンに変更しようとすると、テストファイルが機能しなくなります。エラーは次のとおりです。

...のスクリプトの実行を拒否されました。そのMIMEタイプ（text/plain）は実行可能ではなく、厳密なMIMEタイプチェックが有効になっています。

この動作を無効にする方法はありますか？それともGitHubのRAWファイルへのリンクを許可するサービスがありますか？

作業コード

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

動作しないコード：

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

今は、 jsdelivr.net ）を使用してisこれを回避することができます。

ステップ ：

  1. GitHubであなたのリンクを見つけ、そして "Raw"バージョンをクリックしてください。
  2. URLをコピーしてください。
  3. raw.githubusercontent.comをcdn.jsdelivr.netに変更
  4. ユーザー名の前に/gh/を挿入してください。
  5. branch名を削除してください。
  6. （省略可能）リンクしたいversionを@versionとして挿入します（これを行わないと、latestが得られます - これは長期キャッシュの原因となる場合があります）。

例 ：

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

プロダクション環境の場合 では、ブランチではなく特定のタグまたはコミットハッシュをターゲットにすることを検討してください。 latestリンクを使用すると、ファイルが長期間キャッシュされ、新しいバージョンをプッシュしてもリンクが更新されない可能性があります。 commit-hashまたはtagでファイルにリンクすると、リンクはバージョン固有のものになります。

なぜこれが必要なのでしょうか。

2013年に、GitHubはX-Content-Type-Options: nosniffの使用を開始しました。これは、より近代的なブラウザに厳密なMIMEタイプチェックを強制するように指示します。その後、ブラウザがそのファイルを意図したとおりに使用できないように（ブラウザがその設定を尊重する場合）、生のファイルをサーバーから返されたMIMEタイプで返します。

このトピックの背景については、 このディスカッションスレッド ）を参照してください。

977
Troy Alford

これはもう不可能です。 GitHubはJavaScriptのホットリンクを明示的に無効にしており、新しいバージョンのブラウザはその設定を尊重します。

ヘッズアップ：ChromeとFirefoxに来るnosniffヘッダーのサポート

55
Peeja

rawgithub.comはrawgit.comにリダイレクトするので、上記の例は次のようになります。

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

25
Paul Browne

上記の回答は明確に質問に答えますが、別の代替案を提供したいと思います-同様の問題を解決するための異なる見解/アプローチ

ブラウザ拡張機能を使用して、X-Content-Type-Optionsファイルのraw.githubusercontent.com応答ヘッダーを削除することもできます。応答ヘッダーを変更するためのブラウザー拡張機能がいくつかあります。

  1. リクエスト：Chrome + Firefox
  2. ヘッダーの変更：Firefox

Requestlyを使用する場合、2つの解決策を提案できます

解決策1：ヘッダーの変更ルールを使用して、応答ヘッダーを削除する

手順

  1. Requestlyを http://www.requestly.in からインストールします
  2. ルールページ に移動します
  3. [アイコンを追加]をクリックしてルールを作成します
  4. [ヘッダーの変更]を選択します
  5. 名前と説明を付ける
  6. Remove-> Response-> X-Content-Type-Optionsを選択します
  7. [ソース]フィールドにUrl-> Contains-> raw.githubusercontent.comと入力します

解決策2：ホストの置換ルールを使用する

  1. Requestlyを http://www.requestly.in からインストールします
  2. ルールページ に移動します
  3. [アイコンを追加]をクリックしてルールを作成します
  4. raw.githubusercontent.comをrawgit.comに置き換えます

詳細については、このスクリーンショットを確認してください enter image description here

テスト方法

単純なJS Fiddleを作成して、コード内で生のgithubファイルをスクリプトとして使用できるかどうかをテストしました。以下は 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 blog も書きました。詳細については、それを参照してください。

それが役に立てば幸い！！

免責事項：私は Requestly の著者ですので、あなたが気に入らないものは何でも責めることができます。

7
sachinjain024

物事を明確かつ短くする

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

これはrawgitの開発ホスティングによって処理され、本番ホスティングのためのcdnでは処理されないことに注意してください。

6
Tomer Ben David

https://raw.githack.com/ /

このサイトがのCDNを提供していることがわかりました

  • nosniff httpヘッダを削除
  • ext名でmime typeを修正

そしてこのサイト：

https://rawgit.com/

注：RawGitは耐用年数の終わりに達しました

5
yurenchen

GitHub Pagesは、この問題に対するGitHubの公式ソリューションです。

raw.githubusercontentは、ファイルがCSSまたはJavaScriptファイルであっても、すべてのファイルがtext/plain 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に存在します。したがって、<script src="https://‹user›.github.io/‹repo›/file.js"></script>を介してjsファイルにリンクできます。これは正しいMIMEタイプになります。

ビルドファイルはありますか？

個人的には、このブランチをmasterと並行して実行することをお勧めします。 gh-pagesブランチでは、.gitignoreファイルを編集して、チェックインサイトに必要なすべてのdist/buildファイルを作成できます（たとえば、縮小/コンパイルされたファイルがある場合） ）、無視する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
5
chharvey

私のユースケースは、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コメントを追加することで、ブラウザの開発者ツール内でスクリプトをデバッグできるようになります。

4
Daniel Sokolowski

ファイルがgithubにアップロードされると、外部ソースまたは無料ホスティングとして使用できます。 Troy Alfordがそれを上で説明しています。しかし、簡単にするために、簡単な手順を説明してから、サイトでgithubのrawファイルを使用します。

これがあなたのファイルのリンクです。

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

これを実行するには、 https：// と raw と githubusercontent の間のドット（。）を削除する必要があります。

このような：

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

1
Fahim Raza

私はあなたと同じ問題を抱えていました、私がしたのは

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

わたしにはできる。

1
Yiting Gu

私はエラーがファイルの冒頭のコメントが原因で表示されているのを見つけました、あなたは単にコメントなしであなた自身のファイルを作成しgitにプッシュすることによってこの問題を解決できます、それはエラーを表示しません

証明のためにあなたは簡単な改ページの同じコードでこれらの2つのファイルを試すことができます：

コメントなし

コメント付

1
santosh

raw.github.comは本当にファイル資産への生のアクセスではなく、Railsによってレンダリングされたビューです。そのため、raw.github.comへのアクセスは必要以上に重いです。なぜraw.github.comがRailsのビューとして実装されているのかわかりません。このルートの問題を修正する代わりに、GitHubはX-Content-Type-Options: nosniffヘッダーを追加しました。

回避策：

  • スクリプトをuser.github.io/repoに置きます
  • Rawgit.comのようなサードパーティのCDNを使用してください。
0
weakish

あるいは、サーバー側でマークアップを生成する場合は、単にフェッチして注入することができます。たとえば、JSTLではこれを実行できます。

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

彼らは理由でホットリンクを許可していないので、あなたが良い市民になりたいのであればおそらく悪い形式です。私はあなたがそのJavaScriptをキャッシュし、あなたが適切と思うように実際に定期的にしか再フェッチすることを勧めます。

0
matt burns