Google ChromeでWebページを開いたとき、アドレスバー内の左側に「保護されていない通信」と表示されることがあります。この場合にWebサイト管理者として対策する方法を記録しておきます。

Chromeのデベロッパーツールで「安全」ではない要素を見つける

ChromeでHTTP接続のリソースを見つけるには、Chromeが標準で装備している「デベロッパーツール」(開発者ツールとも呼ばれる)を利用します。
まず対象のWebページをChromeで開いてから、[Ctrl]+[Shift]+[I]キーまたは[F12]キーを押して、デベロッパーツールを起動します。あるいは以下のようにメニューボタンから起動します。

Chromeのデベロッパーツールで「安全」ではない要素を見つける

もしデベロッパーツールがブラウザペインと同じウィンドウに表示されているなら、以下の手順で別ウィンドウに移動しましょう。その方がデベロッパーツールを広く表示できるため、この後の操作がしやすくなります。

https_tool_02

次に、デベロッパーツールの[Security]タブを選択し、[F5]キーを押して対象ページを読み込み直してから、左ペインの[Overview]を選択します。ここから「保護されていない通信」と表示される原因を探ります。

https_tool_03

上の画面例の場合、「Certificate」すなわちサーバ証明書と「Connection」(TLSの接続)については、結果が緑色で表示されており、トラブルは生じていないことが分かります。
一方、「Resources」すなわち画像やCSSファイルなどのリソースについては、赤字で「mixed content」すなわちHTTPとHTTPS接続が混在していると表示されています。このような場合は、そのすぐ下にある「View <個数> request(s) in Network Panel」というリンクをクリックします。すると、[Network]タブが表示されます。

https_tool_04

下側のペインにHTTP接続の「安全ではない」リソースの一覧が表示されます。それをクリックし、[Headers]タブに表示されるリクエスト/レスポンスの詳細で、「Request URL」に対象リソースのURLが表示されます(これが解決の鍵となります)。