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

2019-11-13

サイトを常時SSL化する過程で、ソースにhttpで送られるコンテンツが含まれているとせっかくSSL化したページなのに「安全ではありません」という表記になってしまいます。

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

Google Chrome: 鍵アイコンが表示されない

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

No More Mixed Messages About HTTPS

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

1 Mixed Content（混在コンテンツ）エラーを発生させないためには？
2 Mixed Content（混在コンテンツ）を解消するには
3 JavascriptやCSSなどの外部ファイルの場合

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

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

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

というのが一番安全です。でもWordPressなどのCMSだとリンクは基本全て絶対パスになります。

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

Mixed Content（混在コンテンツ）を解消するには

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

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

Google Chrome

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

https://mydomain.net/XXX/はhttpsでロードされているけど、thumb30.jpgという画像はセキュアなリクエストじゃないといった内容でしょうか。

Firefox

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

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

JavascriptやCSSなどの外部ファイルの場合

画像だけでなくjavascriptやcssなどの外部ファイルのリンクもMixed Contentエラーになります。

httpリクエストは以下のようなものです

<img> (src 属性)
<audio> (src 属性)
<video> (src 属性)
<object> サブリソース (<object> が HTTP リクエストを送信したとき)
https://developer.mozilla.org/ja/docs/Security/%E6%B7%B7%E5%9C%A8%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84

javascriptのリクエストがhttpのままだとコンソールでエラーが表示されるのですがアドレスバーの鍵アイコンは表示されます。

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

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