1. HOME
  2. 開発・ブログ運営
  3. サーバー
  4. HTTPS 対応(SSL/TLS 化)における HTTP混在コンテンツ問題
2014年08月09日
サクッと SSH 接続するために ~/.ssh/config ...
2012年08月16日
MAMP で PHP5.3.x を使う方法
2012年04月15日
Ubuntu11.10 にApacheとPHPとMySQLをイ ...
2012年08月16日
MAMP でインストールした PHP の php.ini ファ ...
2012年07月11日
エックスサーバーの Cron で PHP を動かしてみた ...
2016年07月09日
MySQL, WordPress, phpMyAdmin コン ...

HTTPS 対応(SSL/TLS 化)における HTTP混在コンテンツ問題

HTTPS 対応すれば良いことばかりではなく、もちろんデメリットもあります。

HTTPS 対応するとアマゾンの広告や多くのアフィリエイトタグなど、HTTPS に対応していないリソースを利用していると、同じ WEB ページでHTTPS と HTTP が混在してしまい、完全にセキュアなページとはなりません。

HTTP が混在するページへアクセスした場合の挙動はブラウザによって違いますが、Chrome の場合には以下のようにアドレスバーの表示が変わります。

ページ内で HTTPS のみの場合

Https bar

ページ内で HTTPS と HTTP が混在している場合

Http bar

ちなみに以前は、黄色でいかにもな警告が表示されていましたが、2015年10月にリリースされた Chrome 46 から黄色の警告は出さないようにしたそうです。

IE だと HTTPS と HTTP が混在していると、警告が表示されていたそうです。(最近の IE だと警告は出ない?)


HTTP でリクエストしているリソースを見つける方法

どのリソースが原因で HTTP 混在になってしまっているかは Chrome Developer Tools で簡単に確認することができます。

Chrome のメニューバーから「View」>「Developer」>「Developer Tools」を選択して Chrome Developer Tools を開きます。

Developer tools 1

Console タブを開くとワーニングが 2つ出ていることがわかります。ワーニングの冒頭は2つとも「Mixed Content」となっており、そのうち1つのワーンヒングの内容は、

‘https://dev.ontheroad.jp/archives/category/camera/photo_technich’ was loaded over HTTPS, but requested an insecure image ‘http://ecx.images-amazon.com/images/G/09/kindle/associates/kindlestore-assoc-c-02-JP-300×250.jpg’. This content should also be served over HTTPS.

「’https://dev.ontheroad.jp/archives/category/camera/photo_technich’」は HTTPS でアクセスされているけど、「’http://ecx.images-amazon.com/images/G/09/kindle/associates/kindlestore-assoc-c-02-JP-300×250.jpg’」というセキュアではない画像へのリクエストがありますよ、と。

なので、http://ecx.images-amazon.com/images/G/09/kindle/associates/kindlestore-assoc-c-02-JP-300×250.jpg という画像が HTTP でリクエストしていることがわかりました。


対処方法

絶対的な対処方法はありませんが、http:// となっている部分を https:// に書き換えてあげると、HTTPS でアクセスできる場合があります。

それでダメな場合は、残念ながら HTTP 混在のままで妥協するか、そもそもそのリソース削除してしまうしか方法がありません。

例えば、アマゾンの広告は https:// に書き換えると表示されなくなるので、諦めるか削除するしかありません。また、多くのアフィリエイトリンクが HTTPS に対応していないようで、それが理由で HTTPS 対応を見送るアフィリエイターも多いのだとか。


Developer Tools で見つからないエラー

フェイスブックやはてなブックマークのカウント数をそれぞれの API を利用して取得している人も多いかと思います。私も記事ページの上下に、API を用いてカウント数を表示していますが、ちゃんとカウント数が取得できずに全てゼロで表示されるようになってしまいました。(今は修正済み)

Social buttons

例えばフェイスブックのカウント数は


のように、カウントするページの URL を get_permalink() で取得して、API に渡して取得しています。

WordPress を HTTPS 化すると、get_permalink() で取得できる URL も https:// になるので、 API に渡る URL も https:// の URL となるため、うまくカウント数が取得できなかったようで、get_permalink() で取得した URL の https:// の部分を http:// に置換してみたところ正しくカウント数を取得できるようになりました。


ちなみにこれと同じ方法で、はてなブックマーク、Google+、Feedly のカウント数も正しく表示されるようになりました。


まとめ

このブログもトップページにアマゾンの広告を掲載しているので、HTTP 混在になってしまっていますが、とりあえずこのままでお茶を濁しておきます。また、まだ気づいていない不具合があるかも知れません。。

もし何か不具合を見つけたら教えてやってください。
というわけで、HTTPS のご利用は計画的に。

でわでわ。







この記事にコメントする





Copyright © 2012 - 2014 MacBook Air とWordPressでこうなった All rights reserved
Powered by WordPress.