Mixed Contentとは？鍵マークが付かないときの直し方

Mixed Content（混在コンテンツ）とは？

Mixed Content（混在コンテンツ）とは、https で安全に読み込まれたページの中に、http のような保護されていない方法で読み込む画像やスクリプトなどが混ざっている状態のことです。ページ本体は暗号化されていても、中の部品の一部が暗号化されていない、という状態です。

戸締まりにたとえると、玄関に立派な鍵を付けたのに、窓が1か所だけ開いている状態です。ホームページを https にしたあと、以前に http で指定した画像や部品の読み込みが残っていると起きます。

この項目は、ガーディアンの無料のホームページ診断では、新・七つの大罪の「大罪-15 Mixed Contentなし」にあたり、77's Check!! の「No.53 Mixed Contentなし」と同じ項目です。ほかの診断項目の解説は、ホームページ診断の項目解説の一覧から読めます。

読み込むものによって、ブラウザの扱いが違う

混ざっているものの種類によって、ブラウザの動きと影響が変わります。どちらの場合も、直し方は https に置き換えることです。

なお、Chrome は2023年5月に、アドレス欄の鍵のマークを別のマークに置き換えると発表しています。そのため、今の Chrome で鍵のマークが見当たらないことだけでは、問題があるとは言えません。「保護されていない通信」といった表示が出ていないか、次の節の方法で確かめます。

Mixed Content があると、何が起きるか

Mixed Content があると、画像が表示されない、ページの見た目が崩れる、埋め込んだ地図やフォーム、計測のタグが動かない、といったことが起きます。ブラウザが安全のために読み込みを止めるためで、作った人の手元では以前と同じに見えていても、見に来た人には欠けて見えていることがあります。

安全の面でも問題があります。web.dev の説明では、http で読み込むものは通信の途中で盗み見られたり書き換えられたりするおそれがあり、とくにスクリプトのようにページ全体に働きかけるものが書き換えられると、ページの内容を変えられたり、入力した情報を盗まれたりする危険があるとされています。

問い合わせフォームのあるページで「保護されていない」ような表示が出ると、入力をためらう人も出ます。せっかく https にしたのに、一部の読み込みのために安心感が損なわれるのはもったいないことです。

この項目は、https にした直後だけでなく、あとから足したページや部品でも起きるのが特徴です。一度確かめて問題がなくても、古い記事や新しく貼り付けた部品に残っていることがあります。

自社のホームページで確かめる方法

Mixed Content は、パソコンの Chrome で主なページを開いて、アドレス欄の表示と開発者ツールの警告を見ることで確かめられます。

1. アドレス欄の表示を見る
   トップ、サービス、問い合わせ、古い記事などを順に開き、アドレス欄に「保護されていない通信」のような表示が出ていないかを見ます。表示が違うページがあれば、そのページに古い読み込みが混ざっている可能性があります。
2. Chrome の開発者ツールで警告を見る
   ページの上で右クリックし、「検証」から開く開発者ツールの「コンソール」を見てください。Mixed Content に関する警告やエラーが出ていれば、どのファイルが http で読み込まれているかが表示されます。コンソールの表示はページを移ると消えるので、1ページずつ確かめます。
3. ページのソースで「http://」を探す
   右クリックの「ページのソースを表示」で「http://」を検索します。ほかのサイトへの普通のリンクも見つかるので、画像（src）や読み込むファイルの指定に http が使われていないかを見ます。
4. 埋め込みの部品を動かしてみる
   地図、動画、予約やフォームの部品、バナーなどが、表示され、動くかを確かめます。動かない部品があれば、手順2の警告とあわせて見ます。
5. PDF などのダウンロードを試す
   資料や申込書の PDF のリンクを開き、ダウンロードが止められないかを確かめます。リンクが http のままになっていると、止められることがあります。

まとめて確かめたい場合は、無料診断で20項目を一度に確かめられます。Mixed Content のほかに、TLS（SSL）証明書の有効期限など、ホームページの基本となる項目をあわせて確かめられます。

Mixed Content が起きる、よくある原因

Mixed Content が起きる原因は、大きく分けて4つあります。多くは、https に切り替えたときに置き換えきれなかった読み込みが残っていることによるもので、作業の良し悪しというより、切り替えのあとに確かめる手順がなかったことから起きます。

記事や本文の中に、http で指定した画像が残っている

https に切り替える前に書いた記事やお知らせでは、画像の場所が「http://」で始まる形で本文に入っていることがあります。テンプレートは直っていても、古い記事の本文だけが残りやすい部分です。

テンプレート・CSS・JavaScript の中に http の指定が残っている

ヘッダーやフッター、CSS の背景画像や Web フォント、読み込むスクリプトの指定に http が残っていると、全ページで影響が出ます。スクリプトやスタイルシートは読み込みを止められるため、見た目の崩れや機能の不具合になって現れます。

外部のサービスの埋め込みが http のまま

地図、動画、予約の部品、バナー、広告や計測のタグなど、外部のサービスから貼り付けたコードが、http のままになっていることがあります。貼り付けた時期が古いほど起きやすい原因です。

