コミュニケーションBLOG

文字によるコミュニケーションには、ブログをはじめ作文や感想文など様々な場面で「書く」技術が必要になってきます。難しく考えずに気楽に書いてみませんか?

SSL化で混在コンテンツ発生「このページは承認されていないソースからのスクリプトを読み込もうとしています」

f:id:flowcare:20180809102717p:plain


はてなブログをSSL化するとアクセスが増えて喜んでいたのも束の間。

いつのまにか「保護された通信」という緑色の表示が消えていました。

 

原因は混在コンテンツ

 

これを調べてひとつひとつ解消して行ったら、何とか「保護された通信」に戻せたけれど、盾(たて)のマークにが付いている。

 

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

 

最後に残ったのがAmazonアソシエイトプログラムのリンクでした。

Amazonに問い合わせると、サイトの運営者に確認してくださいと関知せずの回答。

確かに、amazonのサイトは「https」になっていて、「http」でも自動的に遷移されています。

 

 はてなブログさん、早く何とかしてくださいな。

 

 

混在コンテンツとは

 

はてなブログのように、かつて「http」だったサイトを「https」に変えると、自動的に「https」に変る部分と「http」のまま残ってしまうものが存在します。

 

「https」(SSL化)の目的は、通信を暗号化して情報を安全に保護するというもの。

なので「http」のままのサイトは保護されていない「危険」なサイトとして排除されてしまいます。

 

そのため、「http」のサイトへつながるリンクが1つでもあると、そのサイト全体が危険と判断されが表示されてしまうのです。

 

単純に言うと「混在コンテンツ」は、『「https」と「http」が混ざっているコンテンツ(記事)』という意味ですね。

 

Googleさんは「http」を一律に監視していて、そのサイトが本当に危険かどうか中身までは判断できません。

Amazonのように自動的に「https」に遷移するかどうかまでは確認してくれないのです。

 

混在コンテンツの確認方法

ブログを表示して、「F12」キーと「F」キーを押します。

すると画面の右半分に、consoleが表示されます。

ここに色々書いてあるのですが、英語だしさっぱり意味がわかりません。

でも、落ち着いてよく見てみましょう。

  • 黄色い三角にビックリマーク
  • 赤丸に✖マーク

 

2種類の警告が出ていました。

 

黄色は「javascript」についてでした⇒このせいで「保護された通信」の鍵マークが消えていたのです。これは、大問題!なので、急いで修正。

 

いくつもあった赤✖は、「http」へのリンクでした。

 

とりあえず怪しいヤツを順番に消していきました。

 

そして、最後に残ったのが「Amazonアソシエイト」へのリンクでした。

 

「デザイン」の「カスタマイズ」を順番にチェックする

 

ダッシュボードの「デザイン」をクリックします。

スパナマークの「カスタマイズ」をクリックします。

 

はてなブログのカスタマイズ画面キャプチャ



  1. ヘッダ
  2. 記事
  3. サイドバー
  4. フッタ
  5. {}デザインCSS
  6. 記事本文(HTML)

これを順番にチェックしていきます。

 

  1. ヘッダ:タイトル下のHTMLをチェック
  2. 記事:記事上、記事下のカスタマイズをチェック
  3. サイドバー:「編集」画面で独自に追加したモジュールをチェック
  4. フッタ:HTMLをチェック
  5. {}デザインCSSの内容をチェック
  6. 記事本文のHTMLをチェック

 

ここで見つけた「http」には、3通りの対応があります。

  • 単純に「S」を追加しても支障のないものは「S」を付ける
  • 「http:」を削除する
  • 「http」を含む部分をすべて削除する

 

すでに対象のサイトがSSL化されていれば、「S」を付けて問題ありません。

 

「http」のサイトの場合は「http:」を消して大丈夫ですがGoogleはそのやり方を推奨していないので、いつまで通用するかはわかりません。

 

一番安全なのは「http」へのリンクは一切貼らない方法です。

 

サイドバーの「おすすめサイト・記事紹介」先に、SSL化されていないライブドアブログ(自分のサイト)があったので、それは削除しました。

 

本文のチェックは、文章量の多さに比例して大変な作業になります。

一度では、チェックしきれませんでしたよ。

 

最後に残ったのが「Amazonアソシエイト」

 200を超える投稿記事を全部順番にチェックするのかと思うとゾッとします。

毎日コツコツやっても、半年はかかりそうですね。

 

はてなブログの「Amazon商品紹介」という機能をONにして使うと

http://www.amazon.co.jp・・・・・」と入力されてしまいます。

商品紹介リンクだけでなく「この商品を含むブログを見る」も「http」でリンクされるので、このHTMLの2ヵ所を修正しなくてはなりません。

 

テーマによって違うのかと思って公式テーマでも確認しましたが、やはり同じでした。

 

ということは、はてなブログ側でリンクの生成機能を直してもらわなければ、全部手作業で書き替えることになります。

 

または、amazonのオリジナルHTMLに張り替える作業になります。

いずれにしろ、膨大な作業量は変わりません。

 

はてなブログへ改善要求を伝えたので、結果を待ちたいと思います。

 

Amazonだけではなく、楽天の商品紹介も同じです。

 

 まとめ

 

  1. 自分のサイトのURLが「保護された通信」であることを確認
  2. 鍵マークが消えていたら「F12」+「F」でエラーを確認
  3. カスタマイズの記述を確認
  4. 記事をHTML表示して確認
  5. 混在コンテンツおよびエラーの解消

 

最新の記事だけ本文のリンクをすべて直しても、記事URLの「盾にマーク」は消えません。

おそらく、サイト全体のブロックが無くならないと、個別の記事ごとには対応しないのではないかと思います。

 

 

りょうこのつぶやきでした。

では、ごきげんよう。

アイキャッチ画像出典:キーボードと南京錠と鍵 - 【無料】白背景専門の無料写真素材サイト White BG