読者です 読者をやめる 読者になる 読者になる

ショウジンブログ

Learn as if you will live forever, Live as if you will die tomorrow.

httpとhttpsでのcssへのリンク指定について

Sponsored Links

f:id:showjinx:20160415152815p:plain

httpプロトコルから暗号化通信のhttpsプロトコルに対応させる際、外部cssへのパスの指定をどうしようか、ちょっと迷ってしまったのでメモ。

今回対応する必要のあるサイトでは既存のページでは外部cssの読み込み部分が共通ヘッダーとしてこれも外部ファイル化されていて、全ページで読み込まれています。

cssファイルのディレクトリへのパスは定数化されていて、それにhttpから始まる絶対パスが設定されています。

httpsで暗号化通信に対応させる(問い合わせフォーム系)ところでは相対パスにしちゃえばいいんでしょうけど、共通化されているので、そうするとディレクトリごとに書き換えるのに無駄というか余計なコードを書かないといけないかなぁ。

簡単なのはその共通化されたヘッダーファイルを分けてしまって、https向けのやつにはそれでパスが通るようにcssのリンクを変更することですが、そのためだけに共通化ファイルを増やすのもどうかなと。管理、運用面でスマートではないと思われます。

プロトコルは省略できる

んープロトコルが問題なんだ、プロトコルが、、と考えていたら、あぁ、プロトコルって省略できるんだよな、そういえばと思いだしました。別視点でですが、サイトのパフォーマンス向上に最近よく見かけるやつですね。最近自分がよくベースに使うHTML5 Boilerplateなんかもページ下部にあるGoogle Ajax APIへのリンクが以下のようになってます。

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

フォールバックのために(何か問題があってapiのものが読み込めなかった場合)次の行にはそれ用の指定もありますが、ここちゃんと意識してないとたまにハマります。どっちのものを読み込んでるのかってところで。

本題に戻ると、プロトコルが省略されている時はその時にそのページの表示に使われているプロトコルが自動的に適用されるので、リンク元でhttpsで始まるa要素での指定をしておけば、例えばその先のお問い合わせフォームにいってもcssへのリンクパスにもこれが適用されて「//」が「https://」となってパスが通ると。

但し、省略する場合はちゃんとそのプロトコルでそのリソースにアクセス可能であることが必要です。(http:ならhttp:で、https:ならhttps:で)

ということで、最終的には

<link rel="stylesheet" href="//www.example.com/css/main.css">

で解決しました。これでhttpでもhttpsでも、cssリンク切れになってデザインが崩れることがなくなりました。思い出したきっかけはjsファイルでしたが、このプロトコル省略はcssでもimg要素でも、何でも可能だそうです。

あと、その思い出したきっかけの大元はよく参考にさせてもらっているSEOの鈴木さんの以下の記事です。ありがとうございました。

www.suzukikenichi.com