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

Mixed Content(混在コンテンツ)エラーの解消方法 【原因はhttps,httpの混在】

2019-11-13

WordPressの乗り換えするなら今がチャンス

エックスサーバー 移転代行サービス無料キャンペーン中。WordPressの移転もOK。今なら 33,000円 → 0円

Mixed Content(混在コンテンツ)エラーの解消方法 【原因はhttps,httpの混在】

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

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

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

Firefox:鍵アイコンにWarningマークがついていて正常に暗号化できていない状態
Google Chrome: 鍵アイコンが表示されない

さらに、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(混在コンテンツ)の例

<img> (src 属性) 
<audio> (src 属性)
<video> (src 属性) 
<object> サブリソース (<object> が HTTP リクエストを送信したとき)

能動的なMixed Content(混在コンテンツ)の例

<script> (src 属性)
<link> (href 属性) (CSS スタイルシートも含む)
<iframe> (src 属性)
XMLHttpRequest リクエスト
fetch() リクエスト
url 値を用いる CSS すべて (@font-face / cursor / background-image など)
<object> (data 属性)
Navigator.sendBeacon (url 属性)

https://developer.mozilla.org/ja/docs/Web/Security/Mixed_content

MDNではMixed Contentには受動的・能動的の2種類があると説明されています。

受動的な混在コンテンツは危険性が低いのですが、能動的な混在コンテンツはフィッシングや盗聴、悪意のあるサイトへのリダイレクトなどの脅威が想定されるということです。

jQueryUIを読み込んだエラー例

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で読み込みなさいといった感じで怒られます。

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でも鍵アイコンが表示されますが、ページの一部が安全でないと表示されます

FirefoxでセキュアではないJavaScriptをブロック「このページの一部が安全ではないためFirefoxがブロックしました」

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

Mixed Content(混在コンテンツ)を確認するには

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

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

Google Chrome

Google Chromeデベロッパーツール・ConsoleでMixed Contentメッセージ
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.

コンソールのメッセージは「https://example.comt/XXX/はhttpsでロードされているけど、thumb30.jpgという画像はセキュアなリクエストじゃない」といった内容でしょうか。

JavaScriptの時よりはちょっと弱めの警告です。

Firefox

アドレスバーで鍵アイコンをクリックするとページ情報を表示できます。

Firefoxの警告メッセージ「このページの一部(画像など)は安全ではありません」

さらに右矢印をクリックすると「このサイトとの接続は安全ではありません」と表示されます。

「詳細を表示」をクリックします。

メディアの項目ではリンクされている画像の一覧が見れます。ここでhttpになっている画像を確認することができます。

Mixed Content(混在コンテンツ)エラーを発生させないためには?

Mixed Content(混在コンテンツ)エラーにしないためには

画像やJavaScript,CSSなど外部ファイルは相対パスでリンクする

というのが一番安全です。

でも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);

Mixed Contentをチェックするツール

オンラインツールを使って、サイトをクロールして安全ではないコンテンツをチェックすることができます。

JitBit SSL Check

https://www.jitbit.com/sslcheck/

HTTPSのWebサイトをクロールしてブラウザーで「mixed content」の警告メッセージを出している画像、スクリプト、css ファイルを検索します。

サイトのURLを入力して送信するとサイトをチェックします。検索は400ページが上限になっています。

サイトをチェックした結果、「SSL Issues」以下にSSLでないコンテンツが発見されると赤い文字で表示されます。

URLをクリックしてみるとSSL対応していない画像を表示してくれます。

Missing Padlock SSL Checker

https://www.missingpadlock.com/

Missing Padlockはサイトをクロールして画像, 音声, 動画, frames, CSS, JavaScript, フォームを探してチェックします。

既にhttpsのページをクロールして安全でないコンテンツを検出します。

まだSSL対応していないページ(httpから始まるURL)の場合はSSL対応した場合にMixed Contentを引き起こすページを検出してくれます。

まとめ

Mixed Contentとは何か?発生したときの状態や解消する方法について解説しました。

Mixed Contentが存在するとブラウザでブロックされてしまうのでコンテンツが正常に動作しない場合があります。

また何よりフィッシングや悪意のあるサイトへのリダイレクトされるなど脅威が想定されるため発見したら直ちに修正することが推奨されます。

Mixed Contentをチェックするオンラインツールも紹介していますので定期的にサイトをチェックするといいですね。

今月キャンペーン特典があるサービス

  • ロリポップ!
    ハイスピードプラン36ヶ月で実質月額440円 - 2023年2月10日(金)23:59まで
  • エックスサーバー
    12ヶ月以上で半額キャッシュバック月額495円&ドメイン永久無料 - 2023年2月3日(金)12:00まで
  • Xserverビジネス
    12ヶ月以上契約で初期費用無料、3ヶ月・6ヶ月で初期費用半額 - 2023年4月4日(火)12:00まで

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