HTTPSなのに画像が出ない・表示が崩れる？混在コンテンツの確認方法

ページがHTTPSなら、画像も確認済み？

ページ本体の接続と、画像や装飾の読み込みを分けます。HTTPSは、ブラウザーと接続先の間を暗号化して情報をやり取りする方式です。HTTPの参照が残った画像等をHTTPSのページから読み込もうとする状態は、混在コンテンツと呼ばれます。

一枚のページは、本文だけでなく画像、文字や配置を整えるCSSファイル、動作を加えるスクリプト等を別のURLから読み込む場合があります。ページのアドレスがHTTPSでも、これらの保存参照や実際の要求まで同じ条件とは限りません。

証明書の問題でページ本体の接続に警告が出る場合と、HTTPSの本体からHTTPの資源を読み込もうとする場合は、見る対象が異なります。まずどのページの、どの接続についての警告かをそろえます。見た目だけから証明書失効や特定のWordPress設定を原因にしません。

以下は一つの対象ページを点検する説明です。全サイトの安全性を証明する検査でも、実際のサーバー設定を変更した結果でもありません。初回のページ制作と公開範囲の整理は、初めてWebサイトを作るガイドで扱っています。

参考：MDN：HTTPSページと混在コンテンツ

初めてWebサイトを制作・公開する流れ

ブラウザーで、どの読み込みを見る？

対象のページURL、確認時点、ブラウザーと版、確認する画像や装飾を決めます。管理者だけのページと訪問者が開くページを混ぜず、同じ対象と条件で記録を対応させます。

Chromeでは開発者向けの確認画面DevToolsを開き、Privacy and securityのSecurity部分を確認します。開き方はDevToolsのコマンドメニューでprivacyを検索する方法や、More toolsから選ぶ方法があります。名称は使っている版の画面と照合してください。ここではPrivacyのCookie制限を変更する必要はありません。

Securityでは、ページ本体の接続先と証明書を、資源の接続先と分けて読みます。Non-secure originsに対象があれば、View requests in Network panelからその読み込み記録へ進めます。証明書の期限等は実際に表示された結果で確認し、HTTPSの文字だけで有効と決めません。

Networkは、ページが読み込むものの一覧です。開いてからページを再読み込みし、対象の画像やCSSの行を探します。記録前の読み込みはこの一覧に残っていない場合があります。Typeは種類、Statusは応答や処理結果、Initiatorは読み込みを起こした参照をたどる手掛かりです。

対象の行では、完全な要求URL、Headersの情報、ResponseやPreview、Initiatorを必要な範囲で読みます。Consoleの警告やIssuesの対象資源も同じURLへ対応させます。警告文、応答番号、画面の見え方を一つの結果へまとめません。共有する記録には認証情報や個人情報を含めず、必要なURLと結果だけを残します。

参考：Chrome：接続先と証明書、資源の要求を調べる

参考：Chrome：Networkの記録と個別資源の詳細

参考：Chrome：Issuesから対象資源へ進む

画像の自動変更と、CSSのブロックは同じ？

ブラウザーがHTTPの要求をHTTPSへ変える場合と、読み込みを止める（ブロックする）場合を分けます。通常の画像でimgのsrcにドメイン名のURLを指定する場合は、自動でHTTPSへ変更される対象になり得ます。imgは画像を表示するHTMLの要素、srcは読み込み先の指定です。変更されたことだけで、提供元から画像を取得できたとは決めません。

スタイルシートをlinkのhrefでHTTPへ参照する場合などは、ブロック対象です。linkはこの例で装飾ファイルを読むHTMLの要素、hrefはその行き先の指定です。また、候補の画像を選ぶsrcsetやpictureを使う場合、接続先を数字で指定するIPアドレスの場合などは、前の通常画像と同じ扱いにしません。CSSから読む画像も、CSSファイル本体とは分けて、種類と記録を見ます。

実際に、画像の自動変更の警告を見て、そのままでよいのか迷った本人の相談があります。別の本人報告では、HTTPSの管理画面でリンク文字ばかりの表示になり、その後に別の接続エラーも報告されています。特定の追加機能や設定変更を、すべての環境の解決方法にする根拠にはしません。

次の二例は、同じHTTPSページについての説明用の架空記録です。画像とスタイルシートは種類と処理が異なるため、保存参照・ブラウザーの観測・要求と表示をそれぞれ並べて読みます。

図の画像とスタイルの記録を、項目ごとに読む

同じHTTPSページでも、画像には要求先がHTTPSへ自動変更されて応答200・画像表示の記録があり、スタイルシートには混在コンテンツとしてブロックされた記録があります。別の資源の観測で、修正前後ではありません。画像表示だけで保存参照の修正や全資源の正常を確認したことにはしません。

両方が属する対象ページ

対象ページのURL

https://site.example/guide/

読み込むものの種類

画像の記録

画像（imgのsrc、IP指定でないドメイン）

スタイルシートの記録

スタイルシート（linkのhref）

保存された読み込み先のURL

画像の記録

http://site.example/wp-content/uploads/sample.png

スタイルシートの記録

http://site.example/wp-content/themes/sample/style.css

ブラウザーの処理の記録

