Mixed Content（混在コンテンツ）の見つけ方・解消方法　【原因はhttps,httpの混在】

2019-11-132024-05-04

WEB Tips デザイン・コーディング

この記事にはプロモーションが含まれています

Mixed Content（混在コンテンツ）はHTTPSサイトのデータの中にHTTPで送られるコンテンツが含まれている時に発生します。

Mixed Contentが存在すると暗号化されていないコンテンツに悪意のある第三者がアクセスできてしまい、セキュアではなくなります。

せっかくSSL化したページなのに「安全ではありません」という表記になってしまいます。

Firefox：鍵アイコンにWarningマークがついていて正常に暗号化できていない状態

さらに、Googleでは今後リリースされるGoogle ChromeではこのMixed Contentをブロックするという発表がありました。(2019年10月）

Chrome 79 から始まる一連のステップで、Chrome はデフォルトですべての混合コンテンツをブロックするように徐々に移行します。
No More Mixed Messages About HTTPS Googleセキュリティブログ

FirefoxでもFirefox 23より混合コンテンツをブロックするようになっています。

この記事ではMixed Content（混在コンテンツ）が発生する原因とエラーを解消する方法と、正常にSSL化されているかをチェックするツールを紹介します。

Mixed Content（混在コンテンツ）が発生する原因

前述のとおりページコンテンツにhttpから始まるリソースが含まれているとMixed Content（混在コンテンツ）が発生してしまいます。

画像リンクのほか、JavaScript,CSSなどです。以下のような場合、Mixed Contentが発生する可能性があります。

画像のsrc属性がhttpで指定されている
JavaScriptなどのスクリプトのsrc属性がhttpで指定されている
CSSの記述、例えばbackground-imageがhttpで指定されている
iframeのsrc属性がhttpで指定されている
Webフォントがhttpで読み込まれている

参考 MDN:混在コンテンツ

Mixed Content（混在コンテンツ）の例

以下のようなMixed Contentが発生しているページがあります。

画像とjQueryをHTTPで読み込んでMixed Contentになった例

Mixed Contentのサンプル

このページでは画像とjQueryがhttpで読み込まれている状態です。

画像は強制的にHTTPSに書き換えられて表示されますが、jQueryのHTTPリンクはブロックされます。

Mixed Content: The page at 'ページURL' was loaded over HTTPS, but requested an insecure element '画像.jpg'. This request was automatically upgraded to HTTPS, For more information see https://blog.chromium.org/2019/10/no-more-mixed-messages-about-https.html

<img>, <audio>, <video>などsrc属性でHTTPが指定された場合、ChromeではHTTPSでアクセス可能なら自動的にHTTPSに書き換えて表示するようになっています。
>>> パッシブな混合コンテンツ

しかし、セキュアでないスタイルシートやJavaScript、iframeなどはィッシングや盗聴、悪意のあるサイトへのリダイレクトなどの脅威が高くなるため、ブロックされて実行されません。

WordPressでjQueryUIを読み込んだMixedContentの例

jQueryUIのデイトピッカーの日本語化ファイル（jquery.ui.datepicker-ja.js）をWordPressで読み込んだ例です。

wp_enqueue_script('jquery.ui.datepicker-ja','http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery.ui.datepicker-ja.js');

WordPressのenqueueスクリプトでhttpのURLを読み込んでいたためMixed Contentが発生しました。

Mixed Content:The page at '該当ページのURL' was loaded over HTTPS, 
but requested an insecure script 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery.ui.datepicker-ja.js'. This request has been blocked; the content must be served over HTTPS.

メッセージの内容は、該当ページはSSL化でロードされたのに、デイトピッカーの日本語化ファイルjquery.ui.datepicker-ja.jsを読み込んでいるURLはhttpsじゃないからブロックしてる。。。httpsで読み込みなさいといった感じで怒られます。

JavaScriptのMixed Contentエラーの場合、JavaScriptは実行されません。

masonry.jsをhttpで読み込んだときのメッセージ

jQueryのmasonryをhttpで読み込んだときはデベロッパーツールではエラーが表示されるのですがアドレスバーの鍵アイコンは表示されます。

Mixed Content: The page at 'https://example.com/XXX/' was loaded over HTTPS, but requested an insecure script 'http://example.com/XXX/js/masonry.pkgd.min.js'. This request has been blocked; the content must be served over HTTPS.

Firefoxでも鍵アイコンが表示されますが、ページの一部が安全でないと表示されます

Mixed Content（混在コンテンツ）を確認するには

最新バージョンのGoogle ChromeやFirefoxでは、デベロッパーツールに警告やエラーが表示されるので原因を見つけやすくエラーを解消するのは比較的簡単です。

画像リンクにhttpリクエストが含まれている場合は以下のようなメッセージが表示されます。該当の画像を指定してくれているので修正しやすいです。

Google Chrome

Mixed Content: The page at 'https://example.com/XXX/' was loaded over HTTPS, but requested an insecure image 'http://example.com/XXX/images/thumb30.jpg'. This content should also be served over HTTPS.

Mixed Content（混在コンテンツ）エラーを発生させないためには？

Mixed Content（混在コンテンツ）を発生させないためには、画像やJavaScript,CSSなど外部ファイルは相対パスでリンクするというのが一番安全です。

画像の同じ階層にある画像を相対パスで指定する例：
<img src="./image.jpg" alt="画像">

ひとつ上の階層にあるimagesファイルの画像を指定する例：
<img src="../images/image.jpg" alt="画像">

スタイルシートで背景画像を相対パスで指定する例：
<style>
  .example {
    background-image: url('/images/background.jpg');
  }
</style>

しかしWordPressなどのCMSは、基本全て絶対パスになります。

wp_enqueueでCSSやJavaScriptを読み込む時の注意

wp_enqueue_styleやwp_enqueue_scriptでCSSやJavaScriptを読み込む時、get_stylesheet_uri()やget_template_directory_uri()関数を使って正しいパスを読み込むようにします。

function theme_name_scripts() {
	wp_enqueue_style( 'style-name', get_stylesheet_uri() );
	wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}

add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

また、CDN経由で外部ファイルを読み込む場合などはhttpになっていないか注意する必要があります。

httpsでリクエストされているはずがhttpが含まれていたりするとMixed Contentエラーが発生してしまいます。

wp_enqueue_script('jquery.ui.datepicker-ja','https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js',array('jquery'),'', true);