ブログを常時SSL化したはずなのに「このページは承認されていないソースからのスクリプトを読み込もうとしています」、「このサイトへの接続は完全には保護されていません」と出てきた時の対処法【WordPress】【Cocoon】

ブログ
mohamed HassanによるPixabayからの画像

こんばんは、暇だったのでブログをいろいろいじっていたらエラーが出て焦ったおじさんこと、暇さんです。

今回の記事は「このページは承認されていないソースからのスクリプトを読み込もうとしています」や、「このサイトへの接続は完全には保護されていません」とブログで出てしまった時の原因と対処法についてのお話です。

スポンサーリンク

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

いつものようにWordpressを使って記事を書いていたら、

なんかブラウザの右上に盾のような赤いマークがありました。

上のようなマークです。

マウスを近づけてみると

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

との警告が……

 

な、なんで?

 

素直にそう思いました。

さらに、ポップアップのところには、

「安全でないスクリプトを読み込む」との文字が…

これ押して大丈夫なのだろうかと思い

怖いので調べると、

これを押すとhttps化が解けるとのこと……

怖っ!?

 

昔せっかく苦労してhttps化(SSL化)したのに、それが解けるとは恐ろしい。

そもそも、HTMLはWordpressにまかせっきりなのでスクリプトはいじってないはず……

何が原因なんだろうと思い今回の記事を書くことになりました。

 

まあ、結果的にはどうにかなったので、

これが出た人も普通に安心してください。

どうにかなります。

このサイトへの接続は完全には保護されていません

同様に、

常時SSL化したはずなのに

上記のような鍵マークではなく、

iマークがでている、画像のようなときも

今回の解決方法でどうにかなります。

原因

さて全く違う二つのエラーですが、

私の場合は原因は両方とも、

https://とhttp://がHTMLスクリプト内に混在していることでした。

 

具体的に私に起こったエラーのことを言うと

ファビコンや、画像のスクリプト部分がhttps://ではなかったことが原因でした。

他にもちょいちょいありましたが、メインはそこです。

原因の特定

とりあえず、何がエラーをはいているのか調べましょう。

ブログをブラウザで開いた状態で、F12を押します

すると、上記の画像のような画面が出ると思うので、

画像の上の赤い枠の「Console」を押してください。

そこまで行くと、画像のようにエラーが出てると思います。

そうしたら、そこにエラーの内容が載っているので、どういうエラーなのかを調べましょう。

どういうエラーか

私の場合は以下のようなエラーが出ました。(ほかにもありましたが一例です)

Mixed Content: The page at ‘https://po-melon.com/’ was loaded over HTTPS, but requested an insecure image(以下略)

 

どういう意味なのかというと、要はhttp://とhttps://が混ざってるよってことです。

Mixed Contentがそこに当たります。

 

それ以降の訳が

https://でページを読み込もうとしたんだけど、そこにある画像がhttp://になってるからHTTPSのページにできないよ。直してね。

と書いてあります。(だいたいこんな意味です)

画像の詳細は赤い枠のimageの後ろのURLみたいのがその画像のことをさしています。

つまり、その画像が原因です。

他のバリエーション

赤枠のimageの箇所が、

  • imageなら、ページにあるどれかの画像のURLがhttp://のまま
  • scriptなら、HTMLファイルの中にhttp://がある
  • faviconなら、ファビコンのURLがhttp://になってる

というのが原因です。

解決方法

原因がわかったところで、解決策ですが、

簡潔に言うとhttp://の記述をhttps://にすれば解決します

では、どうやって解決するのか

順を追って説明します。

あまり詳しくWEBに関して詳しくないので、とりあえず私が使っている「Coccoon」といWordpress内での解決方法について記載します。

imageの場合

記事に追加した画像が犯人

記事の中に犯人がいることが多いです。

まず、該当する記事を開きます。

ビジュアルをテキストにします。

すると、

画像のあるところのスクリプトがhttp://に!!

もし、これが原因なら、http://にsを足して、https://にするだけです。

これで、終わり

ヘッダーロゴが犯人

ホームとかトップページで、imageのエラーが出てるときはこいつが怪しい。

 

Cocoon設定 → ヘッダー設定 → ヘッダーロゴ

の順でヘッダーロゴの場所を開きます。

 

ヘッダーロゴのURL部分をチェックしましょう。

もし、http://なら、https://にしましょう。

 

scriptの場合

該当箇所を見つけるしかない。

どこなのかはF12のConsoleのscprit(本記事の画像ではimage)の後ろのURLに載ってるので、

外観 → テーマエディタで探しましょう

ctrl+Fで検索が使えるので地道にやる感じで頑張りましょう。

 

faviconの場合

ファビコン、サイト開くときにブラウザのタブのロゴみたいの

あれです。

外観 → カスタマイズ → サイト基本情報 → サイトアイコン

のところで画像を選択しなおしましょう。

ちゃんと「画像を選択」の右側に出るURLがhttps://になっているか確認しましょう。

何回か選択しなおせばうまくいきます。

 

その他の原因の解決策

私のように、画像のURLが間違ってるとか以外だと、

アクセス解析ソフトの

Google AnalyticsGoogle Search Console の登録しているサイトのURLが

http://だったりすることが原因であることもあるそうなので、

とりあえずチェックしときましょう。

 

また、Wordpressの

設定 → 一般

で見れる一般設定の

WordPressアドレスとサイトアドレスがhttp://であることも

SSL化がうまくいかない原因になる場合があるので、

ここもhttps://に変更しましょう。

使えるプラグイン

今回のように、画像が原因の場合は

Search Regex」

というプラグインで該当箇所を一気に検索すると楽です。

使い方は簡単に説明すると、

有効化したら,

  • ツールからSearch Regexを開く
  • search pattern に 「http://サイト」を入力
  • replace pattern に 「https://サイト」を入力
  • replaceで実行結果を表示
  • 確認したら
  • replace&searchで置換

という順番です。

まとめ

ということで、SSL化の話でした。

普通にビビりますよね。

この記事が誰かの役に立っていてくれると嬉しいです。

 

というわけで、暇さんでした。

タイトルとURLをコピーしました