画像の記録

HTTPからHTTPSへ自動変更されたという記録

スタイルシートの記録

混在コンテンツとしてブロックされたという記録

要求URLの観測

画像の記録

https://site.example/wp-content/uploads/sample.png

スタイルシートの記録

未確認

HTTP応答番号の観測

画像の記録

200

スタイルシートの記録

未確認

画面表示の観測

画像の記録

この画像は表示されたという記録

スタイルシートの記録

本文は読めるが装飾の一部が出ないという記録

両方とも未確認の項目

証明書の確認

未確認

参照元の修正

未確認

ほかの資源の確認

未確認

個別のWordPressの原因

未確認

修正後の結果

未確認

スタイルシートのブロック記録から、要求URLやHTTP応答番号を403・404へ補完しません。説明中のURLへアクセスした結果ではありません。

PC原寸画像を開く · モバイル原寸画像を開く

最初の例の200は、読み込みの要求が正常に処理されたことを示す応答番号です。この画像が表示されたという記録もありますが、保存されたHTTP参照が修正されたことや、他の画像・CSSも正常という結果にはなりません。

二例目は混在コンテンツとしてブロックされた記録です。実際に扱われた要求URLとHTTP応答番号は未確認なので、403・404等の番号を作りません。装飾の一部が出ないという観測から、サイト全体が停止したとも決めません。

参考：MDN：自動変更する種類とブロックする種類

参考：本人の相談：画像の自動変更後も参照を確認する理由

参考：本人の報告：HTTPSで装飾が出ないときの確認

HTTPの参照は、どこから読み込まれている？

警告に出た資源URLを、どこに保存された参照が呼び出したかへ対応させます。NetworkのInitiatorや関連するソースを手掛かりに、本文の画像、画像ブロック、テーマの設定やファイル、追加機能等のどこから使われるかを担当が確かめます。似たファイル名だけで同じ対象と決めません。

本文の画像が対象なら、その本文で選ばれた画像と保存参照を照合します。共通の装飾ファイルなら、一つの記事を開けたことを全ページの修正にせず、テーマや追加機能の管理担当と対象をそろえます。見つかったHTTPの文字を理由に、全データを一括置換する手順にはしません。

WordPressのツールからサイトヘルスの情報を開くと、版やURL、HTTPS使用の表示等を確認できます。この情報画面は設定を変更する画面ではなく、個々の画像やCSSの読み込み結果を示す一覧でもありません。設定の表示とブラウザーでの実要求を分けます。

サーバー移転や公開URL変更に伴うDBの複製・接続・保存参照の更新は、移転方法として対象と範囲を別に決める作業です。本稿では、その手順全体を繰り返さず、現在の対象ページで何が要求され、どの参照を確認すべきかを絞ります。

参考：Chrome：要求を起こした参照をたどる

参考：WordPress：サイトヘルスの情報画面の範囲

参照を直す前後は、何を比べる？

権限を持つ管理担当が、変更する参照と戻す版、確認するページを決めます。先に資源の提供元でHTTPSの正しいURLを利用できるかを確認します。文字をHTTPからHTTPSへ変えれば、どの提供元でも同じ内容を読めるという保証はありません。

対象が本文の参照なら、その一件の正しいHTTPS URLへ訂正する方法を選びます。同じサイト内の適切な相対参照も選択肢です。相対参照は、同じサイト内の場所を基準に行き先を書く方法です。外部の提供元が未確認なら、正しい置換先を推測して作らず、提供条件を確認します。

共通テーマや追加機能が参照元なら、管理担当が変更する保存場所と影響範囲を確認します。いきなりテーマ全体の初期化や新しい追加機能の導入、全DBの置換へ広げません。作業前の版と対象をそろえて、許可された範囲だけを変更します。

変更後は、同じページと対象資源を同じ条件で開き、保存参照、実際の要求URL、警告、応答、画像や装飾の表示を前の記録と比較します。管理者の表示だけか、訪問者の公開範囲かも条件に残します。参照を保存したことと、読み込みを再確認したことは別です。

本稿の架空記録では、参照元の修正と修正後の結果は未確認です。ここに書いた操作説明を、実際のWordPress・証明書・サーバー・CDN等の設定変更や成功の証拠にはしていません。

参考：MDN：資源のHTTPS提供と参照の確認

一つのページの結果を、全体へ広げない

点検したページURLと資源の範囲を明記し、確認できた要求・応答・表示だけを結果にします。証明書、他の資源、参照元の修正、個別の原因、修正後の結果は、それぞれ確認した範囲で残します。

次の例は、ページURLだけがあり、資源の記録がまだありません。画像やCSSがない、警告がない、証明書が有効または失効しているという結果には変えません。

資源記録をまだ取れていない場合は、対象ページで開発者向け画面を開いて再読み込みし、どの資源の何を調べるかを絞ります。別ページや別時点の警告を、現在の結果として埋めないでください。

今日の一歩は、気になる画像またはCSSを一件選び、ページURL、保存参照、ブラウザーの記録、要求と表示を並べることです。自動変更・ブロック・未取得を分ければ、次に確かめる参照元と、修正前後の比較対象を具体的に決められます。