SSL化の後の悲劇!「安全でないスクリプトを読み込む」と、httpsなのに「保護されていません」というメッセージ

目安時間:約 5分

世の中の流れに沿いまして、

このブログもSSL化を行いました。

 

SSL化とは、http:// → https:// への変更です。

 

「s」の意味はセキュリティです。

第3者からの情報盗難を防ぐために、通信を暗号化します。

 

googleも「セキュリティの高いサイトを優遇する」と言ってますので、

このSSL化は、やっておくべきだと思います。

 

で、ssl化を進めていく中で、ちょっとトラブルが起きましたので、

その解決方法をこちらに備忘録で記述しますねー。

 

安全でないスクリプトを読み込む

事の発端は、

SSL化したブログのURLに以下のような盾にバツみたいなマークが現れていた事です。

 

 

「このページは承認されていないソースからのスクリプトを読み込もうとしています」

って書いてありまして、

 

「いやいや、自分のブログなんで、別に怪しい物とか入れて無いし」

とか思って、以下「安全でないスクリプトを読み込む」をクリック!

 

 

すると・・・

 

 

!!!???

 

せっかくssl化して「https://」になったのに、

そこに取り消し線が入って「保護されていません」という表示が!!

 

せっかくやったSSL化を、

まさかの全否定されてしまいました(汗)

 

この原因と解決方法を見つけるのに日曜丸一日が潰れてしまいました。

 

原因

 

なんでこんな事になってしまったかと言いますと、

ブログそのものは「https://」にしたのに、

 

そのブログの中に、http接続が含まれているからです。

 

例えば、ブログ内の一つのリンクが、

http接続になってしまっているようなケースですね。

 

で、今回の私のケースでは、

「とあるscript」がhttp接続になっていましたので、

なんだかよく分からん、以下の楯みたいなマークが出ていたみたいです。

 

 

ってことで、原因の特定方法と解決方法を紹介しますねー。

 

原因箇所の特定方法と解決方法

ブログを開いている状態で「F12キー」を押します。

すると、このページのソースコードが表示されます。

 

 

「Console」というタブをクリックします。

で、今回の場合はスクリプトに不具合があるようですので、

「Script」と入力して検索をかけてみます。

 

 

すると、△のビックリマークで、一つ何か引っかかりました。

jqueryという奴のようです。

 

ウェブブラウザ用のJavaScriptコードを容易に記述できるようにするためのスクリプトのようですが、

ワードプレスのテーマの中にこれが入っていて、

それが「http://」になっているのが原因のようです。

 

ってことで、これを「https://」にしてみます。

 

ワードプレスの管理画面で「外観」→「テーマの編集」で

該当のphp(今回は、header.php)を開きます。

 

 

該当の箇所を見つかましたので、それを手入力で「https://」にします。

 

 

更新をクリックし、再度ブログにアクセスすると、

問題箇所が解決されました。

 

 

良かった良かったー(笑)