2014.05.14.水

SSL混在コンテンツの対処に!プロトコルレラティブURL

技術

a0002_001091_m
こんにちは、何回目かの登場です。だんだん暖かい通り越して暑くなってきましたね。

今回は、たまには技術的な事をお話ししたいと思い、簡単ですがSSL混在コンテンツの対処についてまとめてみました。

SSLとは?

よくあるお問い合わせページや、ログインページのURLを見ると「https」が先頭についていることがあります。
これはSSLが適用されている場合に表示されます。SSLとはネットワーク上のデータを暗号化して送受信するプロトコルの一つです。暗号化することでサイトで入力する情報を盗み見られることなく安全に送受信を行う事が出来ます。
もちろん弊社サイトのお問い合わせも、自社製品システム(WebFileGrpMail多守Plus)もこれを導入しております(`・ω・´)b

SSLのページでは、『http://』の形で外部からファイルを読み込むと、ブラウザによっては警告が表示されてしまいます。
暗号化で保護されているコンテンツのみ表示されているページのはずなのに、非保護コンテンツがあるぞ!と怒られてしまっている状態です。
なので、SSLのページでは外部ファイルなどの指定(こういうの→src="〜")を『https://』の形で指定する必要があります。

そのページ内で『https://』を指定できれば問題無いですが、ヘッダーやフッター等全ページに共通で使っている場合もあります。
この場合はプログラムで指定するようにすることが可能ですが、そんなのわからないよ!という場合は↓の方法を試してみるのはいかがでしょうか??

プロトコルレラティブURL

 

 

上記のソースはJavaScriptの指定を行っています。URLを読み込んでいるところが『http://』でもなければ『https://』でもありませんね。

書き方は『http://』とかの部分を『//』とするだけのお手軽スタイルとなっています。
この書き方はプロトコルレラティブURLといい、今見ているページに合わせてブラウザが『http』『https』のどちらかを指定するという、とってもかっこいいことをしてくれています。

もう少し具体的に言うと、使用しているプロトコルによって「http:」か「https:」が付くかが決定されるようになります。

これは自動的に動いてくれるので、SSLのページでも非SSLのページでも問題がなく表示されます。サイトの構成的にヘッダーとかフッターだとかを共通で使っているところでも警告が出ないようになりますので、開発が楽になりますね!

ちょっとしたことではありますが、SSLだけに限らず色々使えそうですよね。おすすめです。