SSLページでの保護されていない項目対応で"//"で始まる相対パス?を使ってみた

このエントリーをはてなブックマークに追加 Check
既存のSSLページでエラー(保護されていない項目が含まれています)が出てしまっているケース。

コレたまに見ますね。
自分の取り扱ってるサービス上でも発生しています。(未だ直ってないw)

ユーザー心理としては「何か訳の分からない警告が出たページだ怖い」となるんじゃないかなと。
いらぬ心配は掛けたくないものです。


その対応の際に"//***.net/***/logo.png"という書き方が便利だったので記事書こうかなと。

「そんなの絶対パスで全部書いときゃいいじゃん」は、確かにそうですね。

でも、必要以上にSSL接続で重くする必要も無いのかなーと。
SSL接続の技術の進歩は詳しくないのですが、、、、

兎も角、主要ブラウザ(IE,firefox,Chrome,safari)でカバーされている書き方のようなのに、
あまり知られてない様なので残しておきます。

参考記事:SSLページでブラウザにセキュリティ警告メッセージを出させないコツ

そもそも絶対パスで指定すると?


絶対パスは「http://*******.net/******/logo.png」等のフルパスの指定。
ただ、先の事情から

「絶対パスで指定するとSSLページに非SSL項目が含まれてしまう」

若しくは、

「非SSLページ(http://)なのに、https://で呼び出している項目が沢山ある」

という状況になります。
→全てhttps://で記述。


もしこれが相対パスで書かれているならば、
上記の「http://*****.net」部分はSSL接続の際に「https://*****.net/」となりますが、
今回のケース同一ドメイン以外からの呼び出しが存在するケースなので、相対パスでは片付きませんでした。。

解消法は?


今回のケースである
imageサーバーとコンテンツが別になっているケース。
これは割りと頻繁にありそうですね。

HTMLファイルは"hogehoge.net"にあるけど、
画像のファイルは"image.hogehoge.net"に置いてますよと。

この際には、
・画像を"hogehoge.net"で使いたいが、相対パスで書くことが出来ない。。
・「hogehoge.net」は「http://」、「https://」両方に対応している場合がある。。

フルパスで書くと、先の項目のような状況になります。

そんな時に役立つのが、"//image.hogehoge.net"という指定の仕方。


この書き方をしておくと、現在のプロトコル「http://」or「https://」に合わせて、
接続を行ってくれます。

要は、、、

hogehoge.net/index.htmlに、
<img src="//image.hogehoge.net/logo.png" />と書いておくと、
画像の呼び出しは以下の動きになります。

http://hogehoge.net/index.htmlでのアクセスの際は

http://image.hogehoge.net/logo.png」で接続。



https://hogehoge.net/index.htmlでのアクセスの際は

https://image.hogehoge.net/logo.png」で接続。




というわけです。


こちら、imageタグを例に出しましたが、
CSSファイルの指定や、jsファイルの読み込みなどにも使える優れもの。

ただ、リンク先の指定時にコレを使うと、相手先のサイトによっては表示出来ないことがあるので要注意。

この記事のカテゴリ:やってみた

関連するタグ:やってみた ssl Web制作



posted by alfsuzuki at 02:09 | Comment(2) | やってみた | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
これは良いことを知った。
絶対パスは、記述分量を気にしなければとても使い勝手がよくって。
blogとかCMSを使っていると、分かりにくいけど。
ディレクトリの階層移動に対して高い柔軟性が顕著に現れる。
個人ユーズなら、画像や、リンク警告が出ても、笑って許せるけども、企業ユーズでは、信用の問題まで発生して、全ページチェックしなければいけない状況も発生したりするケースも...
これって、formとかでも使えるのかな、使えるとプログラム部分がかなりすっきりする気がする。
Posted by moesla at 2011年02月15日 12:02
>> moeslaさん

formのアクション部分への適用も可能なようです。

<form method="POST" action="//hogehoge.net/cgi-bin/hogehoge.cgi">

と、書いておけば、ページの接続に応じて、ここも切り替わるようです。
Posted by alfsuzuki at 2011年02月16日 10:32
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。