すべてのhttp://リンクを//だけに変更できますか?


240

デイブ・ウォードは言う、

これは正確な読みではありませんが、RFC 3986のセクション4.2では、プロトコル(HTTPまたはHTTPS)を完全に省略した完全修飾URLが提供されています。URLのプロトコルが省略されている場合、ブラウザは代わりに基になるドキュメントのプロトコルを使用します。

簡単に言うと、これらの「プロトコルなし」のURLを使用すると、このような参照を、使用するすべてのブラウザーで機能させることができます。

//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js

最初は奇妙に見えますが、この「プロトコルなし」のURLは、HTTPとHTTPSの両方で利用できるサードパーティのコンテンツを参照するための最良の方法です。

これにより、HTTPとHTTPSの両方を介してアセットが利用可能であると想定して、HTTPページで見られる多くの混合コンテンツエラーが確実に解決されます。

これは完全にクロスブラウザ互換ですか?他に注意点はありますか?


このテクニックについては、先ほどIEブログで読みました。しかし、私がそれを試したとき、うまくいきません。私のサイトがHTTPSで提供されていた場合、ブラウザー(Chrome)はまだプロトコルレスURLにHTTPを使用していました。
クリストファーラミレス

10
警告:HTTP 3xxリダイレクトでは、スキームのないURIは絶対に使用しないでください。HTTPヘッダーは、このURL形式と互換性がありません。スキームに応じてリダイレクトする必要がある場合は、mod_rewriteなどを使用します。
user2596282 2013

1
@ user2596282最新バージョンのChromeとFirefoxでの実験は、HTTP 1.1の(まだドラフトのまま)リビジョンと同様に、あなたの意見には賛成できません。HTTPbisワーキンググループによって定義された仕様(svn.tools.ietf.org/svn/wg/httpbis/draft-ietf-httpbis/latest/…を参照)おそらく、あなたの言うことが一部のブラウザに当てはまります。特に、ロケーションヘッダーのプロトコル相対URLで失敗することを知っていますか?
マークアメリー2013


それらは使用しないでください。醜く冗長です。
IllidanS4はモニカを2014

回答:


204

公開する前に徹底的にテストしました。Browsershotsでのテストに使用できるすべてのブラウザーのうち、プロトコル相対URLを正しく処理しないブラウザー、つまりDilloと呼ばれるあいまいな* nixブラウザーのみを見つけることができました。

フィードバックを受けた欠点が2つあります。

  1. ページの基本プロトコルはfile:///になるため、ブラウザでローカルファイルを「開く」と、プロトコルなしのURLが期待どおりに機能しない場合があります。特に、CDNでホストされるアセットなどの外部リソースにプロトコルなしのURLを使用している場合。ApacheやIISなどのローカルWebサーバーを使用してhttp:// localhostに対してテストするただし、アドレスすることは問題ありません。
  2. 明らかに、プロトコルのないURLを正しく処理しないiPhoneフィードリーダーアプリが少なくとも1つあります。どちらに問題があるのか​​、どれだけ人気があるのか​​はわかりません。JavaScriptファイルをホストする場合、RSSリーダーは通常JavaScriptのコンテンツを無視するため、それは大きな問題ではありません。ただし、RSSを介してシンジケートする必要があるコンテンツ内の画像などのメディアにこれらのURLを使用している場合は問題になる可能性があります(ただし、単一のプラットフォーム上のこの単一のリーダーアプリは、非常にわずかな数のリーダーを占める可能性があります)。

33
IE7 / 8は、ほとんどの場合、プロトコル相対URL(別名、スキームレスURI)を適切に処理しますが、そのようなURLでスタイルシートが指定されている場合、それらは2回ダウンロードされます。(だからスティーブ・スーダーズは言う)
lucasrizoli 2011

3
IE6がURIを相対URIに変換しようとしている(つまり、先頭のスラッシュの1つを削除している)ことがわかりました。これはlink要素の中にあります。たとえば、を指定すると//fonts.googleapis.com/css?family=Rokkitt:400,700、IE6はをロードしようとしますhttp://mysite.com/fonts.googleapis.com/css/<...>。あまりよくない!
CBono 2011

2
私のログから、プロトコルのないリンクを使用しようとし、それらを正しく処理していないWebスパイダーロボット(ソースは不明)のように見えるインスタンスが見つかりました。
Kzqai、2011年

3
ログには、プロトコルのないURLとは関係のないものがたくさんあります。それらのクモの多くは、信じられないほど不十分に書かれています。
Dave Ward

11
これは、これらのURLであることを理解することが重要ですいないプロトコルに少ない、しかし、プロトコルに相対的。プロトコルをコンテキストから取得し、コンテキストがないと、ほとんどのブラウザでファイルURLのように動作します。つまり、意図したコンテンツをロードしないという意味で侵入します。これらはhttp経由で配信されたときに機能しますが、ページを保存してローカルファイルからまったく同じHTMLをロードした場合、コンテキストが異なるため機能しません。それらを使用する必要がある唯一のコンテキストは、httpとhttpsです。
Synchro 2013年

