#b-navbar { height:0px; display:none; visibility:hidden; }

ページ

2013年7月1日月曜日

SSL混在コンテンツで外部ファイルURLを簡単に指定する方法


https なSSLページ上で、http のスクリプトやスタイルシートを外部から読み込むとブラウザによっては警告が出てしまいます。それを抑止するには、srcを https:// で指定しなくてはなりません。

サイトの構造によっては、サーバー側のプログラムかJavascriptで振り分けをする必要があります。




しかし、もっと簡単に
ブラウザが自動で振り分けをしてくれる方法があります。


スキーマである "http:" の部分を省略します。これは プロトロルレラティブ(Protocol-relative)または ネットワークパス参照(network-path reference) 、と言います。

例:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
       ↓↓
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>


httpページではhttp、httpsページではhttps 扱いに自動的になります。

SSL/非SSLどっちになっても問題の出ないURL表記が可能です。混在コンテンツに対して開発が便利になりますね。




その他の意見:

  • サーバが重くなってもいいなら、最初からすべて https 固定で書くのもアリ。


注意:
  • ローカルでファイルとしてHTMLを開いたとき、ローカルのファイルを探しに行って不具合になる。ローカルでは、サーバー(127.0.0.1など)を通して見ること。
  • 2005年のRFC3986で定義されたため、IE6ではサポートされていない
  • IEでCSSに対してこの表記が使われている場合、対象となるCSSファイルが2回ダウンロードされてしまう問題がある( <link> or @import for a stylesheet, IE7 and IE8 )http://www.paulirish.com/2010/the-protocol-relative-url/


.