WordpressサイトなどでSSL/TLS証明書が有効なのに安全ではありませんと警告が出る時の対処法

こんにちは、Teshi(@atsuhio)です。フィリピンに住みつつ、欧米の子供向けプログラミングスクールCodeGrit Jrを開発中です。オンライン英会話サービスも運営しています。

SSL/TLS証明書が有効なのに警告が出ている

昨日なのですが、運営しているサービスのブログでSSL/TLS証明書は有効になっているのにChromeで「安全ではありません」という警告が出ていたため色々と格闘しました。

僕は言語設定英語なのですが、こんな感じでCertificateのところはValid(有効)となっているにもかかわらず、ユーザーに警告が出てしまっていました。

色々やっても解決しない

ちょうどブログのアップデートなどを色々した後だったこともあり、何が原因なのかを調べるためにApacheの設定ファイルを設定し直したり、本サイト側のnginx設定を確認したり(このブログは本サイトのサブディレクトリに置くためにnginx上でリバースプロキシ設定しているため)、色々してみましたが何も解決できずどころかさらにエラーが発生して大変でした。

原因はhttpを利用して取得しているリソースとhttpsを利用して取得しているリソースが混ざっていること

それでGoogle Chromeのコンソールを開いてみたら解決策が見つかりました。

こんな感じでエラ〜メッセージが証明されていて、読んでみると画像の取得でhttpsではなくhttpが使われていると書かれています。

今回の場合はPopup Builderというプラグインが原因だった

httpとhttpsコンテンツが混ざっていて今回のように警告が出る場合

- configでmainサイトとwordpressサイトの設定が揃っていない
- 昔のコードが残っててhttpで外部のJSやCSSを読み込んでしまっている場合

などが主な原因となるかと思います。

今回の場合ですが、つい先日導入したPopup BuilderというWordpress用のプラグインが原因となっていました。

こちらの画像のように、ページ内で右下に広告をスライドインさせるような設定をPopup Builderで先日しました。この画像をデフォルトでPopup Builderはhttp接続で取ってくるようで管理画面で設定をしなければいけませんでした。

上の画像のようにPopup Builderに使う画像のURLが出ているのですがhttp://となっている部分をhttps://にアップデートすればOKです。

無事に安全なサイトに戻りました。

Chromeで警告が出たらhttpを利用したリソースがないか確認しよう

そんなわけで無駄に時間を使ってしまったので、もし同じような警告が出たという方はhttpを使用したリソースがないかまず見てみましょう。Chrome DevToolsのコンソール上に警告が出るので確認は簡単です。

エンジニアでない方のため説明すると、Chrome上で右クリックでメニューを開いて、inspectというメニューをひらけばOKです。Google公式のドキュメントでも解説がありますのでご確認ください。

この記事が気に入ってくださった方は僕のnoteやTwitterのフォローをお願いします！