web-dev-qa-db-ja.com

<script src = "http：// ...">でhttp：//を//に置き換えることは有効ですか？

次の要素があります。

<script type="text/javascript" src="https://cdn.example.com/js_file.js"></script>

この場合、サイトはHTTPSですが、サイトは単にHTTPでもかまいません。 （JSファイルは別のドメインにあります。）便宜上、以下を実行することが有効かどうか疑問に思っています。

<script type="text/javascript" src="//cdn.example.com/js_file.js"></script>

http:またはhttps:を削除することが有効かどうか疑問に思っていますか？

私がテストしたどこでも動作するようですが、動作しない場合はありますか？

htmlhttphttpsuriprotocol-relative
451
Darryl Hein

RFC 3986： "Uniform Resource Identifier（URI）：Generic Syntax"、Section 4.2 により、スキームのない相対URL（http：またはhttps :)が有効です。クライアントがそれを窒息させた場合、RFCで指定されたURI構文に準拠していないため、クライアントのせいです。

あなたの例は有効であり、動作するはずです。私は、この相対URL方式をトラフィック量の多いサイトで自分で使用しており、苦情はゼロです。また、Firefox、Safari、IE6、IE7、およびOperaでサイトをテストします。これらのブラウザはすべて、そのURL形式を理解しています。

383
Jeff

主流のブラウザーで動作することが保証されています（0.05％未満の市場シェアを持つブラウザーは考慮していません）。ちなみに、Internet Explorer 3.0で動作します。

RFC 3986 は、次の部分で構成されるURIを定義します。

     foo://example.com:8042/over/there?name=ferret#nose
     \_/   \______________/\_________/ \_________/ \__/
      |           |            |            |        |
   scheme     authority       path        query   fragment

相対URI（ セクション5.2 ）を定義する場合、常に左から始まるこれらのセクションのいずれかを省略できます。擬似コードでは、次のようになります。

 result = ""

  if defined(scheme) then
     append scheme to result;
     append ":" to result;
  endif;

  if defined(authority) then
     append "//" to result;
     append authority to result;
  endif;

  append path to result;

  if defined(query) then
     append "?" to result;
     append query to result;
  endif;

  if defined(fragment) then
     append "#" to result;
     append fragment to result;
  endif;

  return result;

説明しているURIは、スキームのない相対URIです。

150
Andrew Moore

動作しない場合はありますか？

親ページがfile://からロードされた場合、おそらく機能しません（file://cdn.example.com/js_file.jsを取得しようとしますが、もちろんローカルで提供することもできます）。

77
Thilo

多くの人はこれをプロトコル相対URLと呼びます。

IE 7＆8のCSSファイルの二重ダウンロードが発生します 。

40
SLaks

ここで HTMLの非表示機能 の答えを複製します。

プロトコルに依存しない絶対パスの使用：

<img src="//domain.com/img/logo.png"/>

ブラウザがHTTPSを介してSSLでページを表示している場合、httpsプロトコルでそのアセットを要求します。それ以外の場合、HTTPで要求します。

これにより、IEでの「このページにはセキュアアイテムと非セキュアアイテムの両方が含まれています」というエラーメッセージが表示されなくなり、すべてのアセットリクエストが同じプロトコル内に保持されます。

警告：スタイルシートの<link>または@importで使用される場合、IE7およびIE8 ファイルを2回ダウンロードする 。ただし、他のすべての使用は問題ありません。

23
kennytm

プロトコルを省略することは完全に有効です。 URL仕様は何年もの間これについて非常に明確であり、私はそれを理解していないブラウザをまだ見つけていません。なぜこの手法がよく知られていないのかわかりません。 HTTP/HTTPSの境界を越えるという厄介な問題に対する完璧なソリューションです。詳細： Http-https遷移と相対URL

16
Ned Batchelder

動作しない場合はありますか？

ローカルサーバーで開発している場合、これを混在させるだけで機能しない可能性があります。スキームを指定する必要があります。指定しないと、ブラウザーはsrc="//cdn.example.com/js_file.js"がsrc="file://cdn.example.com/js_file.js"であると想定する場合があります。

Microsoft Internet Explorerはこれに特に敏感なようです。この質問を参照してください。 localhost（WAMP）上のInternet ExplorerでjQueryをロードできません

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

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 は、プロトコル相対URLの廃止を決定した後、<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.jsを使用するようになりました。[こちら] [3]を参照してください。

6
bg17aw

Gnudのリファレンスに従い、RFC 3986セクション5.2は次のように述べています。

参照がスキーム名で始まることを示すスキームコンポーネントが定義されている場合、参照は絶対URIとして解釈され、完了です。 それ以外の場合、参照URIのスキームはベースURIのスキームコンポーネントから継承されます。

//は正しいです:-)

3
Pablo Torrecilla

//somedomain.comをJSファイルへの参照として使用すると、ログに404エラーが表示されます。

404の原因となる参照は次のようになります：ref：

<script src="//somedomain.com/somescript.js" />

404リクエスト：

http://mydomain.com//somedomain.com/somescript.js

これらがWebサーバーのログに定期的に表示されるため、次のように言っても安全です。すべてのブラウザーとボットDO NOT RFC 3986セクション4.2を尊重します。最も安全な方法は、可能な限りプロトコルを含めることです。

2
Lemiarty

はい、これは RFC 3986 、セクション5.2で文書化されています：

（編集：おっと、私のRFC参照は古くなっていました）。

