Plesk(プレスク)

SSL化したのに「保護されていない通信」と表示される?原因解決のための6つのポイント+α

サイト運営を行なっていく上で、ページを常時SSL化にしておくことはもはや必須と言えます。
その理由や常時SSL化の方法については、下記の記事で詳しく解説していますのでご覧ください。

無料でWebサイトの常時SSL化(HTTPS化)をしよう!最新版pleskなら、「Let's Encrypt」を用いることで無料で簡単にサイトのSSL化が可能です。SSL化の設定方法について解説します。...
初心者ジャス㌧

あれ?常時SSL化したはずなのに「保護されていない通信」って出てるぷぅ〜

初心者ジャス㌧

ブフォ!僕も同じだブーーー!
せっかくhttpsにできたの思ったのに・・・

ここでは、常時SSL化したにも関わらず「保護されていない通信」と表示されてしまう問題について、その原因を調査する方法と解決方法を解説していきます。

ジャス㌧

ちゃんと解決できるとん!安心するとん!

通常、常時SSL化が行なわれたWebページでは、URLの左部分に南京錠のマークがつくので、これを目印に「通信の暗号化」が行なわれていることが一目で判断できます。

SSL化された状態

しかしWebページに何らかの問題があると、(https://〜)表示になっていても、「保護されていない通信」と表示されてしまう場合があります。

これは初めてSSL化に挑戦した人の多くが行き詰まる問題ですが、この状態のままではSSL化を行なった意味がなくなってしまうので、しっかり解決していきましょう。

常時SSL化のポイントは?

まず常時SSL化について、「ページのURLをHTTPSにするだけ」と考えているなら大きな間違いです。

Webページには文字以外にも、画像、動画、CSS、スクリプトなど多くの要素が組み込まれており、それぞれがURLをもっています。

たとえWebページのURLがSSL化されていても、ページ内の要素のURLが(http://〜)のままだと、そのページは完全にはSSL化されていません。

httpとhttpsの違いは?

「http」→ 通信が暗号化されていない
「https」→ 通信が暗号化されている(SSL化)

例えば、ページ内に(http://〜)のURLを参照している画像が含まれているとします。

この場合、「通信が暗号化されていない」要素が混在しているので、ページを表示する際の通信は完全には保護されておらず、不完全なSSL化になってしまいます。

そのため、この問題を解決するポイントページ内から(http://〜)になっているURLを探して修正するということになります。

常時SSL化への道

ページ内から(http://〜)のURLを探すべし!

原因となっている問題はどれ?

ひとえに(http://〜)と言ってもURLはページのいろんな部分に組み込まれているので、確認すべき部分を順に説明していきます。

紛れている「http」を探せ!
  1. 記事内の画像や動画のURLを確認
  2. プラグイン設定
  3. 連携型のプラグイン
  4. ウィジェットの設定
  5. CSS、JavaScriptの確認
  6. アフィリエイトリンクの確認
ジャス㌧

この6つを、チェックするとん!

ポイント1 記事内の画像や動画のURLを確認

記事内に外部URLを指定して画像や動画を埋め込んでいる場合、それらが(http://〜)になっていないか確認してみましょう。

なお、修正する場合は、外部URLが(https://〜)に書き換えてもアクセスできることを確認した上で編集しましょう。

ポイント2 プラグイン設定の確認

記事内の画像や動画を全て(https://〜)に変更したとしても、プラグイン設定でURLを直接指定している場合はなかなか気づけません。

画像などを指定しているプラグインがあれば、指定URLが(http://〜)になっていないか確認してみましょう。

よくある例としては、ヘッダー画像やロゴ画像、アイコン画像などの指定URLが(http://〜)になっていることが多いです。

ポイント3 連携型のプラグインを確認

メジャーなプラグインとして「JetPack」がありますが、このプラグインはドメインと連携して機能しています。

そのためページをSSL化する前から設定していた場合、連携作業の再設定を行なってあげる必要があるのです。

もし元々のサイトを(http://〜)で作成していたら、JetPackを一旦停止して再度有効化してみましょう

再び設定画面が出てくることになりますが、もしこれが原因なら再設定を行うことで解決できるはずです。

ポイント4 ウィジェットの設定

Webページの右側や記事の下に、「人気記事」や「メルマガ」への誘導としてウィジェットを表示している人も多いと思います。

特に外部リンクへと誘導しているウィジェットの場合、指定URLが(http://〜)ですと「保護されていない通信」と見なされてしまうので設定しているURLも見直してみましょう。

ポイント5 CSS、JavaScriptの確認

これもよく見落としがちなのですが、CSSでページデザインをカスタマイズしている場合、そこに含まれるURLもSSL化されているかどうかの対象になります。

背景画像や書式、デザインなどをCSSで設定している場合にはCSSの中身も確認してみましょう。

またJavaScriptの読込URLが(http://〜)の場合も同様ですので、設定している場合は確認してみましょう。

ポイント6 アフィリエイトリンクの確認

アフィリエイトリンクが(http://〜)になっていた、というのもよくある原因の1つです。

特に画像に設定したアフィリエイトリンクも見落としがちなので、全て(https://〜)に変更できているか確認してみましょう。

初心者ジャス㌧

アフィリエイトリンク!これは見落としてたぷぅ〜!!

問題点を素早く見つけるためには?

初心者ジャス㌧

確認したのに、原因がわからないブゥ〜〜〜〜〜><

ジャス㌧

そんな時は、「GoogleChromeのデベロッパーツール」で探す方法もあるとん!

上記を確認しても問題が解決しない場合や、一刻も早く問題を解決したい場合は、GoogleChromeのデベロッパーツールという機能を使うことで、エラー箇所をいち早く探し出すことができます。

「デベロッパーツール」という名前だけを聞くと小難しそうに聞こえますが、操作自体は簡単なので是非この機会に使ってみましょう!

デベロッパーツールで問題を特定

まず問題のページ(ページURLはhttps://〜なのに「保護されていない通信」と表示されてしまっているページ)をGoogleChromeで開きます。

そのページ上で「右クリック」をして、「検証」をクリックします。

すると画面右側に下記のような画面が表示されるので、「Console」を選択しましょう。

すると下記のような画面になります。

『Mixed Content』という表示があるのにお気づきでしょうか?

これこそがページ内に残存しているエラーの正体になります。

(http://〜)と(https://〜)が”混在”してしまっているので、「Mixed Content」という名前になっています。

ちなみに上記のエラー内容ですが、概要(青色の背景部分)は次のように記されています。

原文
Mixed Content:
The page at '' was loaded over HTTPS,
but requesterd an insecure font ''.
This request has been blocked;
the content must be served over HTTPS.

日本語訳
混合コンテンツ:
'<URL>'のページはHTTPS経由でロードされましたが、
安全でないフォント'<URL>'を要求しました。
このリクエストはブロックされました。
コンテンツはHTTPS経由で提供する必要があります。

さらに詳細はその下(赤色の背景部分)に記されています。

今回のエラー原因はConsoleの情報を元に調べていくと、CSS内で指定していたフォントの参照URLに問題があったことが発覚したので、あとはその部分を修正するのみです。

このようにConsoleを使うと、問題が起きている部分が具体的に特定できるので、ページの動作がおかしいな?と思ったときにも是非活用してみてくださいね。

常時SSL化になっているかを確認

修正が完了したら、シークレットブラウザでWebサイトにアクセスしてみましょう。

シークレットブラウザを使う理由

キャッシュデータが残っているので、同じブラウザだと修正が反映される前の状態で表示される場合があります。
これだと正しく確認ができないので、キャッシュの影響を受けないシークレットブラウザを用いると、手間なく変更の確認が取れます。

ページにアクセス後、URLの左側に南京錠のマークがついていれば常時SSL化が完了です!

SSL化された状態

念の為、複数のブラウザ(Google Chrome、Safari、IE、Firefox、スマホなど)でページに問題が生じていないかも確認してみましょう。

初心者ジャス㌧

常時SSL化したサイトになって、どんどんアクセスを稼ぐとん!