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


546

ローカル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>

3
rawgit.comが新しいドメインになりました
Muhammad Umer


1
@MuhammadUmer-ソースファイルが変更されない場合のみ。rawgitキャッシュは更新されません
vsync 2018

3
2019:RAWまたはRAWGITについて言及しているすべての回答をスキップしてください。Rawgitは死んだ。chharweyからの回答に降りて、それがトップになるまで賛成投票します。これが良い方法です。最も単純で、公式のGitHub推奨アプローチを使用します。
Marco Faustinelli

1
jsdelivr.com/?docs=ghを使用してください。動作します
AuthorProxy

回答:


1018

そこ、このための良い回避策は使用することによって、今、jsdelivr.netを

手順

  1. GitHubでリンクを見つけ、「Raw」バージョンをクリックします。
  2. URLをコピーします。
  3. 変更raw.githubusercontent.comcdn.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またはタグによってファイルにリンクすると、リンクがバージョンに固有になります。


なぜこれが必要なのですか?

2013年、GitHubは X-Content-Type-Options: nosniff。これは、より最近のブラウザーに厳密なMIMEタイプチェックを適用するように指示します。次に、サーバーから返されたMIMEタイプで生ファイルを返し、ブラウザーが意図したとおりにファイルを使用できないようにします(ブラウザーが設定を優先する場合)。

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


14
要旨にも使えます。私は置き換えることができたgist.githubusercontent.comrawgist.comし、それが働いてしまいました。
haridsv 2015年

3
誰がこのサイトをrawgitで管理しているのかはわかりませんが、本番環境では使用しません。あなたのサイトにjavascriptを挿入できる未知の第三者がいるでしょう。
2017年

1
@Maciej Krawczyk-はい-このページでは、まさにこの理由から、ブランチリンクではなくコミット固有のリンクを使用することを明示的に推奨しています。
Troy Alford 2017年

4
rawgitは廃止されました(2018-10-08現在):rawgit.com。この回答を更新することをお勧めします。
chharvey、2018年

1
@chharveyを指摘していただきありがとうございます-jsdelivr.netを反映するように回答を更新しました
Troy Alford



10

GitHubページは、この問題に対する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ページでは特別なブランチにコミットする必要があることに注意してください。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の枝。通常は、通常のリポジトリのビルドファイルの変更を追跡する必要がないため、これは便利です。ホストされているファイルを更新するたびmastergh-pages、にマージし、再構築、コミットしてからプッシュするだけです。

(ヒント:次の手順で同じコミットでマージおよび再構築できます:)

$ git checkout gh-pages
$ git merge --no-ff --no-commit master  # prepare the merge but dont 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

8

上記の答えは明確に質問に答えますが、私は別の選択肢を提供したいと思います-同様の問題を解決するための別のビュー/アプローチ。

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

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

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

解決策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.comrawgit.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!場合Problem evaluating scriptは、コードでraw githubファイルを使用できることを意味します。それ以外の場合は、raw githubソースからスクリプトを実行しているときに問題が発生していることを示しています。

またこれについてRequestlyブログに記事を書きまし。詳しくはこちらをご覧ください。

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

免責事項:私はRequestlyの作者ですので、あなたが好きではないもののせいにすることができます。



5

明確かつ簡潔にするため

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

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


デフォルトの生のURLはこの回答以来変更されているようですので、変換は今ですhttps://raw.githubusercontent.com-> https://rawgit.comそれ以外の場合、この回答は最も明確で機能します。
mikeym 2015年

4
rawgitは廃止されました(2018-10-08現在):rawgit.com。この回答を更新することをお勧めします。
chharvey、2018年

4

私の使用例は、Githubと同じ制限を持つ私のBitbucketアカウントから「bookmarklets」ディレクトリをロードすることでした。私が思いついた回避策は、スクリプトの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コメントの追加は、ブラウザの開発者ツール内でスクリプトをデバッグできるようにするためのものです。


1

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

ファイルのリンクは次のとおりです。

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

これを実行するには、https://を削除する必要がありますrawgithubusercontentの間のドット(。)あります

このような:

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


3
rawgitは廃止されました(2018-10-08現在):rawgit.com。この回答を更新することをお勧めします。
chharvey、2018年

1

ファイルの先頭のコメントが原因でエラーが表示されたことがわかりました。コメントなしで独自のファイルを作成してgitにプッシュするだけでこの問題を解決でき、エラーは表示されません

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

コメントなし

コメント付き


1

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

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

わたしにはできる。


何から何に変更しますか?前後を示してください
アレクサンダーミルズ

0

最も簡単な方法:
<script type="text/plain" src="http://raw.githubusercontent.com/user/repo/branch/file.js"></script>
GitHubにで役立った、

非常に

信頼性のある。
付きtext/plain
ここに画像の説明を入力してください なしtext/plain
ここに画像の説明を入力してください


これは最良の解決策であり、機能し、非常に理にかなっています。
A20

2
番号。これが行うことは、スクリプトが実行されないようにすることです
Steven Penny

2
もうすぐ機能しなくなります。Androidデバイスのlogcatから:「無効なtype / language属性を持つフェッチスクリプトは非推奨になり、2017年1月頃のM56で削除されます。詳細については、chromestatus.com / features / 5760718284521472を参照してください。」
Jens Hauke 2017年

0

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

回避策:

  • スクリプトを user.github.io/repo
  • rawgit.comのようなサードパーティのCDNを使用します。

これで混乱した他の人のために、彼らは意図的にそれをしました。あなたは単にraw.github.comファイルをロードするために使用することができました-そしてgithubはそれらがCDNとして使用されていることに気づきました、それはそれらにはるかに多くのトラフィックを引き起こしていました。その結果、彼らはそれをX-Content-Type-Options: nosniffヘッダー付きのこのタイプのレンダリングに変更しました。具体的には、人々がサービスをそのように使用するのを防ぎます。
Troy Alford、

0

あるいは、サーバー側でマークアップを生成する場合は、フェッチして注入するだけです。たとえば、JSTLでは次のようにできます。

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

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


0


元の

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

cdn.jsdelivr.net

https://cdn.jsdelivr.net/gh/antelove19/qrcodejs/qrcode.min.js
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.