混在コンテンツとは

まだ以下の記事をお読みいただいていない方は、本稿より先にそちらをお読みください。

目次

混在コンテンツとは

混在コンテンツ(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

あわせて読みたい
Website Explorer (ウェブサイト・エクスプローラ)の詳細情報 : Vector ソフトを探す! ウェブサイトの情報を階層表示する サイト丸ごとダウンロードも可能

入力したウェブサイトの階層構造を調べるためのソフトウェアですが、結果画面の「サイト内リソース」にて、混在コンテンツの有無を調べることもできます。

メールやホームページの
「困った!」を解決しませんか?

お取引企業20,000を超える実績を持つスピーバーでは、豊富な知識を持ったIT業務の専門家が 複雑な手続きや設定をサポートし、お客様の挑戦と成長を応援いたします。

スピーバーに相談する
よかったらシェアしてね!

この記事を書いた人

クラウド黎明期から一貫して「初心者の方に分かりやすく」がモットー。
これからもITやクラウドを通じてお客様のお役に立ちたい。

まずはお気軽に
お問い合わせください

スピーバーのサポートデスクでは、レンタルサーバーに関するご質問やご相談だけでなく、
お客様のオフィス内でのお困りごと全般のご相談を受付けています。

パソコンの操作、メールの設定、迷惑メールやスパムメールが多くて困るといった、
日常業務でのお困り事をお気軽にご相談ください。

お電話での
お問い合わせは
スピーバーお問い合わせ電話番号:0120-63-1138
0120-63-1138
9:00~18:00(祝祭日を除く月曜日~金曜日)
目次
閉じる