常時SSL化したはずが「この接続は安全ではありません」になる場合の対処方法

WordPress

サイトをhttpからhttpsに常時SSL化したのですが、いざhttps化したサイトを表示すると「この接続は安全ではありません」となってしまいました。

サイト自体は問題なく表示されるのですが、https化するとアドレスバーに緑のキーのアイコンが表示されるはずが、黄色い注意マークが付いています。どうやらサイト内でhttpとhttpsが混在しているようで、その原因を取り除かないといけないようです。

調べてみると意外と簡単に解決できたので、その覚書です。

スポンサーリンク

常時SSL化したはずが「この接続は安全ではありません」になる場合の対処方法

HTTPSで常時SSL化された安全なサイトとは

ページ全体が HTTPS プロトコルで配信されている 、いわゆるSSL対応したウェブサイトは、アドレスバーに緑色の錠前アイコンが表示されます。当サイトではこのように表示されます。

このような緑色のキーマークのついているのサイトとの接続は、認証を受けて暗号化されているため、盗聴や中間者攻撃から守られているという事で、安心して利用する事が出来るというしるしです。

HTTPで表示されている(安全ではない)サイトとは

httpsではなく、HTTPで配信されているサイトは、アドレスの前にこのようなマークが出るか、カギのマーク自体も表示されません。

赤線が引かれた錠前アイコンが表示されている場合、ブラウザは安全でない要素をブロックしておらず、盗聴や攻撃に対して無防備であり、個人データはサイトから盗まれる可能性があります、という事を示しています。

HTTPとHTTPSが混在しているサイトとは

また、httpとhttpsが混在している場合、このようなマークになります。当サイトも最初はこのような黄色い注意マークになってしまいました。サイト自体は普通に表示されるものの、これではせっかくhttps化した意味がありません。

マークをクリックしてみると、「この接続は安全ではありません」、「このページの一部(画像など)は安全ではありません」と表示されています。

さらにクリックし「詳細情報」をクリック。

すると、使用しているブラウザ(Firefox)のサポートページ「混在コンテンツのブロック」に飛びました。

混在コンテンツのブロック

HTTPとHTTPSが混在している状態の原因

さくらのプラグインを使って、すべてのデータ(画像を含む)のhttpsへの変換は出来たはずですが、どうやらページ内に「http」で始まる画像などが残っているため、それが原因で緑色のキーが表示されないようです。

全てでは無いと思いますが、以下の場合、httpsとhttpsが混在しているコンテンツとみなされるようです。

  • 「http」で始まる画像を表示している
  • 「iframe」で読み込んでいる内容に「http」の画像を含んでいる

また、文中に外部リンクとして「http」があるのは問題ないようです。

残っている「http」を探し当てる方法

問題を解決するには、サイトに残っている「http」のついた何某かを見つけ出さなければなりません。これは大変そうだ、と思ったのですが意外と簡単に原因がわかりました。今のところ、3つのワードプレスのサイトですべて同じ問題が出て、同じ原因と対策で無事に常時SSL化に成功しました。

では、問題の「http」を探す方法を紹介します。

FireFox、Chrome、Internet Explorerの3つのブラウザとも同じ作業です。

FireFoxで探す場合

「http」と「https」が混在しているウェブページを表示し、「F12」(Windows)を押すと画面の下に開発者ツールが出ので「コンソール」をクリックする。

すると、ページ上にある、「http」で始まる問題のURLが見つかります。

Chromeで探す場合

「http」と「https」が混在しているウェブページを表示し、「F12」(Windows)を押すと画面の右に開発者ツールが出るので「コンソール」をクリックする。

すると、ページ上にある、「http」で始まる問題のURLが見つかります。

Internet Explorerで探す場合

「http」と「https」が混在しているウェブページを表示し、「F12」(Windows)を押すと画面の下に開発者ツールが出ので「コンソール」をクリックする。

すると、ページ上にある、「http」で始まる問題のURLが見つかります。

3つのサイトで試してみましたが、3つ全部エラーの数が違うのが気になりましたが、検証にはFireFox、Chromeが使いやすいと思います。また、上記はまだレンタルサーバーでhttps化しただけの状態で、まだワードプレス側でデータのhttp→https書き換えが済んでいません。データの書き換えをした後に出たエラーの画像は、ある特定の部分だったので次にそれを説明します。

データ書き換え後に残っていた「http」を「https」へ変更する対処方法

今回、3つのワードプレスのサイトをhttps化しました。

3つのサイト全て、さくらのプラグインを使ってすべてのデータ(画像を含む)のhttp→httpsへの書き換えを済ませたのにもかかわらず、httpのデータが残っていました。

ですがそれは、3つのサイト全て同じ部分だったので、それぞれ簡単に変更する事が出来ました。

それは「サイトのロゴ」と「ファビコン」用の二つの画像でした。

当サイトの「サイトのロゴ」はこちら、この部分です。

ファビコンはこちら、この部分です。

これらを修正していきます。

「サイトのロゴ」の修正方法

WordPress管理画面 > 外観 >カスタマイズ をクリックしカスタマイズ画面に入り、「ロゴ画像」をクリックします。

今登録しているロゴ画像が出るので、画像の変更をクリック。

メディアからロゴ画像を選び直し(同じ画像を選んでも大丈夫でした)、画像のURLがhttpsなのを確認して「画像を選択」。

サイトのロゴの修正はこれで完了です。

「ファビコン」の修正方法

WordPress管理画面 > 外観 >カスタマイズ をクリックしカスタマイズ画面に入り、「サイト基本情報」をクリックします。

サイトアイコンが表示されるので、画像の変更をクリックします。

メディアからサイトアイコンを選び直し(同じ画像を選んでも大丈夫でした)、画像のURLなどの情報がhttpsなのを確認して「画像を選択」。

以上で終わりです。

まとめ

さくらのプラグインでhttp→http化した時に、もし常時SSL化したのに「この接続は安全ではありません」が出たらまずここを疑ってみたらいいと思いました。

作業後は、無事にサイトが安全な緑色のキーに変わりました。