2
gnud

他の答えが述べているように、それは確かに正しいです。ただし、一部のWebクローラーは、ローカルURLのようにサーバーで要求することで、これらの404をオフにします。 （ダブルスラッシュを無視し、単一のスラッシュとして扱います）。

これらをキャッチしてリダイレクトするために、Webサーバーにルールを設定することができます。

たとえば、Nginxでは、次のようなものを追加します。

location ~* /(?<redirect_domain>((([a-z]|[0-9]|\-)+)\.)+([a-z])+)/(?<redirect_path>.*) {
  return 301 $scheme:/$redirect_domain/$redirect_path;
}

ただし、URIでピリオドを使用する場合は、具体性を高める必要があります。そうしないと、それらのページが存在しないドメインにリダイレクトされることになります。

また、これは各クエリに対して実行されるかなり大規模な正規表現です-私の意見では、準拠ブラウザの大部分での（わずかな）パフォーマンスヒットよりも、非準拠ブラウザを404で罰する価値があります。

2
jlovison

html5-boilerplate に表示されるパターンは次のとおりです。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>

http、https、fileなどのさまざまなスキームでスムーズに実行されます。

1
neurite

例は外部ドメインへのリンクであるため、HTTPSを使用している場合は、外部ドメインもSSL用にセットアップされていることを確認する必要があります。そうしないと、ユーザーにSSLエラーや404エラーが表示される場合があります（たとえば、Pleskの古いバージョンではHTTPとHTTPSが別々のフォルダーに保存されます）。 CDNの場合は問題になりませんが、他のWebサイトでは問題になる可能性があります。

補足として、古いWebサイトを更新しながらテストし、META REFRESHのurl =部分でも動作します。

0
user2246924

1.まとめ

2019年の回答：プロトコル相対URLを引き続き使用できますが、 この手法アンチパターン .

また：

  1. 開発に問題があるかもしれません。
  2. 一部のサードパーティツールはそれらをサポートしていない場合があります。

プロトコル相対URLからhttps://への移行は素晴らしいことです。

2.関連性

この回答は2019年1月に関連しています。将来、この回答のデータは廃止される可能性があります。

3.アンチパターン

3.1。議論

Paul Irish — Google Chromeのフロントエンドエンジニアおよび開発者支持者 — 2014年12月に書く ：

これでSSLは 全員に奨励された と はありませんパフォーマンスの問題 、この手法はアンチパターンになりました。必要なアセットがSSLで利用可能な場合は、常にhttps://アセットを使用してください。

スニペットがHTTP経由でリクエストできるようにすると、 最近のGitHubのサイド攻撃 のような攻撃の扉が開きます。サイトがHTTP上にある場合でもHTTPSアセットをリクエストすることは常に安全ですが、逆の はtrue ではありません。

3.2。別のリンク

3.3。例

4.開発プロセス

たとえば、 clean-console を使用しようとします。

  • サンプルファイルKiraCleanConsole__cdn_links_demo.html：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>clean-console without protocol demonstration</title>
    <!-- Really dead link -->
    <script src="https://unpkg.com/bowser@latest/bowser.min.js"></script>
    <!-- Package exists; link without “https:” -->
    <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
    <!-- Package exists: link with “https:” -->
    <script src="https://cdn.jsdelivr.net/npm/gemini-scrollbar/index.js"></script>
</head>
<body>
    Kira Goddess!
</body>
</html>
  • 出力：
D:\SashaDebugging>clean-console -i KiraCleanConsole__cdn_links_demo.html
checking KiraCleanConsole__cdn_links_demo.html
phantomjs: opening page KiraCleanConsole__cdn_links_demo.html

phantomjs: Unable to load resource (#3URL:file://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js)


phantomjs:   phantomjs://code/runner.js:30 in onResourceError
Error code: 203. Description: Error opening //cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js: The network path was not found.

  phantomjs://code/runner.js:31 in onResourceError

phantomjs: Unable to load resource (#5URL:https://unpkg.com/[email protected]/bowser.min.js)


phantomjs:   phantomjs://code/runner.js:30 in onResourceError
Error code: 203. Description: Error downloading https://unpkg.com/[email protected]/bowser.min.js - server replied: Not Found

  phantomjs://code/runner.js:31 in onResourceError

phantomjs: Checking errors after sleeping for 1000ms
2 error(s) on KiraCleanConsole__cdn_links_demo.html

phantomjs process exited with code 2

リンク//cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.jsは有効ですが、エラーが発生します。

file://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.jsに注意して、 Thilo と bg17awfile://に関する回答。

私はこの動作について知らなかったし、なぜ this for pageres のような問題があるのか​​理解できませんでした。

5.サードパーティツール

私は Clickable URLs Sublime Textパッケージを使用します。それを使用すると、ブラウザのテキストエディタからリンクを簡単に開くことができます。

CSS links examples

例の両方のリンクは有効です。しかし、ブラウザで正常に開くことができる最初のリンクはクリック可能なURLを使用し、2番目のリンクはいいえです。これはあまり便利ではありません。

6.結論

はい：

  1. Developing processアイテムのように問題がある場合は、開発ワークフローを設定できます。
  2. Third-party toolsアイテムのように問題がある場合は、ツールを提供できます。

しかし、この追加の問題は必要ありません。 Anti-patternアイテムのリンクで情報を読む：プロトコル相対URLは廃止されました。

0
Саша Черных