PDF などのリンクが http のまま

資料や申込書へのリンクが http のままだと、MDN の説明のとおり、ブラウザがダウンロードを止めて利用者に危険を知らせることがあります。ページの見た目は変わらないため、気づきにくい原因です。

Mixed Content の直し方（対策は3つ）

Mixed Content は、混ざっている場所を書き出し、読み込み先を https に置き換え、部品を足すときの決まりを持つことで直せます。見た目は変わらないことがほとんどで、ホームページを作り直す必要はありません。対策は、自社でできること、制作会社に頼むこと、仕組みで保つことの3つです。

対策1：混ざっている場所を、表にまとめる

最初にすることは、確かめ方の手順で見つけた場所を表にまとめることです。表の形は「ページ／http で読み込まれているファイル／種類（画像・スクリプト・埋め込みなど）／表示や動きへの影響」がおすすめです。コンソールの警告の文面をそのまま写して貼っておくと、制作会社に一度で伝わります。

対象は、トップ、サービス、問い合わせのほか、以前に書いた記事やお知らせも数本は確かめます。目安として、主なページ5〜10枚分の表づくりは、担当者1人で1〜2時間ほどです。自社で行えば費用はかかりません。

対策2：読み込み先を https に置き換えてもらう

読み込み先の置き換えは、制作会社に頼みます。頼むことは主に4つあります。

1つ目は、自社のサーバーにある画像やファイルへの指定を、すべて https または相対の指定に置き換えることです。古い記事の本文は、まとめて置き換えられる場合があります。2つ目に、テンプレート、CSS、JavaScript の中の http の指定を直してもらいます。3つ目は、外部のサービスの埋め込みを https の版に貼り替えることです。https で取得できないものは、別の読み込み先に変えるか、許可があれば自社で持つか、削除するかを判断します。4つ目に、直したあと、問題が出ていたページを開いて、コンソールの警告が消えたかを確かめてもらいます。

補助の方法として、ブラウザに http の読み込みを https に切り替えさせる指定（upgrade-insecure-requests）もあります。便利な方法ですが、https で取得できないものは読み込めないままなので、元の指定を直すことが基本になります。

対策3：部品を足すときに、http を混ぜない決まりをつくる

一度直しても、古いコードを貼り付けると、また混ざることがあります。混ざらないようにするポイントは3つです。

1つ目は、外部のサービスのコードを貼り付けるときは、http になっていないかを確かめることを、社内の手順に入れることです。2つ目に、画像は管理画面から入れるなど、http で始まる指定を手で書かない決まりにします。3つ目は、半年に1回など決まった時期に、主なページのコンソールの警告を見直すことです。

制作会社に頼むときの伝え方

制作会社に頼むときは、対策1の表とコンソールの警告の写しを添えて、「どのページの、どのファイルが http で読み込まれているか」を伝えると、確認が一度で済みます。Mixed Content は、https への切り替えのあとに残りやすいだけなので、頼めば直せる部分です。誰が悪いかではなく、これから部品を足すときの決まりを一緒に決めることを優先しましょう。

そのまま使える依頼文の例です。

あわせて、次の点を確かめてもらうと、作業の範囲と費用の見通しが立ちます。

• テンプレート・CSS・JavaScript に http の指定が残っていないか
• 古い記事の本文の http の指定を、まとめて置き換えられるか
• 外部のサービスの埋め込みに、https の版があるか
• http から https への転送が、全ページで効いているか
• 直した後に、コンソールの警告が消えたことを確かめた結果

あわせて確かめたい項目

Mixed Content は、ホームページを攻撃や改ざんから守るための項目（サイト防御力）の1つです。守りに関わる、次の項目もあわせて確かめておくと安心です。

• TLS（SSL）証明書の有効期限：通信を守る証明書の期限が切れていないか。
• WordPressのログインID露出：管理画面へのログインの守りが固められているか。
• HTTPSへの自動転送：http で開いたときに、https のページへ自動で移るか。
• HSTS：ブラウザに https だけで接続するよう伝える設定があるか。

診断の項目ごとの解説は、ホームページ診断の項目解説の一覧から読めます。

よくある質問

まとめ

• Mixed Content とは、https のページの中に http で読み込むものが混ざっている状態のことです。
• ブラウザは画像などを自動で https に切り替え、スクリプトや埋め込みなどは読み込みを止めます。
• 表示の欠け、地図やフォームの不具合、入力へのためらいの原因になります。
• アドレス欄の表示と、Chrome の開発者ツールのコンソールの警告で確かめます。
• 場所は自社で表にまとめ、読み込み先の置き換えは制作会社に頼み、部品を足すときの決まりで保ちます。

Mixed Content は、https に切り替えたあとに残りやすい項目です。中小企業のホームページを制作し、公開後の運用と改善まで支える株式会社ガーディアンでは、Mixed Content を含むホームページの基本の項目を確かめる無料のホームページ診断を用意しています。