37

1かどうかの質問ができ、プロトコル相対するすべてのリンクを変更は、1つのかどうかの問題を考慮すると、無意味かもしれなければならないそうです。ポール・アイリッシュによると:

2014.12.17:すべての人にSSLが推奨され、パフォーマンスの懸念がないため、この手法はアンチパターンになりました。必要なアセットがSSLで利用できる場合は、常にhttps:// アセットを使用してください


私はまったく同じことを考えていました。メインのサイトがhttpを使用している場合でも(httpsは使用できませんが、それは別のトピックです)、httpsを介して利用できる場合、httpを介して外部アセットをダウンロードする意味は何ですか。
joonas.fi 2015

1
@ joonas.fiは、一部のブラウザーで生成される可能性のあるHTTP / HTTPS混合警告を回避することのみを考えることができます
Ohad Schneider

3
@Ohad_Schneider警告は、ドキュメントがセキュア(https)経由でロードされ、アセットが非セキュア(http)経由でロードされた場合にのみトリガーされます。私が提案していたことは、ドキュメントが非セキュアでロードされたとしても、常にセキュアでアセットをロードできるということです。警告はなく、セキュアを使用しない理由もないため、「プロトコル相対URL」全体が不要になります。
joonas.fi 2015

1
@Ohad_Schneiderああすみません、私はあなたが言っていたものを間違って解釈したと思います。ドキュメントがhttpを介しているときにhttpsを介してアセットをロードしても、警告は生成されません。ただし、ドキュメントがhttpsを介しているときにhttpを介してアセットをロードすると、少なくともChromeではデフォルトでブロックされます。httpsを介してサイトにサービスを提供し、外部アセットがhttpでのみ利用できる場合について言及していましたか?ええ、それは問題になる可能性がありますが、https経由でコンテンツを提供しない深刻なサードパーティのサービスはないと思います。:)
joonas.fi 2015

@ joonas.fi Wut?O_o誰かがHTTPSを使用しているサイト(そしてプロトコル)を持っている場合、相対URLはHTTP経由でサードパーティのアセットを取得するのに役立ちません—方法はありません。とにかく、サードパーティがまだHTTPSをサポートしていないという理由だけで、HTTPSページにそのクリーングリーンのSSLロゴを配置しないほうが、HTTPに再度それを戻すよりも良いでしょう。
poige 2015

30

プロトコルなしのURLを使用してスタイルシートをロードする場合、IE 7および8はそれらを2回ダウンロードします。http//www.stevesouders.com/blog/2010/02/10/5a-missing-schema-double-download/

したがって、優れたパフォーマンスが必要な場合は、CSSでこれを回避する必要があります。


5
確かに、しかし、これはIE 7&8の市場シェアが縮小するにつれて、スキームのないURLの使用を避ける理由の次第に少なくなります。
Simon Lieschke 2013

15

はい、ネットワークパス参照はRFC 1808ですでに指定されおり、すべてのブラウザで動作するはずです。


11
HTML5ボイラープレートコードでも推奨され、使用されています:html5boilerplate.com
Felipe Lima

1
聖霊降臨祭はい、「他に注意事項はありますか?」?;)
Caspar Kleijne、2011年

2
@Caspar Kleijne:文章の残りの部分で「はい」を説明しました。
ガンボ

1
キャスパー、ガンボは実際に、次の2つの質問に答えていました。「これは完全にクロスブラウザ互換ですか?他に注意点はありますか?」はい、最初の質問に対する答えです。
ダレングリフィス

4

これは完全にクロスブラウザ互換ですか?他に注意点はありますか?

これをミックスして投入するだけで、ローカルサーバーで開発している場合は、機能しない可能性があります。スキームを指定する必要があります。それ以外の場合、ブラウザはそれを想定してsrc="//cdn.example.com/js_file.js"いる場合がありますsrc="file://cdn.example.com/js_file.js"ます。これ、このリソースをローカルでホストしていないため、これは機能しなくなります。

Microsoft Internet Explorerはこれに特に敏感であるようです。次の質問を参照してください:ローカルホスト上のInternet ExplorerでjQueryをロードできません(WAMP)

おそらく、常に最小限の変更ですべての環境で機能するソリューションを見つけようとするでしょう。

HTML5Boilerplateで使用されるソリューションは、リソースが正しくロードされない場合にフォールバックを使用することですが、これはチェックを組み込んだ場合にのみ機能します。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- If jQuery is not defined, something went wrong and we'll load the local file -->
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>

この回答を投稿しました ここました。

更新:HTML5Boilerplate<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">、プロトコル相対URLの廃止を決定した後で使用するようになりましたこちらを参照してください


1

://domain.comを使用する場合、これらの問題は発生していませんが、最初にコロンを追加する必要があります。Yoastはしばらく前にこれについて良い記事を書いていた。しかし、それは彼のブログ投稿の山で失われています。


追加の:が役立つ場所を述べないことに対する反対票。私が誤って「:」を残したところはどこでもリンクが壊れました
rob

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