知る/活用する

httpsにしてもURLバー（アドレスバー）に鍵マークが表示されない理由は「mixed-content」にあります。
このページでは、mixed-contentとなっている箇所の調べ方についてご案内します。

関連

鍵マークが表示されない？

SSLサーバー証明書を設定してhttps（通信の暗号化）に対応させたはずのWebサイトをChromeやFirefoxなどのブラウザーで見た時に、URLバー（アドレスバー）の横に鍵マークが表示されないことがあります。

Webページによって「鍵マークあり」「鍵マークなし」が変わってしまい、トップページは鍵マークが表示されているけど、会社案内ページは鍵マークが表示されていないなんてことも。

なぜ鍵マークが表示されるWebページとされないWebページがあるのか。また、どこを解消すれば鍵マークが表示されるようになるのか、ブラウザーを使って簡単に調べる方法をご紹介します。

鍵マークが表示されない原因（mixed-content）

httpsのWebページに、httpから始まる記述（リソース）が混ざってしまうと鍵マークが表示されません。
該当部分を読み込む際は安全でない通信が行われているためです。

このhttpのコンテンツが混ざってしまっている状態を「mixed-contents」といいます。

特に気をつけたいポイントは3つです。

• 画像・動画を読み込むURL
• CSSを読み込むURL
• JavaScriptを読み込むURL

【ブラウザー別】原因となっている箇所の見つけ方

Chromeでの見つけ方

1. 運営するWebサイトにアクセスした後、Chromeデベロッパーツールを開いてください。
   • 画面上で右クリックをすると[検証]の項目がありますのでクリック
     または
   • キーボードの[F12]を押す
2. [Console]をクリックするとmixed-contentがある場合は該当箇所が表示されます。

Firefoxでの見つけ方

1. 運営するWebサイトにアクセスした後、Firefox開発ツールを開いてください。
   • 画面上で右クリックをすると[要素を調査]の項目がありますのでクリック
     または
   • キーボードの[F12]を押す
2. [コンソール]をクリックすると混在表示コンテンツ（mixed-content）がある場合は該当箇所が表示されます。

Safari（Mac OS）での見つけ方

1. 運営するWebサイトにアクセスした後、Safari webインスペクタを開いてください。
   • 画面上で右クリックをすると[要素の詳細を表示]の項目がありますのでクリック
     または
   • キーボードで[option]・[command]・[I]を同時に押す
2. [コンソール]をクリックするとinsecure contentがある場合は該当箇所が表示されます。

まとめ

• SSLサーバー証明書を設定してhttpsに対応させても鍵マークが表示されないことがある
• 原因はhttpのWebコンテンツを外部から読み込んでしまう「mixed-content」にある
• 対処方法はWebページ内のhttpから始まる記述を修正すること
• 修正箇所はブラウザーの開発ツールなどで確認できる

関連ページ

• JPRSサーバー証明書商品案内（料金・見積もり・お申し込み）
• 常時SSL化で押さえておきたいメリットとデメリット【Webサイト運営者向け】
• 「保護されていない通信」という表示が出ないようにするには【Webサイト運営者向け】
• 【画像で解説】混合コンテンツでブロックとなった時の確認と対策〜Chrome79から段階開始【Webサイト運営者向け】