FeeeeeLog (フィーログ)

Androidアプリ開発に夢中

*

SSL対応でhttpとhttpsが混在したコンテンツが表示できない原因を特定する

      2016/05/17

SSLにすれば、安全性が確保できるし嬉しいからやってみよう!と軽いノリでやってみるといろいろ苦労します。

ええ、私のことですよ。

混在コンテンツがhttpsのサイトに含まれるという問題に直面しました。
さっそくサイトを修正する方法を見ていきましょう。

スポンサーリンク

「http」と「https」が混在したコンテンツをなくす

SSL対応したウェブページは、すべて「https」でなければ安全性が確保できません。また、安全性が確保されていないような内容はブラウザによっては正しく表示されません。安全性が確保されていないというだけであればまだいいのですが(それってSSLにした意味ないよね)、表示したい内容が表示されないという事態が発生してしまうのです。

具体的に言うと、SSLにしたウェブページの中に次のような内容が含まれていてはいけないということです。

※すべてのケースを説明しているわけではないので他にもあると思います。外部リンクとして「http」があるのは問題ありません。

「http」と「https」が混在している

「http」と「https」が混在しているウェブページの場合、警告のような表示などがURLの左右あたり(ブラウザによる)に表示されます。

2015-09-25-SSL-HTTP-HTTPS-01
ブラウザは上からChrome、Firefox、Windows Explorerです。

「https」のみ

「https」のみで構成されているウェブページの場合、鍵マークがURLの左右あたり(ブラウザによる)に表示されます。

2015-09-25-SSL-HTTP-HTTPS-02
ブラウザは上からChrome、Firefox、Windows Explorerです。

まぎれこんでいる「http」を探し当てる

  • 「http」と「https」が混在しているウェブページを表示し、Windowsであれば「F12」を押す。
  • 「コンソール」または「Console」をクリックする。
  • 表示されている内容を確認する。

Chromeの場合

「F12」を押して、「Console」を選択した状態が次の画像です。

2015-09-25-SSL-HTTP-HTTPS-03

Consoleに表示されている「Mixed Content」を見てください。「http」で始まる好ましくないURLが書かれています。

Firefoxの場合

「F12」を押して、「コンソール」を選択した状態が次の画像です。

2015-09-25-SSL-HTTP-HTTPS-04

コンソールに表示されている「混在アクティブコンテンツ」を見てください。「http」で始まる好ましくないURLが書かれています。

Windows Explorerの場合

「F12」を押して、「コンソール」を選択した状態が次の画像です。

2015-09-25-SSL-HTTP-HTTPS-05

コンソールに表示されている「SEC7111」を見てください。「http」で始まる好ましくないURLが書かれています。

 

さいごに

駆け足でしたが、SSLのウェブサイトから「http」を探し当てるところまで説明しました。「http」をなくすための方法は使用しているタグやリンク先のものによって対処方法が異なります。基本的には、「http」を「https」に変えるということで対処可能です。

SSL対応は計画的に!

 - SEO