naisanpo

デジタルガジェットから写真/カメラ/旅、セキュリティのことまで。

はてなブログをHTTPS化した際の混在コンテンツを解消する

このブログ(naisanpo)をHTTPS化しました。

 

blog.naitwo.me

 

HTTPS化した直後、Chromeでアクセスするとアドレスバーに「!」マークが・・。

f:id:naitwo2:20180711224646p:plain

ブログが混在コンテンツ(Mixed Content)の場合に上記表示となるようです。

混在コンテンツ(Mixed Content)は、HTTPSで配信しているページに、JavaScript、CSS、iframeなどのHTTPのコンテンツが貼り付けられることで発生します。

(HTTPSとHTTPのコンテンツが混在している状態)

 

は、HTTPSで配信されるWebページに、次のようなHTTPのコンテンツ(img要素の画像や、JavaScript、CSS、iframeなど)が貼り付けられていることで発生します。

staff.hatenablog.com

 

解消する方法

この状態は、HTTPのコンテンツを削除、またはHTTPSに変更することで解消できます。

 

原因箇所の特定

Chromeでサイトを開き、「option + command + i」(Macの場合 *)をクリックしてデベロッパーツールを起動します。

*Windowsの場合は「F12」をクリック

 

f:id:naitwo2:20180711230218p:plain

 

Mixed Content: The page at ********

 というメッセージが出ていることを確認します。

そのメッセージには、どこが問題か(混在コンテンツか)が表示されています。

自分のサイトの場合は「http://f.st-hatena.com/images/<以下略>」が混在コンテンツの原因でした。

 

上記URLにアクセスするとサイトトップの画像が表示されたので、この画像を読み込んでいる箇所を探しました。

f:id:naitwo2:20180711230916p:plain

 

対応

管理画面 → デザイン設定 → デザインCSS 

で上記画像を読み込んでいたので、該当箇所を修正(URLをHTTP→HTTPSに変更)しました。

 

f:id:naitwo2:20180711231412p:plain

 

 解消!!

混在コンテンツ解消後に再度サイトにアクセスすると、”保護された通信”と表示されました。

f:id:naitwo2:20180711231512p:plain

 

これで完了です。