POTTIRI'S AUTOBIOGRAPHY

工作やダイエットやITで遊ぶアラフォーエンジニアの自伝ブログです。

【ブログ運営】他サイトの画像のせいで「保護されてない通信」と表示される場合の対処

 

f:id:pottiri:20200901230017p:plain

HTTPSの設定はしているはずなのに・・・

お疲れさまです。POTTIRIです。
Feedlyってご存知ですか?
会員登録してサイトを登録すると、
そのサイトの更新内容を一覧表示してくれるサービスです。
昔のGoogleリーダーみたいなやつで、RSSリーダーと呼ばれるサービスです。

 

feedly.com

というわけで当サイトを毎日見に来てねという願いを込めて、
右側にFeedlyへの登録ボタンをつけたのですが、
これをつけた時からChromeで当サイトを見た時「保護されてない通信」と出るようになりました。
今回これの対処方法について記載します。

「保護されてない通信」の意味

現在のインターネットの世界では、
URLはセキュリティ上httpsによる通信が推奨されてます。
(なぜ推奨されてるかはこの記事の本題ではないので説明を省きます。)

はてなブログでは、管理画面の設定→詳細設定でこの設定ができます。

f:id:pottiri:20200901231238p:plain

https通信のON/OFFは、管理画面の設定→詳細設定から行います。


httpsにしているかどうかは検索順位に関係していると言われています。
もしかしたらアドセンスの審査にも関係あるかもしれません。
関係ないかもしれませんがとりあえずやっておきたいですよね。

トップ画像にある「保護されてない通信」というのは、
この設定をしていないか・しているけど上手く行ってないことを意味します。
httpsなのでやっておいたほうが良いよ〜とか、
上手く行ってないので見直してね〜という意味ですね。

ちゃんと設定しているのに

私の場合はちゃんと設定してるのに「保護されてない通信」が出ていました。
何ででしょうか?
こういう時Chromeなら「F12」を押してみます。

f:id:pottiri:20200901231455p:plain

F12を押すとブラウザが発する情報を見ることができます。


画面の下にブラウザからのメッセージが表示されます。
「Console」タブを開いて見ると、以下のメッセージが見つかりました。
Mixed Content: The page at 'https://pottiri.tech/' was loaded over HTTPS, but requested an insecure image 'http://s3.feedly.com/img/follows/feedly-follow-rectangle-volume-big_2x.png'. This content should also be served over HTTPS.

「Mixed Content」「feedly」というキーワードが気になりますね。
どうやらFeedlyの登録ボタンの画像がまずいようです。

f:id:pottiri:20200901231733p:plain

Feedlyの登録ボタンの画像が怪しい

「Mixed Content」とは、
サイトはhttpsの通信の設定なのに画像等のURLにhttpの通信のものが混じってる
ことを意味します。

なるほどですね。
けど、このボタンFeedlyの公式サイトで作ったものなんですけど・・・。

www.feedly.com


まあしょうがないですね。
幸い、公式サイトから提供されたHTMLを調整し、画像のURLをhttpsに直すだけで解決しました。

http://s3.feedly.com/img/follows/feedly-follow-rectangle-volume-big_2x.png

↓修正↓
https://s3.feedly.com/img/follows/feedly-follow-rectangle-volume-big_2x.png

 

まとめ

「保護されてない通信」と表示されるのは、
なんか嫌なのでhttpsはとりあえずやっておきたいですよね。
設定してるのに「保護されてない通信」と出る場合はF12を押してみてください。
多分理由がわかります。

最後まで読んでいただきありがとうございました。

アフィリエイト

はてなブログ Perfect GuideBook [改訂第2版]

はてなブログ Perfect GuideBook [改訂第2版]

  • 作者:JOE AOTO
  • 発売日: 2020/07/18
  • メディア: 単行本