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

like life lives

技術以外のことに興味が寄りすぎな技術ブログ

SSL対応サイトを作るとCDNが利用できない!?

jQueryやjQueryMobileをサイトに適用する場合、CDNという仕組みを使うとサーバの付加や通信料を減らすことができ、とても便利です。

しかしSSL通信を使うサイトを構築する場合は気を付ける必要があります。

CDNからロードしたJavascriptが動作しない場合があるからです。

pukkyuでもSSL環境下でjQueryを使用しているので、ためしにCDNから読み込んで実行してみます。
なお、以下の環境で検証しています。

OS
ブラウザ
  • Chrome バージョン 25.0.1364.152 m
  • InternetExplorer9 バージョン: 9.0.8112.16421
  • FireFox 19.0.2


f:id:sugar_affordance:20130308215525p:plain

上はCDNからjQueryとjQueryUIを読み込んだ状態のHTMLです。

赤枠の部分でガッツリCDNのファイルを読み込んでいます。

しかしChromeではjQueryのコードがいつまでたっても動きません。

f:id:sugar_affordance:20130308215711p:plain

上はChromeでpukkyuにログインし、Javascriptコンソールを開いたところです。(デバッグ用アドレスの部分は黒く塗りつぶしてあります)

[blocked] The page at …

と書かれているのがわかります。

次はInternet Explorer9で見てみますが、やはり動きません。

f:id:sugar_affordance:20130308220033p:plain

上はIEの開発者ツールを開いたところです。Chromeと同様にエラーメッセージが出ています。

FireFoxでは問題なく動作しました。

どうやらブラウザごとに許可する動作が違うようです。

対策

対策としては

  1. CDNを使わない
  2. httpsに対応しているCDNを使う
  3. レンタルCDNサービスを使う(CloudFlare(SSLは有料))

などがあるようです。

jQueryhttpsに対応しているCDNが見つからなかったので、pukkyuではjQueryのコードを自前のサーバに置いて読み込んでいます。

CDN便利だけど…

CDNはただでさえ人さまのリソースを使わせてもらっているわけですから

httpsで提供しろ!」

などと厚かましいことは言えません。

どうしてもという場合はすなおにレンタルサービスを使いましょう。