混在コンテンツとは
混在コンテンツ(Mixed Content)は、HTTPSで表示しているページの中で、画像、スクリプト、CSSなどをHTTP(暗号化されていない通信)で読み込んでいる状態です。ページ全体は暗号化されていても、一部が暗号化されていないことになります。
混在コンテンツが問題になる理由
HTTPで読み込む部分は、通信の途中で書き換えられる可能性があります。スクリプトやCSSが書き換えられると、ページの動きや見た目を丸ごと変えられます。
ブラウザはこれを防ぐため、HTTPのスクリプトやiframeを読み込まずに止めます。その結果、メニューやフォームが動かない、レイアウトが崩れる、といった不具合になります。HTTPSに移行した直後のサイトで、特によく起きます。
混在コンテンツの仕組み
| 種類 | 例 | 現在のブラウザの扱い |
|---|---|---|
| 能動的(書き換えられると影響が大きい) | script、stylesheet、iframe、fetch、フォント | 読み込まずにブロックする |
| 受動的(画像など) | img、audio、video | HTTPSへ自動で読み替える。読み込めなければ表示されない |
IPアドレスを直接指定した画像などは、読み替えではなくブロックされます。詳しくはMDNの解説を参照してください。
混在コンテンツの確認方法
開発者ツールの「コンソール」に、「Mixed Content: The page at … was loaded over HTTPS, but requested an insecure …」という警告が出ます。ページのHTML内にあるHTTPの参照は、次のコマンドで一覧できます。
curl -s https://example.com/ | grep -o -i -E '(src|href|action)="http://[^"]+"' | sort -uこのコマンドは、HTMLに直接書かれた参照だけを拾います。JavaScriptで後から挿入されるものや、CSSの url() は、コンソールで確認します。
混在コンテンツの直し方
基本は、参照先のURLを https:// に直すことです。WordPressでは、データベースに残った古いURLを一括で置換します。実行前にバックアップを取り、まず --dry-run で件数を確かめます。
wp search-replace 'http://example.com' 'https://example.com' --skip-columns=guid --dry-run
wp search-replace 'http://example.com' 'https://example.com' --skip-columns=guid直しきれない間の保険として、CSPの upgrade-insecure-requests で、HTTPの参照をHTTPSに読み替えさせることもできます。
Apache(.htaccess)の例です。
Header always set Content-Security-Policy "upgrade-insecure-requests"nginxの例です。
add_header Content-Security-Policy "upgrade-insecure-requests" always;よくある間違いと注意点
- 画像だけだから放置してよい、とは言えません。ブラウザの扱いは変わっていく経緯があり、表示の欠落や警告の原因になります。
upgrade-insecure-requestsは、参照先がHTTPSでも提供されている場合にだけ有効です。HTTPSに対応していない外部サービスの参照は、読み込めなくなります。- テーマやプラグインの設定、ウィジェット、投稿本文のHTML、カスタムCSSの中にも、古いURLが残ります。
- すでにCSPを別に設定している場合は、ヘッダーを上書きしないよう、1つのポリシーにまとめます。
Webサイト セキュリティチェッカーで確認する
Webサイト セキュリティチェッカーは、HTTPSのページがHTTPのスクリプト、iframe、画像などを参照していないかを診断します。能動的なものと受動的なものを、重大度を分けて示します。
関連用語
関連する用語
サイトの設定を無料で確認する
サイトのURLを入力するだけで、混在コンテンツ などの設定状況を診断できます。Webサイト セキュリティチェッカー「Security Checker X」は、登録なしで使えます。
