まだ以下の記事をお読みいただいていない方は、本稿より先にそちらをお読みください。
混在コンテンツとは
混在コンテンツ(Mixed content 混合コンテンツとも)とは、SSL化されたhttpsページの中にあるにも関わらず、httpで通信してしまっている画像などの埋め込みコンテンツです。
httpsページに混在コンテンツが含まれている場合、そのコンテンツは正常に読み込まれず、またアドレスバーなどに警告が表示されることもあります。
サイトをいわゆる常時SSL化するためには、これら混在コンテンツをすべて解消する必要があります。
混在コンテンツの例
リンクがhttpである画像
<img src=”http://www.example.com/logo.png” alt=””>
リンクがhttpである埋め込みCSS
<link rel=”stylesheet” href=”http://www.example.com/style.css”>
リンクがhttpである埋め込みJavaScript
<script src=”http://www.example.com/common.js”>
リンクがhttpであるファビコン
<link rel=”icon” href=”http://www.example.com/favicon.ico”>
リンクがhttpであるフレーム/インラインフレーム
<iframe src=”http://www.example.com/form.html”></iframe>
混在コンテンツではない例
リンクがhttpである通常のリンク
<a href=”http://www.example.com/order.pdf”>申込書PDF</a>
通常のリンクは基本的には問題ないので、無理に解消する必要はありません。 ただしリンク先がインラインフレームなどの埋め込みになる場合には、混在コンテンツになり得ますので、解消する必要があります。
フォーム
<form action=”http://www.example.com/form.html” method=”post”></form>
<form action=”mailto:test@example.com” method=”post”></form>
httpsページ内のform要素でaction属性がhttpになっているのは、厳密には混在コンテンツではありませんが、フォームを送信(submit)する際に警告が出てしまいますので、解消する必要があります。
また、mailto:のような形式でも同様に警告がでますので、SSLに対応するには、適切なメールフォーム用のphpなどに置き換える必要があります。
混在コンテンツを解消するには
リンクをhttpsに書き直す
<img src=”http://www.example.com/logo.png” alt=””>
↓
<img src=”https://www.example.com/logo.png” alt=””>
埋め込みコンテンツがhttpsに対応しているのであれば、リンクを書き直すだけで済みます。
別のコンテンツに置き換える/混在コンテンツを削除する
古いアクセスカウンターのレンタルサービスなど、埋め込みコンテンツがhttpsに対応していない場合もあります。その場合は、別のサービスを利用するか、削除してしまうしかありません。
ページ内の混在コンテンツの有無を調べるには
主要なブラウザに搭載されている「デベロッパーツール(開発者ツール)」という機能で、ページ内に混在コンテツが含まれているかを調べることができます。 デベロッパーツールはほとんどのブラウザで、Windowsであれば{F12}、Macであれば{command}+{option}+{I}で起動できます。
混在コンテンツを探すのに便利なツール
ページ数が多数ある場合、ページ1つ1つをデベロッパーツールで調べていくのは現実的ではありません。
そこで、サイト内のコンテンツを自動で調査できるツールを、2つご紹介します。
HTTPS Checker
HTTPS Checker | Migrate to HTTPS & Fix Mixed Content.
https://httpschecker.net/
サイト内の全ページをチェックし、混在コンテンツを含むページをリスト化してくれます(無料版は500ページが上限)。結果の[Reveal]ボタンを押すと、デベロッパーツール同様、どの部分が混在コンテンツかを詳細表示できます。
Website Explorer
Website Explorer 開発者ブログ
https://thewebsiteexplorer.blogspot.com/
Website Explorer (ウェブサイト・エクスプローラ)の詳細情報 : Vector ソフトを探す！
https://www.vector.co.jp/soft/winnt/net/se247055.html
入力したウェブサイトの階層構造を調べるためのソフトウェアですが、結果画面の「サイト内リソース」にて、混在コンテンツの有無を調べることもできます。
